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 bar that encourages customers to purchase. If you only need a sticky button, check out this article

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 & drop the Product Module if your page doesn't have one, and drop the Row inside it.

 


Step 3: Nest all the elements you need inside the Row. 


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!

 

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


Was this helpful?