Let customers add products to cart with the (P) Cart Button element

 

The Add to Cart button is essential to any e-commerce store, as it automatically adds the product to the customer's shopping cart when clicked. With GemPages, it is represented by the (P) Cart Button, and there's much more you can do with it rather than just adding products to carts. Let's walk through all options in this article.

 

What is the (P) Cart Button element?


The (P) Cart Button element represents the Add To Cart or Buy It Now button you often see on an e-Commerce website. The element is a child element of the Product module and is available in the left sidebar of the Editor right out of the box.

 

Add (P) Cart Button to your page

 

Since the (P) Cart Button is a child element of the Product module, it has to be nested inside a Product module to function correctly.

 

Step 1: In the GemPages Dashboard, select your page to work on the enter the Editor.


Step 2: If you don't have a Product module, drag & drop one onto your page.


Step 3: Drag & drop the (P) Cart Button element inside the Product module, on your preferred spot.

 

 

The Settings Tab

 

Ajax Cart


The Ajax Cart switch provides you more options to customize your Cart Button. One of which is the ability to stay on the page or redirect customers to a different page. We’ve prepared an article for you just about the Ajax Cart feature, click here to learn more.

 

 

Button Text


The text displayed in the Cart button is fully customizable. By default it’s “ADD TO CART” but you can change it to whatever text that suits your design and purposes.


 

You can even add a text icon here to create a Cart button as an icon. Check out this article for the full instruction.

 

Typography


You can adjust the Font size using either the slider or manually put in a number (in pixels). For the Font, select from our options in the drop-down list or add your own using the Font manager. To manage custom fonts, please check out this article.

 

 

Button color


This section allows you to adjust the Background color, Text color and turn on/off the Hover effect of the button.

When the Hover Options is turned on, you can adjust the Background and Text color of the effect as well.

 

 

Dimension


This section allows you to adjust the width and height of the (P) Cart Button element.

You also have the option to turn on theStretch button, which will stretch out your button to fully accommodate the section it’s put into.

 

 

Alignment

 

You can align the (P) Cart Button element with 3 options: Left, Center, and Right as show in the Editor respectively.

 

 

Effect


By Default, your button doesn't have any effect. Click on the drop-down menu to choose between Shake or Shake on Hover effects, then input the value you want for the Animation Interval box (1000 = 1 second).

 

 

Image


You can add a background image for the Cart button here. 3 ways to do it: Upload image from your device, Browse gallery to select one, or enter the image link to the Image Src field.


 

Button ID

 

If you use a third-party app for your Cart button, you can put the Button ID here and GemPages will help you display it on your live site.

 

 

Extra Class


For the tech-savvy coders out there, you have the freedom to customize your Cart button element even further by adding a class name,, and then refer it in the CSS file.


 

The Design Tab


When you’ve finished setting up your (P) Cart Button element, don’t forget to customize its look using the Design tab.


 

Beside from the basic settings parameters, you can do much more with the (P) Cart Button element. Check out our articles on how to create a Buy It Now button and how to create a Stickly Cart button that is always in display.

 

For any further help, please reach our GemPages Support Team via email or live chat.


Was this helpful?