Sticky add to cart

Hello there! This feature allows you to display a sticky cart on your page for easy checkout. To get started, please activate the feature.

1. Content

Let's start by customizing the content displayed on the bar.

  • What to show: Choose the information to display on the bar.

  • Product image: Check this option to display the product image on the bar.

  • Product price: Check this option to display the product price on the bar.

  • Quantity selector: Check this option to display the number of products added on the bar.

  • Show variant option on Mobile: Check this option to display information on the bar when viewed on mobile.

  • Quantity text: Enter the label to display for the quantity input.

  • Add-to-cart success response: Enter the content to display on the bar when a product is successfully added to the cart.

2. Display

Next, let's customize how the bar is displayed.

  • Show on devices: Choose the devices on which to display the sticky bar. Options include Desktop and Mobile.

  • Position: Choose the position of the sticky bar. You can choose between Top and Bottom.

3. Style

Now, let's add some color to your bar.

  • Background color: Choose the display color for the bar's background.

  • Product name color: Choose the display color for the product name.

  • Price color: Choose the display color for the product price.

  • Special price color: Choose the display color for the special price.

  • Button text color: Choose the display color for the button text.

  • Button background color: Choose the display color for the button background.

  • Button border: Choose the border level for the button.

4. Advanced settings

For more control, check out these advanced settings.

  • Hide Sticky add to cart on out of stock products: Check this option to hide the bar on out of stock products.

  • Buy now button: Check this option to navigate the visitor to the cart page when they click add to cart.

  • Show on Home page: Check this option to display the Sticky bar on the store's home page.

  • Select product: Click Select to choose the product to display on the bar. You can only choose one product to display.

  • Apply “add-to-cart animation”: Check this option to apply an effect to the add-to-cart button when you have activated the “Add-to-cart Animation” feature.

  • Custom add-to-cart button: Check this option to customize the text for the Add to cart button.

  • Custom CSS: Enter CSS to customize the bar according to your preference.

You can monitor your customizations on the preview screen on the right.

And that's it! You've now successfully customized your sticky cart. Enjoy your enhanced shopping experience!

Last updated