Multi-Select Options

Multi-Select Options

Overview

Options that allow multiple selections—checkboxes, multi-file uploads, or multi-select swatches—can display multiple layers on the product image. Under Multi-select layout, set Mode to Slots — fill in selection order or Per value — each value has a fixed spot. Each mode has different use cases.

Slots Mode

How it works: You define a fixed number of "slots" (e.g., 4). When a customer selects items, each fills the next slot in order. If they have 4 slots and select 2 items, items 1 and 2 fill slots 1 and 2. Deselect item 1, and item 2 moves to slot 1.

When to use: Use slots when order matters but specific positions don't. Examples: photo galleries, ingredient collections, document uploads.

Configuration:

  1. Click the layer (must be tied to a multi-select option)
  2. Under Multi-select layout, set Mode to Slots — fill in selection order
  3. Set Slot count (e.g., 4)
  4. Each slot appears as a sub-layer labeled Layer 1.1, Layer 1.2, etc.
  5. Position each sub-layer where you want items to appear
  6. Under Allow customer to, enable Change image position (drag), Change image size (corner handle), and/or Rotate image (top handle) for the layer

Storefront behavior: Customers can drag items between slots to reorder them. Empty slots are invisible.

Per-Value Mode

How it works: Each specific option value gets its own fixed position. If a customer selects "Red" and "Blue," each appears in its assigned spot. Deselect "Red," that spot becomes empty. Reselect "Red," it reappears in the same spot.

When to use: Use per-value when specific items must appear in specific places. Examples: pizza toppings always in the same locations, t-shirt print areas (left chest, back, sleeves), multi-photo frames with labeled spots.

Configuration:

  1. Click the layer (must be tied to a multi-select option)
  2. Under Multi-select layout, set Mode to Per value — each value has a fixed spot
  3. For each possible value, a sub-layer appears: Layer 1: Red, Layer 1: Blue, etc.
  4. Position each value's sub-layer where it should appear
  5. Under Allow customer to, enable Change image position (drag), Change image size (corner handle), and/or Rotate image (top handle) for the layer

Storefront behavior: Each selected value appears in its assigned spot. Customers can move and resize within that value's area.

Sub-Layer Numbering

Sub-layers use dot notation:

  • Layer 1.1 — Main layer 1, sub-layer 1 (first slot or first value)
  • Layer 1.2 — Main layer 1, sub-layer 2 (second slot or second value)
  • Layer 2: Cheese — Main layer 2, value "Cheese" (per-value mode)

Slot count

When Mode is Slots — fill in selection order, set Slot count (1–50). The default matches the option’s max selections. Slot count only controls how many images appear in personalization — extra selections beyond the count are not shown.

Arranging Sub-Layers

When you first create a multi-select layer, all sub-layers are positioned side-by-side in a row by default.

Click Arrange in a row to reset all sub-layers to this default arrangement. This is useful if you manually repositioned them and want to start over.

Reordering at the Storefront

In Slots mode, customers can drag items between slots on the storefront to reorder them. The preview updates immediately. Useful for custom photo orders or ingredient selection.

In Per-value mode, customers can't reorder—each value's spot is fixed.

Allow customer to

Under Allow customer to on the multi-select image layer, you can enable:

  • Change image position (drag)
  • Change image size (corner handle)
  • Rotate image (top handle)

These apply to the layer’s instances on the storefront (filled slots or selected values).

Empty Slot Display

  • In editor preview — Empty slots show as dashed boxes so you see where they'll appear
  • On storefront — Empty slots are invisible; customers only see filled slots
  • In proof image — Only selected items appear

Examples

Photo collage (Slots) — 4 slots arranged in a 2×2 grid. Customers upload up to 4 photos. Photos fill slots 1–4 in order. They can drag photos between slots to reorder. Dashed boxes show where new photos will appear.

Pizza toppings (Per-value) — Each topping checkbox (Pepperoni, Mushrooms, Olives) has a fixed spot on the pizza. "Pepperoni" always appears top-left, "Mushrooms" center, "Olives" bottom-right. When the customer checks a box, the topping appears in its spot. No reordering.

Custom t-shirt (Per-value) — Customers can add images to 3 fixed areas: left chest, back, and sleeve. Each image swatch value corresponds to one area. Selecting "Logo" puts it on the left chest; selecting "Emblem" puts it on the back.