Design your sticky cart
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 also check out this video tutorial: