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

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.

💡 Tip:
Always test price updates after changing selectors.