Some options allow customers to select multiple items: checkboxes, multi-file uploads, or multi-select swatches. When you add a personalization layer for a multi-select option, you can configure how those multiple selections appear as overlays on the product image.
You have two modes to choose from: Slots (filled in order) or Per value (each value has a fixed spot). This section explains how each works and when to use them.
How it works: You define a fixed number of "slots" (e.g., 4 slots). When a customer makes selections, each item fills the next available slot in order. If they have 4 slots and select 2 items, items appear in slots 1 and 2. If they deselect the first item, the remaining item moves up to slot 1.
When to use: Use slots when the specific position of each item doesn't matter — only the number of items matters. Example: A customer can upload up to 5 photos for a collage. Each slot shows the next photo in the sequence.
Configuration:
The sub-layers are pre-arranged side-by-side in a row by default, but you can move them to any position you want.
Customer experience: On the storefront, customers can drag and drop to reorder items between slots. Each item has its own position and size controls.
How it works: Each specific option value (or selected value) gets its own fixed position on the image. If a customer selects "Red" and "Blue," each appears in the spot you designated for "Red" and "Blue" respectively. If they deselect "Red," that spot becomes empty. If they reselect "Red," it appears in the same spot again.
When to use: Use per-value when specific items need to appear in specific places. Example: A customer can add multiple toppings to a pizza. You want "Pepperoni" always in the top-left, "Mushrooms" always in the center, and "Olives" always in the bottom-right.
Configuration:
Customer experience: On the storefront, each selected item appears in its assigned spot. Customers can move and resize within their value's area, but the value always appears in that general location.
When using Slots mode:
The slot count doesn't limit what customers can select in the option itself — it only controls how many items appear in the personalization layer. If a customer selects more items than there are slots, the excess items are not shown in the preview or proof image.
Sub-layers use a dot notation:
This numbering helps you keep track of which sub-layer you're editing, especially when you have many layers.
When you first set up a multi-select layer, all sub-layers are automatically positioned side-by-side in a row. If you want a different layout, you can:
This is useful if you want to reorder after manually positioning, or if you want to experiment with different layouts.
When using Slots mode on the storefront, customers can reorder items by dragging them between slots. This is especially useful for collections like photo galleries or ingredient lists where the order matters.
If a customer drags an item from slot 1 to slot 3, the items in slots 2 and 3 shift up. This is handled automatically — you don't need to configure anything.
Each sub-layer has its own toggle for Change position, Change size, and Rotate. You can enable different controls for different slots or values.
Example: For a file upload layer with 4 slots, you might allow customers to move all 4 images but only resize the first one. Each slot's controls are configured independently.
Slots mode: If a customer deselects an item or reorders selections, the preview updates immediately. The sub-layers shift position to show the new order.
Per-value mode: If a customer selects or deselects a value, that value's layer appears or disappears. The other layers stay in their fixed positions.
When using Slots mode: