The product button
The button that opens the configurator lives on the product page, so it needs to look like the rest of your shop’s buttons. You configure it in the theme editor, not inside the app.
Where to configure it
Section titled “Where to configure it”- In your Shopify admin, go to Online Store → Themes → Customize.
- Open a product page.
- Click the Optical Form block.
Everything you see there applies to that block only, and affects every product using that product template.
The button inherits nothing
Section titled “The button inherits nothing”This one matters, and it runs against what you’d expect: the button takes its colours from nowhere. Not from your theme, not from the form’s Design tab.
That is deliberate. Shopify themes each define their buttons differently, and there is no reliable way to guess. Rather than get it half right, the app lets you decide all of it.
Out of the box it is a very dark grey button with white text — neutral enough to sit quietly in almost any shop until you adjust it.
Content
Section titled “Content”- Button text — what it says. Leave it empty and the app’s translated text is used, which adapts to each customer’s language on its own. Type something here and that exact text shows in every language.
- Icon (optional) — an image from your Files library. A square PNG with a transparent background, around 128×128, works best. Leave it empty for a text-only button.
- Icon position — before or after the text. Only shows when there’s an icon.
- Space between icon and text — 0 to 32 px. Ignored when the content alignment pushes the pieces apart.
Colours
Section titled “Colours”Six colours: background, text and border, each with its own on hover version.
The border only shows if you also give it a width greater than zero, further down. If you leave the border colour empty, no border shows even with a width.
Shape & typography
Section titled “Shape & typography”These are shared between desktop and mobile, because they rarely need to differ:
- Corner radius — from 0 (square) to 60 (pill).
- Border width — 0 means no border.
- Font weight, letter spacing and text case.
Desktop and mobile, separately
Section titled “Desktop and mobile, separately”What genuinely changes between screens has its own set:
| Setting | What it does |
|---|---|
| Shrink to fit the text | The button takes only as much width as its text needs, instead of a fixed width. Usual on desktop |
| Width | Percentage of the space available. On mobile, almost always 100% |
| Vertical and horizontal padding | The air between the text and the button’s edge. This is what gives it its size |
| Font size | |
| Content alignment | Where the icon and the text sit inside the button: centered, left, right, or pushed apart |
| Icon size | 10 to 48 px. Only shows when there’s an icon |
The mobile set applies on screens narrower than 750 pixels, Shopify’s standard cut-off.
Where the button sits relative to your theme’s
Section titled “Where the button sits relative to your theme’s”By default the button shows wherever you put the block in the editor: above or below your theme’s “Buy buttons” block, on its own line. If you want it next to “Add to cart”, use the block’s Position setting under Theme integration & placement:
- Where the block is placed: as before.
- Above the theme’s add to cart / Below the theme’s add to cart: right above or right below the line your theme’s button sits on. “Below” lands between that button and the accelerated checkout buttons (Shop Pay, PayPal).
- Side by side, left / right: both buttons on the same line, half and half, same height. Gap is the space to the theme’s button, in any position, and Stack on mobile puts them one under the other at full width on narrow screens, because half a width on a phone breaks the label.
Nothing to change in the theme: the app finds the “Add to cart” button on its own in the themes we have tested. If it can’t find yours, the button stays where the block is, and you can point it at your button with a CSS selector under Add to cart selector, or write to us. Side by side, the button takes its half’s width; colours, text, icon and typography stay the block’s own.
Advanced settings
Section titled “Advanced settings”The Variant input selector field is for developers and is almost never needed: only for unusual themes where the app can’t detect which variant the customer picked. Leave it empty unless support tells you otherwise.
When the frame is sold out
Section titled “When the frame is sold out”The button follows the variant like your theme’s own buy button. If the variant the customer has selected cannot be sold, the button shows disabled with the text “Sold out”; switch to a colour with stock and it comes back without a reload. In the same block, under Advanced settings, the When the frame is sold out setting lets you choose between that disabled button and hiding it altogether. The word “Sold out” is edited under Design › Texts of each form.
Even if a customer managed to open the configurator on a sold-out frame, “Add” would not send it to the cart: it would say “The frame X is sold out. Please choose another frame”.
Where is all the other wording?
Section titled “Where is all the other wording?”- The app’s admin language: under Settings inside the app. See Languages & wording.
- The form wording your customer reads: inside each step, in the form editor.
- The configurator’s colours (the panel that slides open): in each form’s Design tab. See Design & cart.