Product Add-to-Cart Button Element

About Product Cart Button

The Add to Cart button holds significant importance for any store, as it enables customers to add products to their shopping cart with a simple click. In GemPages, this button is referred to as the Product Cart Button, and it offers a wide range of functionalities beyond just adding products to carts.  

To add the Product Cart Button to your page, please follow the steps below. 

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

Step 2: Since the Product Cart Button is a child element of the Product Element, it has to be nested inside a Product module to function correctly.  If you don’t have a Product module, drag & drop one onto your page.

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

Once added, click on the element to access the settings on the left sidebar. The configuration is divided into two main tabs: Settings and Advanced.

Configure the Settings Tab

1. Product Source

Specify the product source that the button should be linked to, ensuring correct functionality.

2. Content

• Labels: You have the ability to fully customize the text displayed on the Cart button. The default text is “ADD TO CART,” but you can modify it to any text that aligns with your design and objectives.
• Styles: Select a style for the cart button label from the available pre-determined styles.
• Font: Choose the font for your text label from the drop-down menu. In case, you would like to use other fonts, check out how to use a custom font here.
• Sizes: Determine your preferred font size.
• Click on the “Show more” button to reveal more customization options. 
• Font Weight: Choose your desired font weight from the provided drop-down menu.
• Line Height: Adjust the height of the text by specifying a percentage value.
• Letter Spacing: Modify the spacing between letters by inputting a value in pixels.
• Transform: Transform the text to uppercase, lowercase, or capitalize as desired.

3. Layout

Choose button’s layout settings to fit your page design.

4. Icon

• Choose Icon: Select an icon to display on the button.
• Icon position: Position the icon on the left or right side of the text.
• Spacing: Adjust the spacing between the icon and text.

5. Action after click

Specify the action that occurs when the user clicks the Cart button:

• Keep shopping: Opting for this selection will add the item to the cart while keeping the user on the same page to continue shopping.
• Go to checkout: Choosing this option will redirect the user directly to the checkout page, bypassing the cart page.
• Open Cart: Activate the cart drawer/ mini cart when the user clicks on the Cart button. Kindly be aware that this feature currently only works with Shopify free themes. If you are using a different theme, please reach out to our support team for additional help.
• Open URL: Selecting this will redirect the user to a custom URL of your choice.

6. Size

• Width: Set the button width.
• Height: Adjust the height of the button.
• Padding: Define the padding inside the button.

7. Color & Shape

At this point, you have the ability to style the button in both its normal state and when hovered over. You can modify the button color, text label color, corner, border, and apply a button shadow as desired. These options allow you to customize the visual presentation of the button to align with your design preferences.

8. Out-of-stock button

This option enables you to customize the display of the cart button when the product’s inventory reaches 0. By enabling the Custom Style switch, additional styling options for the button will be revealed, allowing you to customize its appearance further.

Configure the Advanced Tab

For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.