About the Sticky Cart
A sticky cart button on a webpage is a button that “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.
Add Sticky Cart to your page
In Editor V7, we’re introducing the sticky element, streamlining the process to create a sticky cart compared to Version 6.
To incorporate a sticky cart in Editor Version 7, please follow these steps:
Step 1: Within the GemPages Dashboard, select the page you wish to edit and enter the Editor.
Step 2: On the Editor’s left sidebar, under the Product section, locate the Sticky Cart element. Simply drag and drop this element onto your page. By default, the sticky cart will be positioned at the bottom of your page, but you can further customize its placement.
Step 3: Within the sticky section, click on the Product Module and select your desired product. If you wish for the product to dynamically update based on your product page, opt for the “Display by assigned product” option.
When you select the Sticky Cart element, you’ll discover all the configuration options conveniently located on the left sidebar. These options will be explained in more detail in the following sections of this article.
Configure the Settings tab
Display
You can decide how your sticky cart is displayed at this point. Hit the “Change” button, and you’ll be presented with two options:
- Always: The sticky cart will always remain on your page.
- After First Cart Button: As users scroll down and pass the the first cart button, the sticky cart will become visible. When scrolling back up and reaching the initial cart button again, the cart button will disappear.
Size
Full-width: By enabling this option, the sticky cart will expand to occupy the entire width, stretching from one edge to the other. Otherwise, you can decide the width of the sticky cart by inputting the preferred value into the box.
Background
In this section, you have the option to modify the background appearance by selecting a color from the provided palette or inserting a background image.
- Color: Choose a color from the color palette or input a hex color code in the box.
- Image: Click on “Browse gallery” to switch to picture mode.
Next, hit “Add Image” and upload the image from your device. Alternatively, if the image is already uploaded in your Shopify Admin > Content > Files, you can simply input the image’s URL into the “Image Source” field.
Position
Choose your preferred placement for your sticky cart – at the top or bottom of your page.
Configure the Advanced Tab
For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.
How to create a responsive sticky cart button
The default sticky cart is already responsive. However, the mobile version contains fewer elements to optimize space on the limited mobile screen. This is why you will find that the default sticky cart on mobile only includes a sticky button. If you wish to redesign the mobile version, please follow these steps:
Step 1: From the GemPages Dashboard, select the page you want to edit to enter the Editor. Drag and drop a Sticky Bar element from the left sidebar onto your page. Then, click on the Mobile icon at the top to switch to the mobile view.
Step 2: Inside the sticky section, click on the Row element. In the Advanced tab, disable the visibility of this Row for mobile devices. Afterward, insert another Row into the sticky section and choose your preferred layout.
Step 3: Go to the Advanced Tab of the Row and deactivate the Desktop and Tablet options, leaving only the Mobile version visible. Now, you can finalize the design of the mobile sticky cart.
By following the instructions above, you’ll have two distinct sticky carts: one for Desktop and Tablet, and another for mobile.
Step 4: Hit the Save button and check the result on the preview page.
