Set up an option set

An option set is the form your customer fills in on the product page. Every option in it can connect to a layer in a design template, so what the customer types or picks renders into the design in real time. This guide walks through the full setup — from creating the set to seeing it live on a product.

​

1. Create the option set

From the sidebar open Option Sets, then click Create: The create dialog gives you two starting points:

• Start from scratch — an empty set; you add every option by hand.
• Select a design template — Customei scans the template’s layers and seeds a matching option for each personalizable one: text layers become text inputs, image slots become uploads, and so on. The seeding runs in the background — a Generating fields from template… toast shows until the options appear.

A set created from a template is auto-synced: a banner in the editor reminds you that layer adds, renames, deletes, and library changes in the template flow into the option set automatically. Options you edit by hand are detached from sync and get a “Detached from sync” badge.

​

2. Find your way around the editor

1. Options list — every option in the set, in the order customers will see them. Drag to reorder; the toolbar above has search, filtering, and a + shortcut for adding options.
2. Edit panel — the selected option’s settings: its type, label, type-specific controls, Template connections, and Conditions.
3. Live preview — the form exactly as the storefront widget renders it, against the linked template. Toggle Mockup / Design to preview on the product photo or the flat design.

The header carries the set-level actions: Add Option, Settings (rename, unlink the template), Translate, Edit layout, Import, and Publish. Next to the set name a badge shows its storefront status — Draft or Live.

​

3. Add an option and pick its type

Click + Add Option in the header. A new option appears in the list — then choose what kind of input it is from the Type of option dropdown:

​

4. Configure the option

Select an option to open its settings. Give it a customer-facing Option label, decide whether it’s Required, and use Hide option to keep it out of the storefront form without deleting it. Each type brings its own controls — a text input has placeholder, initial value, max length, and a textarea toggle; an upload has file-type limits; a swatch has its value list. Options generated from a template carry a Synced from badge: their settings follow the template layer until you either edit them (which detaches just that field) or tick Detach yourself.

​

Connect it to the template

Template connections is what makes an option actually drive the design. Each connection maps the option to one layer property — a text option to a text layer’s content, a swatch to an image slot or a fill color: Use + Add another connection to drive several layers from one option — a single “Name” field can fill the front and the back of a product at once. If two layers share a name, Customei flags the conflict (“2 layers share this number — pick one”) and offers Pick layer to resolve it.

​

Values — what the customer can pick

Selection types (swatches, dropdowns, radio buttons) carry a value list:

• Drag rows to reorder — customers see values in exactly this order.
• Each value can carry an Add-on price — the extra charge applied when the customer picks it.
• Default sets which value is pre-selected; Bulk add pastes many values at once.

​

Conditions — show and hide options

Scroll to Conditions and click Setup condition to control visibility with rules like show this option only when Style is Custom text: Reveal advanced options only when the choice that needs them is made — shorter forms convert better.

​

5. Save — then publish

Editing never goes live by itself. As soon as you change anything, a save bar appears: Save writes your changes as a draft. To push them to customers, open the Publish popover: Publishing builds the bundle — the published snapshot the storefront widget reads from the CDN — and flips the set’s badge to Live. After later edits the popover offers Republish to push the current version again. Until a publish completes, product pages keep serving the previous bundle, so live customers never see a half-finished edit.

​

6. Assign it to products

An option set does nothing until a product points at it. Assign product (in the Publish popover) opens the assignment canvas: Click + Connect Product and pick the Shopify product(s) that should use this form. Each connected product can also Link Design Template — that’s the template the customer’s choices render into for this product. One option set can serve many products. If the widget doesn’t appear on the product page after assigning and publishing, the theme app extension probably isn’t enabled yet — follow Publish to your storefront.

​

Next steps