Storefront Theme Bindings

The Storefront Theme Bindings section connects the app to your theme’s HTML structure using CSS selectors. These selectors tell the app where to read and update information on the product page.

Product URL / domain

Paste a product URL from your webshop into the Product URL / domain field.

This allows the app to:

• Load your product page

• Detect theme-specific elements

• Use the selector picker tools

Always use a product page URL that represents your main product layout.

Price selectors

Price selectors define where the product price is displayed in your theme.

• Each selector must be placed on a new line

• The app will use the first selector that matches

• Multiple selectors increase compatibility with different layouts

Example:

span.price-item.price-item--sale.price-item--last

Use price selectors to ensure calculated prices are shown correctly on the storefront.

Product detail information selectors

These selectors are used to find the container element for price-related components.

They help the app understand where price elements live inside the page structure.

Example:

.product__info-container

Product form selectors

Product form selectors define which form is responsible for adding the product to the cart.

This is critical for:

• Submitting the correct variant

• Applying calculated prices

• Ensuring cart behavior works correctly

Each selector must be placed on a new line.The first matching selector is used.

Add to Cart (ATC) button selectors

These selectors define which button triggers the Add to Cart action.

Examples include:

• Standard submit buttons

• Theme-specific Add to Cart buttons

• Payment buttons

Correct ATC selectors are required for the calculator to function properly.

Variant selector elements

Variant selector elements are used to detect variant changes.

These can include:

• Radio buttons

• Dropdowns

• Custom variant components

The app listens to these elements to:

• Detect variant changes

• Update calculators dynamically

• Recalculate prices when variants switch

For unusual custom components, you can target their inner inputs directly, e.g. variant-radios-detail input[type='radio'].

Product image selectors

Product image selectors point at the product media area on the product page. They are used by the optional Customizer to mount the live preview over the product image, and to swap the displayed image when the customer changes their selection.

• Each selector on a new line.

• The first selector that matches is used.

• Use the Pick product image on storefront button to fill this field automatically.

Only required if you use the Customizer add-on or want the product image to react to calculator selections.

Cart line item image selectors

Cart line item image selectors target the thumbnail image of each line in the cart and cart drawer. They are used to replace the standard product image with the personalized image stored on the line item property __ooCustomImageUrl (set by the Customizer).

• One CSS selector per line, usually targeting an <img> element.

• Selectors are tried in order; all matching images are mapped to cart lines in order.

• Add your theme’s cart drawer selectors here if the default list misses them.

Only relevant if you use the Customizer to generate per-order images.

Price settings

Show currency with prices

When enabled:

• Prices are displayed with the currency symbol (e.g. $350.00)

When disabled:

• Only the raw numeric value is shown

Disable this if your theme handles currency formatting separately.

Enable server-side price validation (safety feature)

Global safety toggle. When enabled, the cart bundle function and draft-order checkout verify the calculator price server-side before accepting the line. When disabled, __ooCustomPrice is trusted as-is. See the dedicated article Server-side price validation (safety feature) for the full explanation.

💡 Tip:Always test price updates after changing selectors. After switching themes, re-run the selector picker so the bindings reflect the new theme markup.