Sticky add-to-cart bar setup for product pages • Oxify Cart Drawer Cart Upsell

Sticky Add-to-Cart Bar (Product Pages)

What the sticky add-to-cart bar does

The sticky add-to-cart bar is a fixed bar that stays visible on your product pages while shoppers scroll. It helps customers choose options and add to cart without scrolling back up.

This page focuses only on the sticky add-to-cart bar settings. For general testing and going live steps, use your plan’s “Preview, Publish, and Testing Checklist” page.

Open the Sticky Add to Cart Bar editor

In the app admin, open Sticky Add to Cart Bar (sometimes shown as Sticky Add-to-Cart Bar Editor).

Turn Enable ON for the sticky add-to-cart bar.

Click Save after each section so you don’t lose changes.

Visibility by device

Choose where the bar shows. This is one of the most important settings because mobile and desktop layouts are different.

In the sticky bar settings, open Visibility or Display rules.

Turn ON/OFF visibility for Desktop, Mobile, and (if shown) Tablet.

If you see a setting like Show after scrolling, choose when the bar appears (example: after the customer scrolls past the product form).

If your product page is already crowded on mobile, start with Mobile = ON and simplify the bar (hide extra details). Then add more items if you have space.

Choose what product info shows

You can show key product details inside the bar. Pick only what helps the shopper decide quickly.

Product image

Show image: Turn ON to show a small thumbnail.
Image size (if available): Use a small size so it doesn’t push the button off-screen.

Product title

Show title: Turn ON to display the product name.
Title length (if available): Use one line or truncate to avoid wrapping.

Price

Show price: Turn ON to show the current price.
Compare-at / sale price (if available): Turn ON if you want shoppers to see the discount in the bar.

Most stores get the best results when the bar shows Price and a strong Add to cart button. Add the image/title only if you have room.

Add variant and quantity selectors

If your products have options (like size or color), the sticky bar can include selectors so customers can pick the right variant without scrolling.

Variant selector (Size/Color)

Find Variant selector and switch it ON.

Pick the style your store uses (example: dropdown, buttons, or swatches).

If you have many options, a dropdown is usually cleaner than buttons.

If the sticky bar shows a variant selector, make sure it does not hide important options on mobile. If it feels tight, keep variants in the main product form and turn the sticky variant selector OFF.

Quantity selector

Enable Quantity to let shoppers increase/decrease quantity from the bar.

If you can set a minimum/maximum, match your store rules (example: max 5 per order).

For most stores, Quantity = ON works best on desktop. On mobile, consider turning it OFF if it makes the bar too tall.

Style the add-to-cart button

Your button should be easy to see and easy to tap.

Button text

Use clear text like Add to cart or Add.
If your products are often sold out, make sure the button state changes to Sold out (if your theme/app supports it).

Colors and contrast

Background color: Use your main brand color.
Text color: Make sure it’s easy to read.
Hover color (desktop): Use a slightly darker/lighter shade.

Shape and spacing

Border radius: Match your theme (square vs rounded).
Button height: Make it tall enough for thumbs on mobile.
Full-width button (if available): Great for mobile because it’s easier to tap.

Bar background (the container)

Background color: Often white or your theme background.
Border/shadow: A light shadow helps the bar stand out from the page.

Try to match your theme’s main product button style so the sticky bar feels “native” to your store.

Recommended setups (quick presets)

Devices: Mobile ON, Desktop optional
Show: Price ON, Title OFF (or ON), Image OFF
Variant selector: OFF (unless you have only 1 option)
Quantity: OFF
Button: Full width ON, high-contrast colors

Devices: Desktop ON
Show: Title ON, Price ON, Image optional
Variant selector: ON
Quantity: ON
Button: Match your theme’s main button

Common issues

Make sure Enable is ON in the Sticky Add-to-Cart Bar editor.
Check Visibility by device. If you are testing on mobile, Mobile must be ON.
If you have a setting like Show after scrolling, scroll down far enough to trigger it.

Turn ON the Variant selector in the sticky bar settings.
If your product has multiple options (Size + Color), try a dropdown style to save space.
If the selector is hard to use on mobile, turn it OFF and rely on the main product form instead.

Hide extra items: turn OFF Image and/or Title.
Turn OFF Quantity on mobile.
Use a shorter button label (example: Add).

Pick a higher-contrast text color (example: white text on a dark button).
Add a border or shadow to separate the button from the bar background.

What to check before you publish changes

On mobile, you can still see the product content and the bar does not block important buttons.
If variants are ON, you can select a variant and add to cart without errors.
The add-to-cart button is easy to tap and matches your store style.