> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.devit.software/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to set up the sticky cart button

# ${color}[#204a87](How to set up the sticky cart button)

${color}[#3465a4](**In this article:**)
* [What the sticky cart does](#1-what-the-sticky-cart-does)
* [Open the sticky cart editor](#1-open-the-sticky-cart-editor)
* [Choose the position and devices](#1-choose-the-position-and-devices)
* [Change the button style](#1-change-the-button-style)
* [Publish or hide the sticky cart](#1-publish-or-hide-the-sticky-cart)

The sticky cart is a floating cart button that stays in the corner of the screen while customers scroll. It shows how many items are in the cart and opens the ShopCart drawer in one click.

# ${color}[#204a87](What the sticky cart does)

The button stays in place while customers browse your store. The red circle shows the number of items in the cart. When a customer clicks the button, the ShopCart cart drawer opens.

![](https://storage.crisp.chat/users/helpdesk/website/-/3/2/7/1/3271b421d88bd400/storefront-sticky-button_1066nnj.png =540x330)


|| The sticky cart works together with the ShopCart cart drawer. If the **Cart Drawer** isn't published, the sticky button isn't shown either.

# ${color}[#204a87](Open the sticky cart editor)

1. Open **ShopCart** in your Shopify admin.
2. In the **Customize your cart** section, click **Edit** in the **Sticky Cart Editor** card.

The settings are on the left and a preview of your store with the button is on the right.

# ${color}[#204a87](Choose the position and devices)

1. On the **Settings** tab, open **Cart**.
2. In **Sticky cart position**, select where the button appears: top, middle or bottom of the screen, on the left or right side.
3. In **Device settings**, choose **Show on all devices**, **Desktop Only** or **Mobile Only**.
4. Click **Save** at the top of the editor.

![](https://storage.crisp.chat/users/helpdesk/website/-/3/2/7/1/3271b421d88bd400/sticky-cart-settings_jzarrh.png =800x421)


For example, choose **Mobile Only** if your theme already shows a cart icon that stays visible on desktop.

# ${color}[#204a87](Change the button style)

Open the **Styles** tab:

* **Button**: **Button color**, **Icon color**, **Border width** and **Border color**.
* **Amount Circle**: the colors of the circle with the number of items.

Check the result in the preview and click **Save**.

# ${color}[#204a87](Publish or hide the sticky cart)

The status next to **Sticky Cart** at the top of the editor shows whether the button is live. Click **Publish** to show the button on your store, or **Unpublish** to hide it. Your settings are kept when you unpublish.

# ✔️ Next step

Check our articles to learn more about the app's functionality:

* [Quick start in ShopCart](https://help.devit.software/en/article/quick-start-in-shopcart-1kc2m47/)
* [How to customize the cart drawer design](https://help.devit.software/en/article/how-to-customize-the-cart-drawer-design-17up6oa/)
* [Why isn't the cart drawer showing on my store?](https://help.devit.software/en/article/why-isnt-the-cart-drawer-showing-on-my-store-7dpsif/)