The configurator renders on your storefront through Shopify's theme editor — no code changes to your theme files.
The product page block
- On the app's Home screen, find the setup step "Add the configurator to your theme" and click Open theme editor. Shopify's theme editor opens with the Custom Product Options block (listed under Pretty Product Options) already selected on your product template.
- Drag it where you want it (usually where the variant picker and Add to cart normally sit).
- Click Save in the theme editor.
The block replaces the standard Add to cart flow on connected products only — products without a connection to the app are completely untouched.
Two features — the cart buttons and the swatches on your product cards — ride on the app embed rather than the block. Turn it on once:
Popup mode
Prefer to keep your product page compact? The app embed supports a popup style: shoppers see a "Configure" button, and the configurator opens in an overlay. Look for the display style setting on the embed.
Preview defaults
On the Products page, each connected product has a Preview defaults button: the size and selections the configurator starts from when a shopper first opens it. Anything the shopper picks overrides them.
Storefront theme bindings
The configurator has to find parts of your theme it did not build: the price to update, the Add to cart button to disable, the variant field to read. It guesses using the names the common themes use — and on a theme that names something differently the guess misses silently. Nothing errors; the feature just does not happen.
The usual sign is a product price that never changes while the configurator prices correctly beside it.
Settings → Storefront theme bindings is where you correct that. Seven selectors, each with its built-in default visible and a Use default tickbox:
| Binding | What we do with it |
|---|---|
| Current price | Overwrite with the configured total once every required question is answered |
| Compare-at price | Hide it while a configured total is showing — it describes the plain variant, so a struck-through figure beside a configured price is a saving that does not exist |
| Product form | Intercept its submit, so a configured line is added instead of the bare variant |
| Add to cart button | Disable it while required questions are unanswered; hide it when your own button replaces it |
| Buy now button | Hidden whenever the configurator is priced — it posts straight past the cart and cannot carry a configured price |
| Variant field | Read which variant is being configured, and re-price when the shopper switches |
| Quantity box | Read it so price formulas can use qty, and re-price when it changes |
Leaving one ticked stores nothing. That matters: it keeps following the built-in default, so when we improve a guess it reaches you. Untick only what you actually need to change.
Finding a selector
Right-click the element on your product page, choose Inspect, and read the class off the highlighted tag. Several can be separated by commas and the first one containing a price is used.
Moving from another options app? Paste its selector list straight in.
:visible is understood even though it is not real CSS — themes often render
the price twice, once for desktop and once for a mobile drawer, and :visible
is what tells them apart.
Switching or updating your theme
The block travels with your theme settings. If you install a new theme, add the block to it before publishing (the same Open theme editor button works — or add the Custom Product Options block manually in the theme editor). Your templates, prices and design themes all live in the app, so nothing else needs to change.
Checking it worked
Open a connected product on your storefront:
- You should see your sections and options instead of the standard variant picker.
- The price should update as you change options.
- Adding to cart should show the configured details on the cart line.
If any of those don't happen, see Troubleshooting. It is almost always the block not being placed or saved — and if everything works except the product page price, it is the Current price binding above.
Stopping the page jump
The block starts empty and fills in once the options load, so everything below it — description, reviews, related products — moves down the moment they appear. On a long option set that is over a thousand pixels of movement, and Google scores it: it is most of a bad Cumulative Layout Shift.
Fix it with Reserve space while loading. It is on both places the configurator can come from: the Product options app block, and the Cart & collection setup app embed if that is what places yours. Put in the height your configurator renders at and the space is held before the options arrive, so nothing moves when they do.
The option set page tells you the number — under the preview it says "Renders about 1,480px tall here". Check it against your own product page, since a narrower column makes a taller configurator, and round up rather than down: too much reserved space closes up the instant the options land, while too little still jumps.
You do not have to be exact, and you do not have to keep it in step forever. Once a shopper has loaded the page, their browser remembers the real height and uses that next time, per product and per screen size — so the setting is what first-time visitors get, and returning ones self-correct.
Leave it blank and nothing breaks; you simply keep the jump for first-time visitors.