Design your sticky cart
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!