[V6] (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 element inside the Product module, on your preferred spot.

The Settings Tab

Ajax Cart

The Ajax Cart switch provides you with more options to customize your 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 button as an icon. Check out this article for the full instructions.

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 the Stretch 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 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 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 the 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 Sticky Cart button that is always on display.