Wire your Shopify price calculator to the theme with CSS selectors

The formula is fine. Width times height updates inside the calculator. The Dawn price in the header still shows the variant’s $89. Add to cart works, yet the cart line ignores `__ooCustomPrice`. That hunt is Shopify calculator theme bindings CSS selectors: not another option on the product, but the App settings map that tells the app which nodes in *your* theme hold price, form, and the button.

Shopify Help Adding variants still caps you at 3 options and 2048 variants. Made-to-measure centimetres do not live there. Options Price Calculator adds fields beside that grid. Bindings are how those fields talk to theme markup. They are not a promise that every theme works with zero setup.

Related: swap the product image from an option. That article is media. This one is the bindings page.

Themes do not expose a single “price” API

Dawn, a purchased theme, a bureau’s custom product section: different wrappers, sometimes a fake Add to cart that never submits the product form.

Usual detours:

One class copied from Inspect. Sale price lives in a sibling span next week. The app uses the first matching selector.

Calculator block dropped “near the price” in the theme editor. Placement of the form is not the price target. Bindings still need the selector list.

Sticky bar plus main price, only one selector. You update the hidden one. Shoppers trust the sticky number.

None of that names the form that actually posts the variant.

What Storefront Theme Bindings contains

Docs: Storefront Theme Bindings. CSS selectors connect the app to the product page HTML: where to read, where to write.

Paste a product URL / domain from the live shop. The app loads that page, detects theme bits, and unlocks the picker tools. Use a URL that matches the main product template, not a leftover SKU on another template.

Fields, each selector on its own line, first match wins unless noted:

| Field | Role | | --- | --- | | Price selectors | Theme price nodes. Extra lines help sale vs regular vs sticky. Docs example: `span.price-item.price-item--sale.price-item--last` | | Product detail information | Container around price UI, e.g. `.product__info-container` | | Product form | Which form adds the product; variant + calculated price + cart behaviour | | Add to Cart (ATC) | Submit, theme-specific button, or payment buttons the shopper actually clicks | | Variant selector elements | Radios, dropdowns, custom widgets; listen so the calculator recalculates. Odd markup: target the inner input, e.g. `variant-radios-detail input[type='radio']` | | Product image | Customizer live preview mount / image swap. Skip if you do not use that. Live preview is Premium. | | Cart line item image | Cart/drawer thumbnails for `__ooCustomImageUrl`. Customizer-only. |

Toggles on the same screen:

• Show currency with prices — on: `$350.00`; off: raw number if the theme already formats currency.

• Enable server-side price validation — cart bundle function and draft-order checkout verify the calculator amount. Off: trust `__ooCustomPrice`. Dedicated article for the safety switch.

Docs tip: test price updates after every selector edit. After a theme switch, re-run the picker so bindings match new markup.

Pick price, Pick add to cart, Pick product image

Selector picker: recommended, especially on custom themes.

Each button: new window, product page, you click the node, the app writes the selector into the right field.

You may still edit by hand, add fallbacks, or reset defaults. After you change themes, run all three pickers again.

App settings overview: first install, theme swap, heavily customised theme, or broken price/ATC. Most stock themes work; custom ones need selectors. Do not claim universal zero-config.

Listing (USD): Free, 20 uses. Starter $9.99. Premium $19.99 — conditional logic, font picker, live preview, price breakdown. $39.99 tier: conditional fields, draft order checkout, admin calculator tools. Built for Shopify, 5.0 from 28 reviews. Theme bindings are App-wide Settings, not a Premium-only field. Conditional pricing / live preview stay Premium.

Mistakes that look like “the app is broken”

Calculator custom CSS (`#calculator-form-container`) is a different article. Bindings target theme nodes outside that form.

A greedy price selector that hits a recommendation carousel. First match wins; keep the list tight, then one fallback.

Filling product image selectors “just in case” without the Customizer. Leave them empty until preview or image swap is in play.

Walkthrough: blinds shop, Dawn, then a custom template

Native variant: control side left/right. Calculator: width, height, fabric. Formula along the lines of `product_price + (width * height)`. Theme app extension on the product page. Shopify still: 3 options / 2048 variants. Millimetres stay in the calculator.

Dawn: Pick price fills a `price-item` span. ATC is the default button. Test order: header and cart follow.

The new custom template adds “Add to bag” and a sticky price. Old selectors match nothing. Formula still correct. Storefront shows the variant price.

Then:

1. Bindings page, real product URL on the live template.

2. Pick price on the sticky amount customers see.

3. Pick add to cart on Add to bag, not Shop Pay.

4. If left/right does not recalc, add the inner radio input selector.

5. Leave server-side validation on.

6. Change a dimension, confirm theme price and calculator, then the cart.

Optional second price line for the sale span under the sticky selector.

Get it live

Install from the Options Price Calculator listing. Embed the calculator. Open bindings. Paste the URL. Pick price and ATC. Place a real order. Duplicate the theme once and pick again — that is the regression the docs describe.

Wrap-up

Shopify calculator theme bindings CSS selectors are a product URL plus selector lists. The picker fills them. Theme swap means pick again. A perfect formula still paints the old price if the theme node is wrong.

Three options, 2048 variants belong to Shopify. Extra fields and live price belong to this app, hooked to your markup. Connect price and Add to cart before you add the next field.