Skip to main content
An option on its own only collects an answer. A connection is what tells Customei to do something with that answer: write it onto a layer, swap a picture, change a colour. Read every connection as the same short sentence:
This option  ·  does this  ·  to this layer
Options where the customer picks from a list need one more step, because each choice needs its own picture or colour:
This choice  ·  uses this picture
Everything on this page is one of those two sentences.

​
Step 1. Check which design template you’re working against

An option set can only connect to layers in the design template it uses. That template is named at the top of the preview panel, on the right of the editor.
The option set editor with the preview panel header highlighted, showing the word Template followed by the template name and three icon buttons.

The preview panel header names the design template this option set uses.

The three buttons beside the name are: If your option set was created from a template, the right one is already in place and you can go to step 2.
The Select a design template dialog showing a searchable grid of design template cards with their sizes and last-updated dates.

The template picker. Search by name, then click a card to use it.

Changing the template repoints the whole option set at different artwork. Connections that named a layer number in the old design will now point at whatever carries that number in the new one, so check every option afterwards.
With no template attached, the layer box has nothing to offer and says Connect a design template to see layers. If it says Loading template layers, give it a few seconds.

​
Step 2. Find the layer number

Open your design template and look at the Layers panel. Every layer has a number.
The Layers panel of a design template, with the row for layer #14 Kid's Name highlighted.

Layer #14 is the text layer named Kid's Name. That number is what you connect to.

You don’t have to memorise it. Once a template is attached, the layer box lists your layers by name, and the number is shown beside each one.

​
Step 3. Add the connection

Select an option and scroll to Template connections. A brand new option has nothing wired up yet.
The Template connections card showing the Connect to template empty state, with the line Define what changes on your design when customers select this option and an Add connection button.

Nothing connected yet. Add connection starts the first one.

Click Add connection and you get one row with two boxes.
The Template connections card highlighted, showing a Text connection pointing at Kid's Name, layer #14.

Enter Year writes the customer's text onto layer #14.

  • The left box is what happens: Text, Dynamic image, Text colour, and so on.
  • The right box is which layer it happens to. Start typing a name or number and pick from the list.
Reading that card out loud: the option Enter Year puts its Text onto layer #14, which is called Kid’s Name. When a shopper types 2026, the words on that layer become 2026. A few things to know about the row:
  • The small #14 at the end of the layer box confirms which layer you landed on. Hover it to see the layer’s name.
  • The bin button removes the row. Add more rows with Add another connection, for example a colour swatch that recolours both the wording and the border.
  • With two or more rows, a drag handle appears so you can put them in a sensible order.
  • The ? beside the action plays a short animation of what that action does to a design. It’s the quickest way to choose between two that sound similar.
You have to pick a layer from the list rather than typing a number of your own. If your typing isn’t accepted, the layer you named doesn’t exist in the attached template, or it isn’t a layer this action can change.

​
Only the layers that make sense are offered

Customei filters the layer box down to layers the action can actually change, so you can’t point Text at a photo by accident.
An action with no matching layer in your template shows an empty list. That isn’t a bug: add the layer to the design first, then come back.

​
What each action changes

The connection type dropdown for a text option, listing Text, Dynamic image, QR Code, Crossword, Word Search and Word Cloud.

The action list for a text option. Only the actions that make sense for typing are offered.

​
Which option type offers which

Map and Spotify Player get their one connection created automatically, with no bin button and no Add another connection. All you do is point it at the layer.

​
Step 4. Give each choice its own picture

This is the step most people miss. On an option where the customer picks from a list, the connection says what changes and where. It doesn’t say which picture belongs to which choice. That’s set per choice.
The Template connections card for a swatch option, highlighted, showing a Dynamic image connection pointing at Choose Skin For 1st Woman, layer #3.

A swatch option connected to Dynamic image on layer #3.

Scroll up to the values table and look under each row’s text box. Every connection adds one small square button per row.
The Swatch values table with the column of small connection squares under the four value rows highlighted, each square showing a picture thumbnail, and the Template connections card below showing Dynamic image pointing at layer #3.

One small square per connection, on every choice. These four already have their picture.

Click one to open the picker. Search the list, or type a value in the box above or choose.
The connection picker popover opened from a value row, headed Dynamic image #3, with a typed value box, an or choose divider, a search field, and four pictures from the library each showing its id, the first one ticked.

Picking the picture that belongs to this choice. The tick marks the one in use.

What the list holds depends on the action: Two messages you may meet instead of a list:
  • No layer linked to this function. Select a target layer first. Finish the connection row before setting the choices.
  • No options configured. Add a library or manual options in the template editor. The layer has no folder of images or fonts behind it yet. Link one in the template, then come back.
Picking a picture here also fills in that choice’s swatch thumbnail, if it didn’t have one. One click sets both what the shopper sees and what the design uses.

​
Fill the whole grid in one pass

Setting a dozen choices one square at a time gets old fast. Wizard, at the top right of the Template connections card, opens every choice and every connection as a single grid.
The Value connections wizard modal, with four value rows, a Dynamic image #3 column holding a picture for each row, a 4 of 4 counter with a green bar, and a Done button.

The Value connections wizard. One row per choice, one column per connection, and a counter that says how far you've got.

  • Each column is one of your connections, labelled with the action and the layer, such as Dynamic image #3.
  • Press Tab to move from cell to cell.
  • The counters at the bottom show how many choices you’ve filled per column, and turn green when a column is complete.
  • Done closes the grid. Nothing is saved until you use the save bar at the top of the page.
The Wizard link only appears once the option has at least one connection and at least one choice.
Quick add, above the values table, goes the other way round: it creates a choice for every picture in the linked folder and fills the connection for each. Fastest way to turn a folder of 20 pictures into 20 choices.

​
Uploads, whole-design swaps, and showing or hiding groups

Four connections behave a little differently.
1

Customer upload

Use Image upload for a photo that goes onto the design, then connect it to the photo box on your artwork. If the option accepts several photos, a Quick add button offers to create one connection per photo box, so you don’t add them one at a time.
2

Switch design template

Set on a list option, this changes the entire design when a choice is picked, so you pick a template per choice instead of a layer. Good for one product sold as portrait or landscape.
3

Group visibility

Shows or hides a whole group of layers. Pick the group per choice. Good for a design where one choice adds a wreath and another adds a ribbon.
4

Add product

Adds another Shopify product to the cart when a choice is picked, for example gift wrapping. It adds a Products column to the values table where you choose the product.

​
When two layers share the same number

Layer numbers can repeat inside one template, which happens a lot in designs copied from elsewhere. Customei doesn’t stop and ask. It picks the first layer of the right kind and pins the connection to it, then shows a small green link beside the number. Click that link to see every layer sharing the number, with its kind, and choose a different one. Do that whenever the preview updates the wrong part of the design.

​
Let the design template update your options for you

Connections point from an option to a layer. There’s also a link running the other way: a design template can keep this option set’s options up to date on its own. Click Settings in the header to see it.
The Option set settings dialog showing the set name and a Linked design templates section listing one template with the note Layers and library bindings drive fields here, and an Unlink action.

Settings shows which design template feeds this option set, and lets you cut the link.

While a template is linked here, its layers drive the options in this set. Rename a layer, add a new one, or change the pictures a layer can use, and the matching options follow. Options that keep themselves up to date covers this in full.
Unlink keeps every option exactly as it is, but the design template stops feeding it. Future changes to the template no longer reach these options, and any live product using this option set is marked as out of date until you publish again.

​
When nothing changes in the preview

Work down this list. It’s almost always one of these.
1

The option has no connection

A Connect to template empty state means nothing is wired up. The option collects an answer and then throws it away.
2

The choices have no pictures

The connection is there, but the small squares under the values are still dashed. The shopper picks a choice and nothing has been said about what it should do.
3

The connection points at the wrong layer

Check the number against the Layers panel in your template. It’s easy to grab #4 when you meant #14.
4

Two layers share the same number

Click the green link beside the number and pick the layer you actually meant.
5

The layer is hidden

A layer switched off in the template won’t show your customer’s answer either. Look for the crossed-out eye beside it in the Layers panel.
6

You haven't saved

Changes only take effect once you hit Save on the save bar at the top.

​
Where to next

Preview your options

Answer your own questions and watch the design change.

Assign products and go live

Put the option set on a product page.

Create a design template

Add or rename the layers you want to connect to.

Options that keep themselves up to date

Let the template write and refresh your options.