[{"data":1,"prerenderedAt":667},["ShallowReactive",2],{"navigation_docs":3,"-bundles-design-variants-swatches-and-images":256,"-bundles-design-variants-swatches-and-images-surround":662},[4,102],{"title":5,"path":6,"stem":7,"children":8},"TreStack Timer","\u002Ftimer","1.timer",[9,12,30,51,68,89],{"title":10,"path":6,"stem":11},"TreStack Timer docs","1.timer\u002Findex",{"title":13,"path":14,"stem":15,"children":16,"page":29},"Getting started","\u002Ftimer\u002Fstart","1.timer\u002F1.start",[17,21,25],{"title":18,"path":19,"stem":20},"Installing TreStack Timer","\u002Ftimer\u002Fstart\u002Finstalling-a-trestack-app","1.timer\u002F1.start\u002F1.installing-a-trestack-app",{"title":22,"path":23,"stem":24},"Turning on the app embed and placing the app block","\u002Ftimer\u002Fstart\u002Fplacing-your-first-app-block","1.timer\u002F1.start\u002F2.placing-your-first-app-block",{"title":26,"path":27,"stem":28},"Development stores and theme previews","\u002Ftimer\u002Fstart\u002Fdevelopment-stores-and-theme-previews","1.timer\u002F1.start\u002F3.development-stores-and-theme-previews",false,{"title":31,"path":32,"stem":33,"children":34,"page":29},"Timer types","\u002Ftimer\u002Ftimer-types","1.timer\u002F2.timer-types",[35,39,43,47],{"title":36,"path":37,"stem":38},"TreStack Timer, setup and settings","\u002Ftimer\u002Ftimer-types\u002Ftrestack-timer","1.timer\u002F2.timer-types\u002F1.trestack-timer",{"title":40,"path":41,"stem":42},"Placement, countries, and translations","\u002Ftimer\u002Ftimer-types\u002Fplacement-and-targeting","1.timer\u002F2.timer-types\u002F2.placement-and-targeting",{"title":44,"path":45,"stem":46},"Cart page and cart drawer timers","\u002Ftimer\u002Ftimer-types\u002Fcart-timers","1.timer\u002F2.timer-types\u002F3.cart-timers",{"title":48,"path":49,"stem":50},"Email timers","\u002Ftimer\u002Ftimer-types\u002Femail-timers","1.timer\u002F2.timer-types\u002F4.email-timers",{"title":52,"path":53,"stem":54,"children":55,"page":29},"Performance and themes","\u002Ftimer\u002Freference","1.timer\u002F3.reference",[56,60,64],{"title":57,"path":58,"stem":59},"Performance notes","\u002Ftimer\u002Freference\u002Fperformance-notes","1.timer\u002F3.reference\u002F1.performance-notes",{"title":61,"path":62,"stem":63},"Theme compatibility","\u002Ftimer\u002Freference\u002Ftheme-compatibility","1.timer\u002F3.reference\u002F2.theme-compatibility",{"title":65,"path":66,"stem":67},"Running several timers at once","\u002Ftimer\u002Freference\u002Frunning-several-timers","1.timer\u002F3.reference\u002F3.running-several-timers",{"title":69,"path":70,"stem":71,"children":72,"page":29},"Billing, privacy, and data","\u002Ftimer\u002Faccount","1.timer\u002F4.account",[73,77,81,85],{"title":74,"path":75,"stem":76},"Billing, trials, and plan changes","\u002Ftimer\u002Faccount\u002Fbilling","1.timer\u002F4.account\u002F1.billing",{"title":78,"path":79,"stem":80},"Privacy and data, what the app stores","\u002Ftimer\u002Faccount\u002Fprivacy-and-data","1.timer\u002F4.account\u002F2.privacy-and-data",{"title":82,"path":83,"stem":84},"Data processing and subprocessors","\u002Ftimer\u002Faccount\u002Fdata-processing-and-subprocessors","1.timer\u002F4.account\u002F3.data-processing-and-subprocessors",{"title":86,"path":87,"stem":88},"Uninstalling TreStack Timer","\u002Ftimer\u002Faccount\u002Funinstalling-trestack-timer","1.timer\u002F4.account\u002F4.uninstalling-trestack-timer",{"title":90,"path":91,"stem":92,"children":93,"page":29},"When something is wrong","\u002Ftimer\u002Ftroubleshooting","1.timer\u002F5.troubleshooting",[94,98],{"title":95,"path":96,"stem":97},"When the timer does not appear","\u002Ftimer\u002Ftroubleshooting\u002Ftroubleshooting-app-blocks","1.timer\u002F5.troubleshooting\u002F1.troubleshooting-app-blocks",{"title":99,"path":100,"stem":101},"When the timer shows in the wrong place or looks wrong","\u002Ftimer\u002Ftroubleshooting\u002Ftroubleshooting-storefront-display","1.timer\u002F5.troubleshooting\u002F2.troubleshooting-storefront-display",{"title":103,"path":104,"stem":105,"children":106},"TreStack Bundles","\u002Fbundles","2.bundles",[107,110,131,160,185,198,219,244],{"title":108,"path":104,"stem":109},"TreStack Bundles docs","2.bundles\u002Findex",{"title":111,"path":112,"stem":113,"children":114,"page":29},"Getting a deal live","\u002Fbundles\u002Fstart","2.bundles\u002F1.start",[115,119,123,127],{"title":116,"path":117,"stem":118},"Getting started with TreStack Bundles","\u002Fbundles\u002Fstart\u002Fgetting-started","2.bundles\u002F1.start\u002F1.getting-started",{"title":120,"path":121,"stem":122},"Deal types and deal bars","\u002Fbundles\u002Fstart\u002Fdeal-types","2.bundles\u002F1.start\u002F2.deal-types",{"title":124,"path":125,"stem":126},"Creating, publishing and managing deals","\u002Fbundles\u002Fstart\u002Fcreating-and-publishing-deals","2.bundles\u002F1.start\u002F3.creating-and-publishing-deals",{"title":128,"path":129,"stem":130},"Development stores and testing safely","\u002Fbundles\u002Fstart\u002Fdevelopment-stores-and-testing","2.bundles\u002F1.start\u002F4.development-stores-and-testing",{"title":132,"path":133,"stem":134,"children":135,"page":29},"Building offers","\u002Fbundles\u002Fdeals","2.bundles\u002F2.deals",[136,140,144,148,152,156],{"title":137,"path":138,"stem":139},"Quantity breaks and Buy X, get Y","\u002Fbundles\u002Fdeals\u002Fquantity-breaks-and-buy-x-get-y","2.bundles\u002F2.deals\u002F1.quantity-breaks-and-buy-x-get-y",{"title":141,"path":142,"stem":143},"Bundles and mix and match","\u002Fbundles\u002Fdeals\u002Fbundles-and-mix-and-match","2.bundles\u002F2.deals\u002F2.bundles-and-mix-and-match",{"title":145,"path":146,"stem":147},"Free gifts and progressive gifts","\u002Fbundles\u002Fdeals\u002Fgifts-and-progressive-gifts","2.bundles\u002F2.deals\u002F3.gifts-and-progressive-gifts",{"title":149,"path":150,"stem":151},"Upsells, add-ons and personalisation","\u002Fbundles\u002Fdeals\u002Fupsells-add-ons-and-personalisation","2.bundles\u002F2.deals\u002F4.upsells-add-ons-and-personalisation",{"title":153,"path":154,"stem":155},"Subscriptions in a deal","\u002Fbundles\u002Fdeals\u002Fsubscriptions","2.bundles\u002F2.deals\u002F5.subscriptions",{"title":157,"path":158,"stem":159},"Products, dates and visibility","\u002Fbundles\u002Fdeals\u002Fproducts-dates-and-visibility","2.bundles\u002F2.deals\u002F6.products-dates-and-visibility",{"title":161,"path":162,"stem":163,"children":164,"page":29},"How a deal looks, and where","\u002Fbundles\u002Fdesign","2.bundles\u002F3.design",[165,169,173,177,181],{"title":166,"path":167,"stem":168},"Designing a deal","\u002Fbundles\u002Fdesign\u002Fdesign","2.bundles\u002F3.design\u002F1.design",{"title":170,"path":171,"stem":172},"Badges, timers and scratch-off","\u002Fbundles\u002Fdesign\u002Fbadges-timers-and-scratch-off","2.bundles\u002F3.design\u002F2.badges-timers-and-scratch-off",{"title":174,"path":175,"stem":176},"Variants, swatches and images","\u002Fbundles\u002Fdesign\u002Fvariants-swatches-and-images","2.bundles\u002F3.design\u002F3.variants-swatches-and-images",{"title":178,"path":179,"stem":180},"Prices, the sticky bar and the savings summary","\u002Fbundles\u002Fdesign\u002Fprices-sticky-bar-and-savings","2.bundles\u002F3.design\u002F4.prices-sticky-bar-and-savings",{"title":182,"path":183,"stem":184},"Translations, currencies and markets","\u002Fbundles\u002Fdesign\u002Ftranslations-and-markets","2.bundles\u002F3.design\u002F5.translations-and-markets",{"title":186,"path":187,"stem":188,"children":189,"page":29},"Prices at checkout","\u002Fbundles\u002Fcheckout","2.bundles\u002F4.checkout",[190,194],{"title":191,"path":192,"stem":193},"How the discount is applied at checkout","\u002Fbundles\u002Fcheckout\u002Fhow-the-discount-is-applied","2.bundles\u002F4.checkout\u002F1.how-the-discount-is-applied",{"title":195,"path":196,"stem":197},"Combining discounts, and store limits","\u002Fbundles\u002Fcheckout\u002Fcombinations-and-limits","2.bundles\u002F4.checkout\u002F2.combinations-and-limits",{"title":199,"path":200,"stem":201,"children":202,"page":29},"Tests and numbers","\u002Fbundles\u002Fmeasure","2.bundles\u002F5.measure",[203,207,211,215],{"title":204,"path":205,"stem":206},"Deal analytics","\u002Fbundles\u002Fmeasure\u002Fanalytics","2.bundles\u002F5.measure\u002F1.analytics",{"title":208,"path":209,"stem":210},"Added revenue","\u002Fbundles\u002Fmeasure\u002Fadded-revenue","2.bundles\u002F5.measure\u002F2.added-revenue",{"title":212,"path":213,"stem":214},"A\u002FB testing a deal","\u002Fbundles\u002Fmeasure\u002Fab-tests","2.bundles\u002F5.measure\u002F3.ab-tests",{"title":216,"path":217,"stem":218},"Smart A\u002FB tests","\u002Fbundles\u002Fmeasure\u002Fsmart-ab-tests","2.bundles\u002F5.measure\u002F4.smart-ab-tests",{"title":220,"path":221,"stem":222,"children":223,"page":29},"Billing, privacy, and when something is wrong","\u002Fbundles\u002Faccount","2.bundles\u002F6.account",[224,228,232,236,240],{"title":225,"path":226,"stem":227},"TreStack Bundles plans and billing","\u002Fbundles\u002Faccount\u002Fplans-and-billing","2.bundles\u002F6.account\u002F1.plans-and-billing",{"title":229,"path":230,"stem":231},"Going over your plan","\u002Fbundles\u002Faccount\u002Fgoing-over-your-plan","2.bundles\u002F6.account\u002F2.going-over-your-plan",{"title":233,"path":234,"stem":235},"Pausing, cancelling and uninstalling","\u002Fbundles\u002Faccount\u002Fpausing-cancelling-and-uninstalling","2.bundles\u002F6.account\u002F3.pausing-cancelling-and-uninstalling",{"title":237,"path":238,"stem":239},"Privacy, data and sub-processors","\u002Fbundles\u002Faccount\u002Fprivacy-and-data","2.bundles\u002F6.account\u002F4.privacy-and-data",{"title":241,"path":242,"stem":243},"When a deal does not show or prices look wrong","\u002Fbundles\u002Faccount\u002Ftroubleshooting","2.bundles\u002F6.account\u002F5.troubleshooting",{"title":245,"path":246,"stem":247,"children":248,"page":29},"Reference","\u002Fbundles\u002Freference","2.bundles\u002F7.reference",[249,252],{"title":57,"path":250,"stem":251},"\u002Fbundles\u002Freference\u002Fperformance-notes","2.bundles\u002F7.reference\u002F1.performance-notes",{"title":253,"path":254,"stem":255},"Theme compatibility and placement","\u002Fbundles\u002Freference\u002Ftheme-compatibility","2.bundles\u002F7.reference\u002F2.theme-compatibility",{"id":257,"title":174,"body":258,"description":655,"extension":656,"links":657,"meta":658,"navigation":659,"path":175,"seo":660,"stem":176,"__hash__":661},"docs\u002F2.bundles\u002F3.design\u002F3.variants-swatches-and-images.md",{"type":259,"value":260,"toc":637},"minimark",[261,276,306,311,314,344,351,354,359,362,367,371,374,385,468,471,474,502,505,508,512,518,524,527,531,563,567,610,614,617],[262,263,264,268,269,272,275],"p",{},[265,266,267],"strong",{},"Applies to:"," TreStack Bundles, every plan",[270,271],"br",{},[265,273,274],{},"Updated:"," 11 October 2026",[277,278,279,284],"callout",{},[262,280,281],{},[265,282,283],{},"At a glance",[285,286,287,294,300],"ul",{},[288,289,290,293],"li",{},[265,291,292],{},"Swatch types:"," Eight, set per option name",[288,295,296,299],{},[265,297,298],{},"Default variants:"," Per bar, per item",[288,301,302,305],{},[265,303,304],{},"Gallery switching:"," Dawn family, Horizon, Impact, Prestige, Warehouse",[307,308,310],"h2",{"id":309},"variant-choice","Variant choice",[262,312,313],{},"How shoppers choose variants is set in the deal's Settings, Variants. Variant pickers show only for products with more than one variant.",[285,315,316,322,328,338],{},[288,317,318,321],{},[265,319,320],{},"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.",[288,323,324,327],{},[265,325,326],{},"Show variant selection for single quantity deal bar:"," with the first setting on, a one-item bar gets a picker too.",[288,329,330,333,334,337],{},[265,331,332],{},"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 ",[335,336,253],"a",{"href":254},".",[288,339,340,343],{},[265,341,342],{},"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.",[262,345,346,347,350],{},"A bar can also ask the shopper to choose. ",[265,348,349],{},"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.",[262,352,353],{},"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.",[355,356,358],"h3",{"id":357},"default-variants","Default variants",[262,360,361],{},"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.",[262,363,364,365,337],{},"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 ",[335,366,141],{"href":142},[307,368,370],{"id":369},"swatches","Swatches",[262,372,373],{},"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\".",[262,375,376,377,380,381,384],{},"In the window, choose an ",[265,378,379],{},"Option",", such as Color or Size, and give it a ",[265,382,383],{},"Type",":",[386,387,388,400],"table",{},[389,390,391],"thead",{},[392,393,394,397],"tr",{},[395,396,383],"th",{},[395,398,399],{},"What the shopper sees",[401,402,403,412,420,428,436,444,452,460],"tbody",{},[392,404,405,409],{},[406,407,408],"td",{},"Default dropdown",[406,410,411],{},"The plain dropdown",[392,413,414,417],{},[406,415,416],{},"Color swatch dropdown",[406,418,419],{},"A dropdown with the chosen value's color beside it",[392,421,422,425],{},[406,423,424],{},"Image swatch dropdown",[406,426,427],{},"A dropdown with the chosen value's image beside it",[392,429,430,433],{},[406,431,432],{},"Product image dropdown",[406,434,435],{},"A dropdown with the variant's own image beside it",[392,437,438,441],{},[406,439,440],{},"Color swatch",[406,442,443],{},"A row of color buttons",[392,445,446,449],{},[406,447,448],{},"Image swatch",[406,450,451],{},"A row of image buttons",[392,453,454,457],{},[406,455,456],{},"Product image swatch",[406,458,459],{},"A row of buttons showing each variant's own image",[392,461,462,465],{},[406,463,464],{},"Pill buttons",[406,466,467],{},"A row of buttons with the value's name",[262,469,470],{},"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.",[262,472,473],{},"The look is shared by every option:",[285,475,476,482,492],{},[288,477,478,481],{},[265,479,480],{},"Show selected option name:"," writes the chosen value next to the option.",[288,483,484,487,488,491],{},[265,485,486],{},"Swatch shape:"," Circle, Rounded or Square. ",[265,489,490],{},"Swatch size:"," 4 to 100 px.",[288,493,494,497,498,501],{},[265,495,496],{},"Pill text size"," (8 to 32 px), ",[265,499,500],{},"Pill corner radius"," (empty uses the widget's corner radius) and the pill colors, while an option uses pills.",[262,503,504],{},"The window has its own preview, on the first bar of more than one item. Apply keeps the swatches; Cancel drops them.",[262,506,507],{},"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.",[307,509,511],{"id":510},"bar-images-and-featured-images","Bar images and featured images",[262,513,514,517],{},[265,515,516],{},"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.",[262,519,520,523],{},[265,521,522],{},"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.",[262,525,526],{},"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.",[307,528,530],{"id":529},"setting-up-swatches-in-four-steps","Setting up swatches, in four steps.",[532,533,535,539,542,546,549,553,556,560],"steps",{"level":534},"3",[355,536,538],{"id":537},"preview-a-product-with-variants","Preview a product with variants",[262,540,541],{},"Product previewing, above the preview. Pick a product that has the options you want swatches for.",[355,543,545],{"id":544},"open-the-swatches-window","Open the swatches window",[262,547,548],{},"Settings, Variants, Add swatches.",[355,550,552],{"id":551},"give-each-option-a-type","Give each option a type",[262,554,555],{},"Option, then Type. Fill in the colors or images it asks for, or pick a product image type.",[355,557,559],{"id":558},"set-the-look-and-apply","Set the look and apply",[262,561,562],{},"Shape, size and pills. Apply, then set default variants and check the preview with a second product.",[307,564,566],{"id":565},"settings-reference","Settings reference",[568,569,570,575,579,583,587,590,594,598,602,606],"field-group",{},[571,572,574],"field",{"name":573},"Let customers choose different variants for each item","A picker per item on bars of two or more items. Off: every item is the theme's chosen variant.",[571,576,578],{"name":577},"Show variant selection for single quantity deal bar","A picker on one-item bars too. With the setting above on.",[571,580,582],{"name":581},"Hide theme variant picker","Hides the theme's picker. On known themes.",[571,584,586],{"name":585},"Hide unavailable variant options","Leaves out values with no stock. Off: listed, struck through on buttons.",[571,588,589],{"name":349},"Per bar. Pickers start on \"Select\" and must be chosen.",[571,591,593],{"name":592},"Set default variants","Per bar, per product, per item. Used only while that variant can be bought.",[571,595,597],{"name":596},"Swatch type","Eight types, per option name, for the whole deal.",[571,599,601],{"name":600},"Swatch shape and size","Circle, Rounded or Square; 4 to 100 px.",[571,603,605],{"name":604},"Bar image","In place of the bar's selector. Size 20 to 100 px, corner radius 0 to 50 px, for every bar.",[571,607,609],{"name":608},"Featured image","Per bar and product, from the product's own images. Gallery moves on the listed themes only.",[307,611,613],{"id":612},"if-this-does-not-work","If this does not work",[262,615,616],{},"The failures most likely on this procedure, with the check that resolves each one.",[618,619,620,625,629,633],"accordion",{},[621,622,624],"accordion-item",{"label":623},"Selecting a bar does not change the product gallery","Gallery switching works only on the Dawn family, Horizon, Impact, Prestige and Warehouse. On those, check that the bar has a featured image for this product: the table sets one per product. A product that is out of stock is not listed in the table.",[621,626,628],{"label":627},"The theme's picker and the widget show different variants","Your theme is not one the widget knows, so the two are not kept in step and Hide theme variant picker has nothing to hide. Turn on Let customers choose different variants for each item so shoppers pick in the widget. Our support can set custom selectors for your theme.",[621,630,632],{"label":631},"An item starts on a sold-out variant","With no default set, or a default that cannot be bought, an item starts on the variant the page shows. Set a default variant that is in stock, and turn on Hide unavailable variant options.",[621,634,636],{"label":635},"Swatches show as plain dropdowns in one language","Swatches match the option name as the storefront shows it. Where the option name is translated, the widget does not recognise it and shows the plain dropdown.",{"title":638,"searchDepth":639,"depth":639,"links":640},"",2,[641,645,646,647,653,654],{"id":309,"depth":639,"text":310,"children":642},[643],{"id":357,"depth":644,"text":358},3,{"id":369,"depth":639,"text":370},{"id":510,"depth":639,"text":511},{"id":529,"depth":639,"text":530,"children":648},[649,650,651,652],{"id":537,"depth":644,"text":538},{"id":544,"depth":644,"text":545},{"id":551,"depth":644,"text":552},{"id":558,"depth":644,"text":559},{"id":565,"depth":639,"text":566},{"id":612,"depth":639,"text":613},"How shoppers pick sizes and colors in a deal, the eight swatch types, default variants, bar images, and featured images that move the product gallery.","md",null,{},true,{"title":174,"description":655},"VmGPZvjq11kqks9aI-JBsgjiZbvQp9FBgnweOBAzvRY",[663,665],{"title":170,"path":171,"stem":172,"description":664,"children":-1},"Badges on bars and upsells, highlights and labels, the countdown timer, and the scratch card that hides offers until the shopper scratches it.",{"title":178,"path":179,"stem":180,"description":666,"children":-1},"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.",1791656488442]