Custom cart selectors for Oxify drawer • Oxify Cart Drawer Cart Upsell

Theme Compatibility and Custom Selectors (Advanced)

When you need custom selectors

Most Shopify themes work without any extra setup. But some custom themes use unique buttons, special AJAX carts, or custom header icons. In those cases, the cart drawer may not open every time, or the cart count (badge) may look wrong.

Custom selectors tell Oxify exactly which parts of your theme are:

Add-to-cart buttons (when clicked, add the item and open the drawer)
Open-cart triggers (header cart icon, “View cart” link, mini-cart button, etc.)
Cart count bubbles (the badge number in the header or sticky cart button)

If your drawer opens sometimes (but not always), or only works on some pages, selectors are usually the fix.

What a selector is (simple explanation)

A selector is a short “label” that points to something in your theme, like a button or icon. It usually starts with:

. (a class) example: .product-form__submit
# (an ID) example: #cart-icon-bubble
an attribute selector example: [name="add"]

Small typos matter. One missing dot . or extra space can stop the selector from working.

Before you start

Open your storefront in a new tab.
Have your Oxify app admin open in another tab.
Make sure you can view your theme in preview mode while testing.

Set selectors in Oxify

In the Oxify app admin, go to Theme Compatibility (sometimes called Custom Selectors or similar in Advanced settings).

Look for fields like:

Add-to-cart selector
Open cart selector
Cart count / badge selector

On your storefront, right-click the element you want (button/icon/badge) and choose Inspect.

In the highlighted HTML, look for a stable class or ID. Good examples are:

#cart-icon-bubble
.header__icon--cart
.product-form__submit
button[name="add"]

Pick a selector that is likely to stay the same after theme updates. IDs and clear theme classes are usually best.

Paste your selector(s) into the matching fields.

If your theme has more than one add-to-cart button (example: product page + quick add on collection), add each selector on a new line (if your settings allow multiple).

.product-form__submit
.quick-add__submit
button[name="add"]

If your theme uses more than one cart icon (desktop vs mobile), you may need more than one open-cart selector too.

After saving, test these actions:

Click add-to-cart from a product page
Click add-to-cart from a collection page (quick add)
Click the header cart icon (open cart trigger)
Change quantities in the cart and confirm the badge count updates

Recommended selector setups

Set selectors for every place a customer can add items:

Product page main add-to-cart button
Quick add buttons on collection pages
Featured product sections on the home page

Examples you might see in themes:

button[name="add"]
.product-form__submit
.quick-add__submit
form[action^="/cart/add"] button[type="submit"]

Set this to whatever should open the drawer without adding a product:

Header cart icon
Sticky cart button (if your theme has one)
“Cart” link in the menu

Examples:

#cart-icon-bubble
a[href="/cart"]
.header__icon--cart

A selector like a[href="/cart"] may match multiple links (footer + header). If that causes weird behavior, use a more specific selector (header only).

This is the number bubble that shows item count. It may appear in more than one place (desktop header, mobile header, sticky cart).

Examples:

#cart-icon-bubble .cart-count-bubble
.header__icon--cart .cart-count-bubble
.cart-badge

If your badge count looks “stuck,” add selectors for every badge location (desktop and mobile).

Troubleshooting (quick fixes)

Add the quick add button selector from your collection page.
Make sure you are selecting the actual <button> that submits add-to-cart (not a wrapper <div>).

Set the correct open-cart trigger selector for the header icon.
If your theme has both an icon and a link, target the icon/button element specifically.

Add the cart count bubble selector for every badge location (desktop + mobile).
Make sure the selector points to the badge element that contains the number (not the whole header icon).

Double-check dots and hashes: . for class, # for ID.
Make sure the selector matches an element that exists on the page you are testing.
Remove overly broad selectors that match many elements (like all buttons).

Do not use selectors that match every button on the page (example: button). This can cause the drawer to open at the wrong times.

Best practices for reliable behavior

Be specific: Target the exact button/icon, not a large container around it.
Cover all locations: Add-to-cart can exist in multiple sections (product, collection, featured product).
Keep a short list: Use the fewest selectors needed for full coverage.
Re-check after theme updates: If a theme update changes button classes, you may need to update selectors.

This page is only about custom selectors. If your drawer is disabled or not activated in the theme, follow the install/activation and troubleshooting pages in this documentation plan.