OxifyOxify
Customization

Custom theme selectors

Configure custom CSS selectors when your theme uses non-standard class names.

This article is a draft and may be incomplete or change before publishing.

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.

Three selectors

Add-to-cart button selector

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

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

Open-cart trigger selector

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

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

Cart count bubble selector

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

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

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.

On this page