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

1. In your Shopify admin, go to Online Store → Themes → Customize.
2. Open a product page.
3. 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

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.

The quick way to get it right

Don’t try to guess your theme’s colours. Go to a product page on your shop, right-click your Add to cart button and choose Inspect. The exact colour is right there. Copy it and paste it here.

If that sounds like gibberish, there is another way: take a screenshot of your theme’s button and use any colour picker (Shopify’s own colour selector has one) to read the shade.

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

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

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

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.

How to preview mobile

In the theme editor, top left, there are screen and mobile icons. Click the mobile one and you’ll see how it looks without leaving the editor.

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.

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.