(P) Cart Button element

In this article, you will learn about (P) Cart button elements and how to use them to create highly converting pages.

What is a (P) Cart Button?

The (P) Cart Button is used to create the Add To Cart button or Buy it now button for any product. This element is a fundamental element for any product listed on a page. Once visitors click on this button, it will automatically add a product to their cart.


In the editor page, you can find this element on the left sidebar or in the Search box at the upper left corner. 

Settings tab's parameters 

  1. Ajax cart: Offers you three options after clicking the Add to cart button. For further instruction, read more here

  2. Button text: Aside from a normal text like Add To Cart, you can customize your button text such as Buy it now by entering any content you want. You can also add a text icon here to create a Cart button as a cart icon. Click here to learn how to set it up.

  3. Typography: Style the text of the cart button with multiple options.

    • Font Size (in pixel), Line Height (in em), Letter Spacing (in pixel): For these parameters, you just simply slide the adjustment bar from left to right and vice versa to configure them.
    • Font: You can choose any fonts which are available in the Font Manager or add any custom fonts from external sources. For better page loading and graphic design, the maximum font displayed on a page is three fonts. However, there is no limit to configure fonts in your store. You can take a look at this article to know how to add a custom font to your site. 
    • Font style: You can style the text with bold (B)italic (I), and underlined (U).
    • Text Transform: You can manipulate the text for it to appear in all-uppercase or all-lowercase, or with each word capitalized.

  4. Button color: It allows you to set background color and text color when it is normal or when you hover over it.

  5. Dimension: Adjust your button's width and height here.

  6. Alignment: Align the checkbox. The three primary types of text alignment include left-aligned, centered, and right-aligned.

  7. Effect: Add more effect for the Cart button. You can choose from these 3 options listed below:

  8. Image: You can add a background image or color for the cart button here.

  9. Button ID:  This part helps you to integrate a custom button customized by a third-party app.

  10. Extra class: If you wish to customize one element particularly, please use this field to add a class name and then refer to it in the CSS file.

How to create a Buy it now button

    • Step 1: In the Product Module, select the Cart Button.
    • Step 2: Under the Settings tab, enable Ajax Cart.


    • Step 3: In More Settings, select Checkout. It will redirect your customers to the checkout page once they add an item to the cart.


  • Step 4: Edit the Button text to Buy it now. 

How to create a fixed cart button

Video instruction will walk you through the steps below. Click here to access it.
  • Step 1: From the left sidebar, drag a Row element into the Product module which the cart button is linked with
    To find the fixed Cart button later, it is recommended to enable Full Width for the Row element.
  • Step 2: From the left sidebar, drag a new Cart Button element (the fixed Cart button) into the Row element
  • Step 3: Right-click on the default Cart Button and select Copy CSS to synchronize it to the fixed Cart button
  • Step 4: Right-click on the new Cart button and select Paste CSS
  • Step 5: Right-click on the Row element, select Edit CSS and then paste the following CSS code into the appearing CSS box. You can change the value of Bottom, Left, Right, and Z-index to position your fixed Cart Button (in pixel)


That's it! Click Save and Preview, then Publish when all is perfect. If you're interested in learning more about the powerful and user-friendly GemPages, please feel free to read out more articles here or reach out to our Support Team. We'd be happy to answer any questions you have.


Was this helpful?