Why a sticky cart button helps
On long pages, especially on phones, the cart icon in the header scrolls out of view. Shoppers who've added a few items then have to scroll all the way back up to check out. A floating cart button stays in a corner of the screen, shows how many items are in the cart and opens the drawer in one tap.
- Long collection pages where shoppers scroll a lot.
- Product pages with long descriptions or many reviews.
- Mobile shoppers, who scroll more and have a smaller header.
It also helps shoppers who add items from collection pages or quick-add buttons. They can keep browsing, and when they're ready the button is right there with an up-to-date count.
The Sticky cart doesn't replace your theme's header cart icon. Both open the same Nexora drawer.
Your options on Shopify
Some Shopify themes offer a sticky header, which keeps the whole header, including the cart icon, at the top of the screen as shoppers scroll. In many themes this is a header setting in the theme editor. That's a good option if you like the look. A floating cart button is different: it's a small, separate button in a corner, and it doesn't take up the full width of the screen.
| Option | Takes up space | Shows item count |
|---|---|---|
| Theme sticky header | Full header height | Yes, via the header cart icon |
| Nexora Sticky cart | One small button | Yes, with a styled count badge |
Step by step: set up the Sticky cart
- Check the app embed
The Sticky cart is part of the drawer, so the Nexora Cart Drawer app embed must be on in your theme.
- Open Sticky cart
Click Sticky cart in the app menu and turn it on with the switch next to the page title.
- Pick an icon
Choose one of the nine Cart icon options, then set Icon size and Icon color.
- Choose devices and shape
Set Show on device to All devices, Desktop only or Mobile only, and Shape to Default or Round.
- Place it
Pick a Position (Top left, Top right, Bottom left or Bottom right) and fine-tune with X axis and Y axis. Use the desktop and mobile buttons above the preview to set each separately.
- Style and save
Set Size, Background color, Border, Shadow and the Quantity icon badge, then click Save.
Settings reference
| Setting | What it does |
|---|---|
| Cart icon | One of nine icons, with Icon size and Icon color. |
| Show on device | All devices, Desktop only or Mobile only. |
| Shape | Default or Round. |
| Position | A corner, with X axis and Y axis offsets. |
| Size / Background color | The button's size and colour. |
| Border / Shadow | Thickness, opacity, radius and colour; shadow offsets, blur and colour. |
| Quantity icon | Font size, size scale, Quantity background, Quantity color and badge position. |
Size, position and offsets can be different on desktop and mobile, so a button can sit lower and be slightly larger on phones.
How the button behaves on your store
| Situation | What shoppers see |
|---|---|
| Cart is empty | The button without a count badge |
| 2 of one product and 1 of another in the cart | The badge shows 3; it counts items, not products |
| Screen 768 px wide or less | Your mobile size, position and offsets |
| Screen wider than 768 px | Your desktop settings |
| Show on device set to Mobile only | No button on screens wider than 768 px |
X axis is the distance from the left or right edge of the screen, and Y axis the distance from the top or bottom edge, depending on the corner you pick. Many tablets held upright are 768 px wide or less, so they use the mobile settings.
The count updates as soon as the cart changes, whether a shopper adds a product from a product page or changes a quantity in the drawer.
Example: mobile-only button for a fashion store
- Show on device: Mobile only, because the desktop header stays visible enough.
- Shape: Round, Background color matching the store's black buttons, white Icon color.
- Position: Bottom right, with a Y axis offset so it clears the theme's chat or back-to-top button.
- Quantity icon: Quantity background in the brand's accent colour so the count stands out.
Choosing a corner
| Position | Works well when |
|---|---|
| Bottom right | Nothing else sits there; easy to reach with the right thumb. |
| Bottom left | A chat widget or back-to-top button already uses the bottom right. |
| Top right | Your header is short and you want the button near where the cart icon usually is. |
| Top left | Rarely needed; it can clash with menus and logos. |
After a couple of weeks, look at Cart Opens and Unique Cart Opens on the Analytics page to see how often shoppers open the drawer.
Second example: separate desktop and mobile values
A homeware store has a chat button in the bottom right on desktop and a cookie bar along the bottom on phones.
| Setting | Desktop | Mobile |
|---|---|---|
| Position | Bottom left | Bottom right |
| Size | 64 px | 52 px |
| Icon size | 28 px | 24 px |
| X axis | 32 px | 16 px |
| Y axis | 32 px | 80 px, to sit above the cookie bar |
Shape, Cart icon and the colours are shared by desktop and mobile, so choose them once.
Tips and common mistakes
- Button hidden on the store: make sure the Sticky cart is switched on and saved, and that the app embed is on in your live theme.
- Overlapping other buttons: chat widgets often sit bottom right. Move the cart to another corner or adjust the Y axis offset.
- Too large on phones: set a smaller mobile Size; thumbs need a target, not a billboard.
- Low contrast: pick a Background color that stands out from your page background.
- Turning the drawer off: switching off the app embed hides both the drawer and the Sticky cart.
Matching the button to the drawer? See customizing the cart drawer design.
Frequently asked questions
Can I show the sticky cart only on mobile?
Yes. Set Show on device to Mobile only.
Does it show the number of items?
Yes. The Quantity icon badge shows the item count, and you can style its size, colours and position.
Can I use a different position on desktop and mobile?
Yes. Size, position and offsets can be set separately using the desktop and mobile buttons above the preview.
What happens when shoppers tap it?
It opens the Nexora cart drawer.
How many icons can I choose from?
Nine, with your own size and colour.
Why is the count badge missing?
It's hidden while the cart is empty and appears as soon as a product is added.
Which screen sizes count as mobile?
Screens up to 768 pixels wide use the mobile settings; wider screens use the desktop settings.
