How to create a Sticky Add to Cart with the Row element

This article will guide you through steps on how to create a sticky cart button that encourages customers to purchase. 

Design your sticky cart

Step 1: From the GemPages Dashboard, open your preferred template to edit. You can quickly find the Row element on the left sidebar of the Editor, under the Base section. 

 

Step 2: Drag and drop the Row into your preferred position. After that, nest a Product Module inside that row. Remove the unnecessary child elements of the Product module (keep the Product frame).

 

 

Don’t forget to turn on the Dynamic option for the Product Module. 

 

 

Step 3: Finalize the design of your sticky cart by nesting all the child elements you need inside the Product Module you just created. 


For the visitors to purchase, the sticky cart should include a (P) Cart Button or (P) Dynamic Checkout Button element. You can also use other child elements of the Product Module such as (P) Image, (P) Title, (P) Quantity, (P) Variants, etc. to design the sticky cart as you wish. 

 


To style how the Rows looks, please navigate to the Design tab and follow the instructions in this article

Set the sticky cart position

Step 1: Click on your designed Row. You will find its configuration options in the left sidebar.


Step 2: Go to the Position section under the Design tab. Next, select the option Sticky to the screen (Fixed) from the drop-down menu.

By default, the Z-index number is set as 99 to make sure your sticky cart is in front of the other elements. 

 


Step 3: Hit “More settings” to further customize the position of the sticky cart. 

You can choose to have the Row stick to the top or bottom by selecting the icon under Vertical Orientation. For the left and right, look under Horizontal Orientation.

 

 

To set the space between the sticky cart and the page border, enter your chosen value (in pixels) to the respective Offset fields.

Set the sticky cart to show or hide on scroll

Skip this step if you prefer the sticky cart to display on your pages at all times. To show or hide the sticky cart when customers scroll over a certain position on your page, you can check out this article for a detailed guide.

 

When everything is in place, hit “Save” then “Publish.” That’s it! You are all set with a sticky add to cart!

You can consider saving the Sticky cart section to your library for later use. Click here for a detailed guide.

You can also check out this video tutorial:

 

 

If you need any assistance taking these actions, please let us know directly via email & live chat to have them answered!


Was this helpful?