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

  • 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.
Is this resource helpful? Thanks for the feedback There was a problem submitting your feedback. Please try again later.