Sticky Add-to-Cart Element

About the Sticky Add-to-Cart element

A Sticky Add-to-Cart button on a webpage is a button that remains visible and “sticks” to the screen as you scroll. It is a valuable UI element on e-commerce websites that enhances the shopping experience by providing easy access to the cart and streamlining the checkout process. 

It contributes to better user engagement, improved conversion rates, and overall user satisfaction by reducing friction in the online shopping journey.

How to Add a Sticky Add-to-Cart Element to Your Page?

To incorporate a Sticky Add-to-Cart in GemPages Editor v7, please follow these steps:

Step 1: Access the GemPages Dashboard > Pages > Collection, then click on your target collection page to locate the editor.

Step 2: From the left sidebar, search for the “sticky add to cart” and drag & drop it to your page.

By default, the Sticky Add-to-Cart element comes preloaded with essential components:

• Product module (Product image, Product title, and Product price)
• Product variant & swatches
• Product quantity
• Product Add to Cart

This ready-made setup ensures your sticky bar is functional right away. You can simply “Save” and “Publish” the page, and the Sticky Add-to-Cart will be ready on your live page. 

However, for seamless integration with your overall page design, you have complete flexibility to customize both the Sticky Add-to-Cart itself and its child elements.

Configure the Settings tab

When you select the Sticky Add-to-Cart element, you’ll discover all the configuration options conveniently located on the left sidebar, including:

Layout

From the Layout section, you can choose the position of the sticky add-to-cart on your page: bottom position or on top of the page.

Size

The Size section allows you to control the overall dimensions of your Sticky Add-to-Cart button, ensuring it fits seamlessly into your page layout.

Width: Customize the width of the element. You can enter a specific value (in px) in the box, or choose from available options:

• Fit content (Auto): The button will automatically adjust to match the size of its content (text + icon).
• Full (100%): The button will expand to fill the full width of its container, making it more prominent on the page.

Padding: Padding defines the internal spacing between the button’s content (text, icon, price) and its borders.

Background

Set a solid or gradient color background for your sticky add-to-cart. You can adjust the color by:

• Enter the color code
• Drag or select from the color swatches
• Use the color picker to select any color on your current page
• Choose one from the Recent colors  or Suggested for you lists

If you prefer an image background, upload a new image or choose from your gallery to set it as the element’s background.

Shape

• Border: You can change the border color, thickness, and stroke.
• Corner: The section corner can be square, round, or pill-shaped. Also, you can enter an exact radius to customize the element’s corner your way.
• Shadow: Add a shadow and adjust its display (size, color, blur, and distance).

Display option

Set the condition to define when your sticky add-to-cart will display on your page. You can choose two options as below:

• Always show: The Sticky Add-to-Cart button will remain visible at all times as the customer scrolls through the page. This ensures quick access to the cart, reducing friction during the shopping journey.
• After first cart button: This element will only appear after the first standard Add-to-Cart button comes into view. This option helps avoid redundancy at the top of the page and makes the sticky button feel more contextual.

Configure the Advanced Tab

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

FAQs

1. Is the Sticky Add-to-Cart responsive on mobile?

Yes. The default Sticky Add-to-Cart is fully responsive. On mobile, it displays in a simplified format (usually just the button) to save space and ensure a clean layout.

2. Why doesn’t my Sticky Add-to-Cart show up on the live page?

A common cause is that the Display option is set to “After first cart button” while your page doesn’t contain any Add to Cart button above the fold. In that case, the sticky bar won’t ever appear.

How to fix:

• Change the Display option to “Always show“.

or

• Add an Add to Cart button to your page if you prefer the “After first cart button” display option.

3. Can I use an image background for the Sticky Add-to-Cart?

Yes. In the Background section, you can either set a solid/gradient color or upload an image to use as the button’s background.

4. How can I change the shape of the Sticky Add-to-Cart?

In the Shape settings, you can customize the border, corner radius (square, round, or pill-shaped), and shadow.