Custom theme selectors

If a theme uses non-standard class names for cart-related elements, the cart drawer might not auto-detect them. Configure custom selectors to fix this. Oxify already recognizes many common theme selectors; the ones you add are used in addition to those.

Where to set them

1. In the Oxify app, open Home and click Manage Cart Drawer on the Cart Drawer card. The Cart Editor opens.
2. Click Settings in the left panel.
3. In the Cart Settings card, click Show Advance Settings.
4. Fill in the selector fields you need (below). Type a selector and end it with a comma to add it as a tag; do the same for more selectors. Remove one with the x on its tag.
5. Click Save.

Four selectors

Add to Cart Button Custom Query Selector

Example: form[action*="/cart/add"] button[type="submit"]

Tells Oxify which buttons trigger an add-to-cart on your theme.

Open Cart Custom Query Selector

Example: .header-cart-link, [data-cart-icon]

Tells Oxify which header elements should open the cart drawer when clicked.

Count Bubble Custom Query Selector

Example: .cart-count, [data-cart-count]

Tells Oxify which DOM element to update when the cart count changes.

Hide Theme Cart Custom Query Selector

Example: #custom-id, .custom-class

Tells Oxify which element is your theme's own cart, so it can be removed from the page and only the Oxify drawer shows. Oxify keeps checking, because some themes rebuild their cart.

How to find your theme's selectors

Right-click → Inspect on the relevant element in your storefront. Note the class names or data attributes. Use the most specific selector that uniquely identifies the element.

Test after every theme update

Theme updates can change class names. Re-test selectors after a major theme upgrade.