# 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.

![Sticky Cart Feature](https://lh7-us.googleusercontent.com/5sX3BEu-j4YmA0IkcLviSv7ekMDvD95Ka2cAPHS8JaU5_MrJjzBejihXMQnWGmdyBfPSeDYFEuzaWxWHgm4VzcQWnRbEJCX6LRXfuwB9pV1SBsFRR1D9NU-APi3og79InomtlSk3tTrnP9v3)

### 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.

![Content Customization](https://lh7-us.googleusercontent.com/G9e2Z97o9U92t2DP3peCIg5Sn8UeEEb4unPwugs1plb5ojpBkTnuf3Ly61pTc4JNhXBsrvtjeoHD8EFDnDgkBiYoJRL-9E2AMBPRdjy0Vu0R0YVQhm6EFJSpqp-2qgmz_1Adz2fPmjLdmn0v)

### 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.

![Display Customization](https://lh7-us.googleusercontent.com/7k1UQBQfTq0dviTCfUsFjVe2PgAxJjdhTvjt0a0icNHvKKdZi8cMwJZy9oNQyAYC1mL0LscauwBtmblpWpD1fo8Mw-C1iTeVI8I_pmaum46llI4ya6TPa9X2W4dDIuE1doYa1QM1sH1kvadq)

### 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.

![Style Customization](https://lh7-us.googleusercontent.com/cxn47EnSSAryC5KXFNOg1c6xvil_rBrYhn-ERsJ5oCeg3kre-vdws0p5L2zFSIeuu6LpB_h4hE9eKZ63Qh5mup7-MB-AVRUrUAfu63mfrMT4DbBBhFQybb13pSTts8Dsxkpv2le_YYPgru4l)

### 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.

![Advanced Settings](https://lh7-us.googleusercontent.com/VmXhbtmo8qemZ8kL5eyv-OK6YnyRNNKPxCBKwWh3_G7veXjENwTS6kGAz2UFqpwSHLG6G6nYdTIOQb2Qhe6FW4Kg197DMa1zSxvxaJjZKMAY6XFcZAZRymyE2lk9lu3Pa6xtq206KsYqLI6s)

* **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.

![Advanced Settings Continued](https://lh7-us.googleusercontent.com/TK9ckbR6p6sWMcjm4-3jSX1K8yBANdwB3XlrkT7jzEqyM7ps2H7THJsDAbqkYIWFkxwSV9jAtKAYsSiFXI3Xpf6KJGSZlmnET49Q5P5_KVfL_V7f-br-vILjdFnkQ8Ns9vH8LFeE99Ao3bge)

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

![Preview Screen](https://lh7-us.googleusercontent.com/k7mqTAY5Oc7dchJ1yejft4DtmVU5hYjPkcyw8VAQSWu4JHGYNOrYdlOgAlzh2KatyYYYchS7jAPtYcooJHDR0rn3xWkFSnPQSzXBn5X-Ok0s85qLvZaOcaihZnPTJdbtdUXPtoyXK_nWW0Hv)

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