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 Display Rules 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 Display Rules

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

Sticky on Mobile

  • Show on Mobile Devices - when enabled, the app will appear on mobile devices as well
  • When to show:
    • Always on Display
    • When user starts scrolling
    • When user scrolls past the Add to Cart button
  • Mobile Location
    • Bottom
    • Top
  • Style
    • Complete - Has all the necessary properties of the product appear in the app. If this is selected, you can disable specific product properties to hide them, such as:
      • Product Image and Title
      • Price
      • Variant Selector
      • Quantity Selector
      • Product Reviews Stars (if the product has reviews from the Vitals Product Reviews app)
      • Product Reviews Count (if the product has reviews from the Vitals Product Reviews app)
    • Minimal - Displays the Sticky Add to Cart app with the least amount of elements (all product properties above are disabled)

Sticky on Desktop

  • Show on Desktop Devices - when enabled, the app will appear on desktop devices
  • When to show:
    • Always on Display
    • When user starts scrolling
    • When user scrolls past the Add to Cart button
  • Desktop Location
    • Bottom
    • Top
  • Bar height
    • Small
    • Medium
    • Large
  • Bar Content Width - A slider that you can adjust to increase/decrease the app's overall width
  • Button Size
    • Small
    • Large
  • Show/Hide Product Image and Title
  • Show/Hide Price
  • Show/Hide Variant Selector
  • Show/Hide Quantity Selector
  • Show/Hide Product Reviews Stars - If the product has reviews from the Vitals Product Reviews app, enabling this option will show it inside the app as well.
  • Show/Hide Product Reviews Count - If the product has reviews from the Vitals Product Reviews app, enabling this option will show it inside the app as well.

Sticky on Homepage

  • Show on homepage - If you have a featured product section on your homepage, this product will be displayed in the Sticky Add to Cart bar.

💡 Note: For the Sticky Add to Cart app to function properly on the homepage, the page must include a featured product section that contains a correctly structured product form and an Add to Cart button.

General Settings

  • Background color
  • Text Color
  • Discounted Price Color
  • Selectors border (allows you to change the border colors of the Quantity and Variant selectors)
  • Add to Cart button style
    • Auto-detect - Copies the style of your product page's main Add to Cart button
    • Custom - Allows you to customize the background and text color of the app's Add to Cart button
  • Corner Radius
  • Overwrite Add to Cart text - If this is enabled, it will allow you to customize the text inside the app's Add to Cart button itself. If disabled, it will simply copy the text of your main Add to Cart button.
  • Show/Hide Button Shadow
  • Apply Animated Add to Cart style - If the Animated Add to Cart app is enabled, selecting this option will apply the same style effect to the Sticky Add to Cart button.

  • Stop page scroll - If this is enabled, it will stop the page from automatically scrolling to the product image when a different variant is selected using the Sticky Add to Cart bar.


Is this resource helpful? Thanks for the feedback There was a problem submitting your feedback. Please try again later.