Variants, swatches and images
Applies to: TreStack Bundles, every plan
Updated: 11 October 2026
- Swatch types: Eight, set per option name
- Default variants: Per bar, per item
- Gallery switching: Dawn family, Horizon, Impact, Prestige, Warehouse
Variant choice
How shoppers choose variants is set in the deal's Settings, Variants. Variant pickers show only for products with more than one variant.
- Let customers choose different variants for each item: each item of a bar with two or more items gets its own picker, so a shopper can take one shirt in Small and one in Large. Off, every item is the same variant, the one the theme's own picker shows. It is on in deals made from four templates, and off in the Buy X, get Y (BXGY) deal and Subscription templates.
- Show variant selection for single quantity deal bar: with the first setting on, a one-item bar gets a picker too.
- Hide theme variant picker: hides your theme's own picker on the page. With different variants off, the widget then shows one shared picker instead. This works on the themes the widget knows, listed on Theme compatibility and placement.
- Hide unavailable variant options: leaves out values that have no variant in stock (the one already chosen stays). Off, they are listed, and swatch buttons show them struck through.
A bar can also ask the shopper to choose. Require variant selection, in the bar, makes its pickers start on a "Select" placeholder instead of a variant, and the shopper must pick each one before adding to the cart; otherwise the widget says "Please select a variant for each item." It is offered on bundle and mix and match bars, and on quantity break and Buy X, get Y bars while different variants are on and the deal has no Volume discount with other products.
On the themes the widget knows, the theme's variant picker and the widget follow each other: a shopper who picks a color in the theme sees the widget change too. On other themes the widget still works, but the two are not kept in step.
Default variants
Set default variants, also in Settings, Variants, chooses the variant each item starts on. In the window, pick a bar under "Select bar to set its default variants", and the product when the bar has several. Then each item has a dropdown per option. Default leaves that item as it is, and values with no stock are marked Unavailable. Press Apply to keep your choices.
On the storefront an item starts on its default only when that variant can be bought. When it cannot, or when no default is set, the item starts on the variant the page shows. The products inside a bundle bar also have their own Pre-selected variant, described on Bundles and mix and match.
Swatches
Swatches replace the plain variant dropdowns with colors, images or pills. In Settings, Variants, Add swatches (Edit swatches once you have some) opens Add swatches to variant picker. It works from the product in the preview, so preview a product with variants first; without options it says "The product in the preview has no options".
In the window, choose an Option, such as Color or Size, and give it a Type:
| Type | What the shopper sees |
|---|---|
| Default dropdown | The plain dropdown |
| Color swatch dropdown | A dropdown with the chosen value's color beside it |
| Image swatch dropdown | A dropdown with the chosen value's image beside it |
| Product image dropdown | A dropdown with the variant's own image beside it |
| Color swatch | A row of color buttons |
| Image swatch | A row of image buttons |
| Product image swatch | A row of buttons showing each variant's own image |
| Pill buttons | A row of buttons with the value's name |
A color type asks for a color per value, white until you change it. An image type asks for an image per value, uploaded to your store's Files. The product image types take the image of the first variant with that value that has one, so they need nothing more. On a button type, a value left without a color or image shows its name as a pill.
The look is shared by every option:
- Show selected option name: writes the chosen value next to the option.
- Swatch shape: Circle, Rounded or Square. Swatch size: 4 to 100 px.
- Pill text size (8 to 32 px), Pill corner radius (empty uses the widget's corner radius) and the pill colors, while an option uses pills.
The window has its own preview, on the first bar of more than one item. Apply keeps the swatches; Cancel drops them.
Swatches are set per option name for the whole deal, so every product in the deal with an option of that name uses them. The widget matches the name as your storefront shows it. On a storefront in another language, where Color is translated, that option shows the plain dropdown. Swatch buttons work with the arrow keys, Home and End, and sold-out values are announced to screen readers.
Bar images and featured images
Bar image. In a bar, Add image puts an image in place of the bar's round selector. Image size (20 to 100 px) and Image corner radius (0 to 50 px) apply to every bar's image at once. Uploads go to your store's own Files: JPG, PNG, GIF, WebP or SVG, up to 20 MB.
Featured image. In a bar, Featured image opens a table of the deal's products, with a Show filter: All products, With a featured image, Without a featured image. For each product, pick one of that product's own images (Image 1, Image 2 and so on) or No image. When a shopper selects the bar, the product gallery on the page moves to that image. The editor preview shows it above the widget.
Gallery switching works only on the Dawn family (Dawn, Sense, Craft, Refresh, Studio, Ride, Taste, Crave, Colorblock, Origin, Spotlight, Publisher, Trade), Horizon, Impact, Prestige and Warehouse. On other themes nothing happens when the bar is selected, and nothing breaks either. The table lists the deal's products that are in stock, up to the first 1,000.
Setting up swatches, in four steps.
Preview a product with variants
Product previewing, above the preview. Pick a product that has the options you want swatches for.
Open the swatches window
Settings, Variants, Add swatches.
Give each option a type
Option, then Type. Fill in the colors or images it asks for, or pick a product image type.
Set the look and apply
Shape, size and pills. Apply, then set default variants and check the preview with a second product.
Settings reference
If this does not work
The failures most likely on this procedure, with the check that resolves each one.
Badges, timers and scratch-off
Badges on bars and upsells, highlights and labels, the countdown timer, and the scratch card that hides offers until the shopper scratches it.
Prices, the sticky bar and the savings summary
How the widget writes prices, compare-at prices, price rounding and the theme's own price, plus the sticky add to cart bar, the savings summary, low stock alerts and sold-out bars.