Set Up The Sticky Add To Cart App
Having the Add to Cart button visible for your visitors at all times is very important, as no matter how far down the page they scroll, they will still be able to add the product they want to cart quickly. You will help reduce the risk of the visitor leaving without adding to the cart!
The Sticky Add to Cart app is good to go almost out of the box, but if you wish to set everything up, you can find all the information here:
Please keep in mind that the Sticky Add to Cart bar has the same functionality as the Add to Cart button from your product page. Regardless of the button from the page or the Sticky bar's one is clicked, the result will be the same.
Here's how to set up the Sticky Add to Cart.
The Sticky Add to Cart bar is very easy to set up. However, the first thing you should do to have it working is to make sure you make it visible via Desktop, Mobile, or both.
If you want to only show the Sticky Add to Cart on Desktop rather than Mobile, or vice versa, make sure that only one of the two desired options is ticked.
The next step is to decide whether to show the quantity selector or not and choose the app's placement, be it at the top of the page or the bottom.
You can also choose to display the star rating snippets from the Product Reviews app under the product's title in the Sticky Add to Cart bar.
Furthermore, you can decide to either copy the design of the Add to Cart button from your theme or customize it yourself.
💡 Looking to have this app appear only on specific product pages? You can use the Module Filters section of the app to specify the product pages where you would like this app to appear. For more information, you can refer here: Displaying apps only on specific products using Module Filters
Frequently Asked Questions [FAQs]
Can I change the Sticky Add to Cart app's behavior to make it go to checkout instead?
It is not possible at the moment. When the Sticky Add to cart app is clicked, the product will be added into the cart page or to the cart drawer (if supported).
Sticky Add to Cart App Settings List
Settings for Desktop
Show the Sticky Add to Cart bar on Desktop Devices checkbox
Enable this option if you would like the Sticky Add to Cart Bar to appear on Desktop
Desktop Location
Top
Bottom (default)
Show the Sticky Add to Cart bar
Always on Display
When User Starts Scrolling
When user scrolls past the Add to Cart button (default)
Show Quantity Selector on Desktop
Enable this option if you would like the Quantity selector to appear on the Sticky Add to Cart app for Desktop
Show the Variant Selector on Desktop
Enable this option if you would like the Variant Selector to appear on the Sticky Add to Cart app for Desktop
Sticky Bar Height
Small
Medium (default)
Big
Show Product Title on Desktop
Enable this option if you would like the Product title to appear on the Sticky Add to Cart app for Desktop
Button Size
Small
Large (default)
Settings for Mobile
Show the Sticky Add to Cart bar on Mobile Devices.
Enable this option if you would like the Sticky Add to Cart Bar to appear on Mobile
Mobile Location
Bottom (default)
Top
Show the Sticky Add to Cart bar
Always on Display
When User Starts Scrolling
When user scrolls past the Add to Cart button (default)
Show Quantity Selector on Mobile
Enable this option if you would like the Quantity selector to appear on the Sticky Add to Cart app for Mobile
Show the Variant Selector on Mobile
Enable this option if you would like the Variant Selector to appear on the Sticky Add to Cart app for Mobile
Product Reviews Integration
Show Product Reviews Stars - Show the stars from the Product Reviews module.
Look and Feel
Background color - can be changed via a color palette
Text Color - can be changed via a color palette
Styling of the sticky Add to Cart button
Automatic, copies the style of the ATC button (default)
- Show border shadow
Custom
Button Color
- Button Text Color
- Border Radius - This controls the color of the variant and quantity selectors.
- Selectors Border-color - This controls the color of the variant and quantity selectors.
- Apply "Animated Add to Cart" effect
- If the Animated add to cart app is enabled in Vitals, you can apply the same effect to the Sticky add to cart button by checking this option.