About Product Cart Button
The Add to Cart button holds significant importance for any e-commerce 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.
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.
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 Product Cart Button element inside the Product module, on your preferred spot.
Clicking on the element, you will notice the settings configuration displayed on the left sidebar. It consists of two main tabs: Settings and Design. These tabs provide you with a range of options to configure and customize the behavior and appearance of the product cart button.
Configure the Settings Tab
Add to cart button
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.
Style: 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.
Text transform: Transform the text to uppercase, lowercase, or capitalize as desired.
Action after click
Specify the action that occurs when the user clicks the Cart button:
- Go to checkout: Choosing this option will redirect the user directly to the checkout page, bypassing the cart page.
- Keep shopping: Opting for this selection will add the item to the cart while keeping the user on the same page to continue shopping.
- Open URL: Selecting this will redirect the user to a custom URL of your choice.
- 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.
Icon
Toggle on this option to add an icon to the cart button label. After that, you can choose an icon from our icon library or upload one using the SVG code.
Icon position: Position the icon on the left or right side of the text.
Size
Button Size: Choose your preferred size for your button from the pre-determined style. You also have the option to customize your own size by clicking on the three-dot button.
Full-width: By enabling this option, the button will expand to occupy the entire width, stretching from one edge to the other.
States
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.
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.
And there you have it! If you need any further assistance along the way, our GemPages Support Team is always here for you!
