Overview
Sticky Sections 1, 2 and 3 are pared down Product sections which are designed to be used as sticky "Add To Cart" bars. These sections can be found in the "Products" category of the page sections library:
It's a bar or panel that remains fixed (or "sticks") to the top or bottom of the screen as the user scrolls down the product page.
The purpose of the sticky add to cart bar is to provide easy access to the "Add to Cart" button or other relevant product actions, such as selecting options (like size or color) or viewing the product's price. By keeping these important actions visible at all times, it makes it more convenient for users to add items to their cart without having to scroll back up the page.
Sticky add to cart bars can help improve the user experience and increase conversion rates by reducing friction in the purchasing process and encouraging users to take action.
Setting up a Sticky Add To Cart Bar
Sticky Sections 1, 2 and 3 are all preconfigured to be used as sticky ATC bars. The difference between each one is which Product Elements are included by default.
For example "Sticky Section 1" is comprised of the Product section with the following product elements:
However, additional elements can be added, removed and/or rearranged as needed using the builder.
To add a product, click on the Product element and then on the "Add Product" button in the sidebar:
What makes these buy boxes "sticky" is the "Scroll Actions" setting Appears on > When the first Product Button is out of view in the Layout tab of the Section settings. This setting is used for Desktop, Tablet and Mobile edit modes by default.
The Position that the section will appear in (Top or Bottom) can also be set using the position setting:
📝This setting causes the buy box to be shown once the first Product Button on the page is out of view.
This also means that the section will be shown on page load, if a Product Button is not in view on page load. In this case, the section will be visible initially, will disappear once the first product button comes into view and reappear once the product button is scrolled past.