Advanced Theme Support: Using Custom Selectors

The app works out of the box with most Shopify themes (including OS 2.0).  We recommend first checking whether discounts are displayed correctly on your pages before customizing selectors. For heavily customized themes, or those using third-party frameworks, you may still need to configure custom selectors.

How to Setup custom selectors

If your theme doesn’t display discounts correctly, disable Auto-detect and enter your own CSS selectors.

There are two groups:

Product Cards

Used for collection grids, featured sections, and related-product blocks.

• Card container selector: CSS path for the entire card wrapper.
• Card price selector: CSS path for the price inside each card.

Product Forms

Used for product pages, quick-view modals, and embedded product sections.

• Form container selector: Wrapper around the product form.
• Form price selector: Element displaying the price.
• Variant input selector: Input element that exposes the currently selected variant ID.

Each selector type has specific minimum requirements.

1. Product Card Selector

Purpose: Targets each product card container. The app uses this to determine product ids and where to place badges relative to the product.

Minimum requirements:

• Must contain a price container.
• Must include either:
  • A link to the product page, or
  • A data-product-id  attribute.

Example HTML Snippet with Link:

<div class="product-card">
  <a href="/products/example-product">
    <h2 class="product-title">Example Product</h2>
    <div class="product-card-price">$49.99</div>
  </a>
</div>

Example HTML Snippet with Product ID:

<div class="product-card" data-product-id="123456789">
  <h2 class="product-title">Example Product</h2>
  <div class="product-card-price">$49.99</div>
</div>

In both cases, .product-card        is the selector you would enter in the app.

2. Product Card Price Selector

Purpose: Targets the price container inside a product card (e.g., on collection pages, homepage, featured sections) where the discount badge will appear.

Minimum Requirement: Must contain the element displaying the price.

Example HTML Snippet:

<div class="product-card-price">
  $49.99
</div>

Here, .product-card-price        is the selector you would enter in the app. The app will attach the discount badge next to this price.

3. Product Form Container Selector

Purpose: Targets the <form>       element wrapping the Add to Cart button and price.

Minimum requirement:

Must contain both the product price element (where app will inject discounts container) and the Add to Cart button.

Example HTML:

<form class="product-form">  
   <h2 class="product-title">Example Product</h2>
   <div class="product-price">$49.99</div>  
   <button type="submit" class="product-form__submit">Add to cart</button> </form>  

Here, .product-form        is the selector you would enter in the app.

4. Product Form Price Selector

Purpose: Targets the price element on the product page where discount info will appear next to the live product price.

Minimum requirement:

Must contain the element showing the current price.

Example HTML:

<div class="product-price">
  $49.99
</div>

Here, .product-price        is the selector you would enter in the app.

5. Variant Input Selector

Purpose: Specifies the input element that reflects the currently selected variant ID on the product form.

This is how the app knows which variant to apply discounts and updates for.

When customers change options (size, color, etc.), Shopify updates a hidden input (often <input name="id">      ) inside the product form.

⚠️ Important:

The selector must point to a real input element whose .value       always matches the active variant ID.

Minimum requirement

• The element must:
  • Be an <input>       or <select>       that emits change       or input       events.
  • Expose the selected variant ID through .value       or [data-variant-id]      .

Example: Standard Shopify form

<form class="product-form">  
   <input type="hidden" name="id" value="123456789">  
   <button type="submit" class="product-form__submit">Add to cart</button> </form>  

Here,input[name="id"]     is the selector you would enter in the app.

Example: Custom theme exposing variant ID

<input type="hidden" data-variant-id="123456789" id="currentVariantId"> 

Here,     #currentVariantId     is the selector you would enter in the app.