[{"data":1,"prerenderedAt":636},["ShallowReactive",2],{"navigation_docs":3,"-bundles-design-badges-timers-and-scratch-off":256,"-bundles-design-badges-timers-and-scratch-off-surround":631},[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":170,"body":258,"description":624,"extension":625,"links":626,"meta":627,"navigation":628,"path":171,"seo":629,"stem":172,"__hash__":630},"docs\u002F2.bundles\u002F3.design\u002F2.badges-timers-and-scratch-off.md",{"type":259,"value":260,"toc":607},"minimark",[261,276,306,311,314,317,343,346,349,373,376,380,392,398,431,435,438,465,471,474,478,481,484,498,501,505,538,542,580,584,587],[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],{},"Badges:"," Up to 30, Vertical layout only",[288,295,296,299],{},[265,297,298],{},"Countdown:"," To one end date and time",[288,301,302,305],{},[265,303,304],{},"Scratch-off:"," Reveals at half scratched, covers again on reload",[307,308,310],"h2",{"id":309},"badges","Badges",[262,312,313],{},"Badges draw the eye to one offer. The Badges section is listed only while Style, Layout is Vertical; in the other layouts the widget draws no badges. Turn on the Badges switch, or press Add badge, and the first badge is added for you. A deal holds up to 30.",[262,315,316],{},"Each badge has a Style:",[285,318,319,325,331,337],{},[288,320,321,324],{},[265,322,323],{},"Simple:"," a small tab of text on the top edge of what it is attached to. Text size 8 to 24 px. New ones say MOST POPULAR.",[288,326,327,330],{},[265,328,329],{},"Most popular:"," a tilted sticker on the top right corner, reading MOST POPULAR. Its words are the widget's built-in texts, so they follow the shopper's language and can be reworded on the Translations page. Size 60 to 160 px.",[288,332,333,336],{},[265,334,335],{},"Border:"," a ring of text around its target. Text size 8 to 16 px, Thickness 14 to 30 px.",[288,338,339,342],{},[265,340,341],{},"Custom:"," your own image, uploaded in the badge. Size 24 to 120 px. The recommended image size is 306 by 168 pixels, and wide images work best.",[262,344,345],{},"Attached to chooses where the badge sits: a bar, an upsell inside a bar, or a checkbox upsell while that section is on. A Border badge can also go round All bars at once. Each target takes one Border badge, so when every target already has one, Border is no longer offered in the Style list. Simple, Most popular and Border badges have their own Text color and Background color; a Custom badge is its image.",[262,347,348],{},"A Border badge on one bar has a Position: All, Top, Bottom, Left or Right. A ring that runs all the way round, either Position All or attached to All bars, has more fields:",[285,350,351,361,367],{},[288,352,353,356,357,360],{},[265,354,355],{},"Distance from bar"," and ",[265,358,359],{},"Text spacing",", 0 to 24 px each.",[288,362,363,366],{},[265,364,365],{},"Repeat text",", which writes the text again and again round the ring, with an optional Delimiter between repetitions (a dot by default).",[288,368,369,372],{},[265,370,371],{},"Animate",", offered once Repeat text is on, which moves the text round the ring, with a Speed of 10 to 100 and a Direction, Clockwise or Counterclockwise.",[262,374,375],{},"The moving ring stops for shoppers whose device asks for reduced motion. It also pauses while it is off screen or the tab is hidden, and goes on from where it stopped, so it costs nothing while nobody can see it.",[307,377,379],{"id":378},"highlights-and-labels","Highlights and labels",[262,381,382,383,386,387,391],{},"Every bar has a ",[265,384,385],{},"Label"," field: a short text on the bar, such as SAVE 15%. Its colors are in Style, Label. Like titles, it takes variables such as ",[388,389,390],"code",{},"{{saved_percentage}}",", filled in with the bar's real numbers.",[262,393,394,397],{},[265,395,396],{},"Highlights"," are short lines with an icon on a bar. In a bar, Add highlights adds three empty lines with a black checkmark. A bar holds up to six, each with Move up, Move down and Remove, and Remove all clears the list. The look is per bar:",[285,399,400,406,412,425],{},[288,401,402,405],{},[265,403,404],{},"Layout:"," Vertical, one line under another, or Horizontal, side by side.",[288,407,408,411],{},[265,409,410],{},"Show highlights only when selected:"," the lines appear only on the bar the shopper has chosen.",[288,413,414,417,418,356,421,424],{},[265,415,416],{},"Size:"," 8 to 32 px. ",[265,419,420],{},"Text color",[265,422,423],{},"Icon color",".",[288,426,427,430],{},[265,428,429],{},"Icon type:"," None, Checkmark, Dot, Arrow, Star, Heart, Thumbs up, or Custom with an icon you upload.",[307,432,434],{"id":433},"countdown-timer","Countdown timer",[262,436,437],{},"The Countdown timer section adds a countdown between the block title and the bars. Turn it on and set:",[285,439,440,446,459],{},[288,441,442,445],{},[265,443,444],{},"End date and End time:"," the moment it counts to. The time is entered in your browser's time zone, which the field names, and every shopper counts down to that same moment. A new timer starts on the deal's own end date, or on the next midnight when the deal has none.",[288,447,448,451,452,455,456,458],{},[265,449,450],{},"Title:"," \"Sale ends in ",[388,453,454],{},"{{timer}}","\" by default. ",[388,457,454],{}," becomes the time left as hours, minutes and seconds, with the days in front from one day on (for example 2d 03:04:05).",[288,460,461,464],{},[265,462,463],{},"Style:"," Background and Text colors (the Label colors to start with), Alignment (Left, Center, Right), a font style and a size.",[262,466,467,468,424],{},"When the end passes, the countdown section hides itself on the storefront. The editor preview keeps showing it, so you can still style it. The timer is display only: it does not end the deal or its discount. To stop the offer at the same moment, give the deal the same end date in Settings, Active dates, as described in ",[469,470,157],"a",{"href":158},[262,472,473],{},"A deal that already has a timer of an older kind keeps it. Only on such a deal, the section also offers Fixed duration and Ends at midnight (user's local time). A fixed duration starts again on every page load, because nothing is stored for the shopper. Once you switch that timer to Custom end date and save, the older choices are no longer offered.",[307,475,477],{"id":476},"scratch-off","Scratch-off",[262,479,480],{},"Scratch-off hides some offers under a card the shopper scratches away. Turn on the Scratch-off section, then tick Hide behind scratch-off on each bar you want hidden; that checkbox appears in every bar while the section is on. The section sets the card's look: Banner text (\"Scratch more special offers\" by default), Background, Title color and Title size.",[262,482,483],{},"On the storefront:",[285,485,486,489,492,495],{},[288,487,488],{},"Hidden bars sit under the card and cannot be selected until revealed. Bars hidden next to each other share one card.",[288,490,491],{},"Scratching away half the card reveals what is under it.",[288,493,494],{},"A Reveal button at the bottom of the card does the same in one press, for keyboard users and anyone who would rather not scratch. Its word is a built-in text, so it follows the shopper's language.",[288,496,497],{},"What is revealed stays revealed while the shopper is on the page. Reloading the page covers the bars again.",[262,499,500],{},"In the editor, the card shows in the preview only while Show scratch-off previewing is on.",[307,502,504],{"id":503},"adding-urgency-in-four-steps","Adding urgency, in four steps.",[506,507,509,514,517,521,524,528,531,535],"steps",{"level":508},"3",[510,511,513],"h3",{"id":512},"badge-the-offer-you-want-chosen","Badge the offer you want chosen",[262,515,516],{},"Style, Layout set to Vertical, then Badges, Add badge. Attach it to that bar.",[510,518,520],{"id":519},"say-what-the-bar-gives","Say what the bar gives",[262,522,523],{},"A Label with the saving, and a few highlights. Use variables so the numbers stay right when prices change.",[510,525,527],{"id":526},"add-a-real-deadline","Add a real deadline",[262,529,530],{},"Countdown timer, with the end date your offer really ends. Give the deal the same end date.",[510,532,534],{"id":533},"hide-a-surprise-if-it-suits-the-offer","Hide a surprise, if it suits the offer",[262,536,537],{},"Scratch-off on, then Hide behind scratch-off on one bar. Check the card with Show scratch-off previewing.",[307,539,541],{"id":540},"settings-reference","Settings reference",[543,544,545,549,553,557,561,564,568,571,574,577],"field-group",{},[546,547,548],"field",{"name":310},"Up to 30 per deal. Vertical layout only.",[546,550,552],{"name":551},"Style","Simple, Most popular, Border or Custom.",[546,554,556],{"name":555},"Attached to","A bar, a bar's upsell, a checkbox upsell, or All bars for a Border badge. One Border badge per target.",[546,558,560],{"name":559},"Border ring","Position, Thickness, Distance from bar, Text spacing, Repeat text, Delimiter between repetitions.",[546,562,563],{"name":371},"For a full ring with Repeat text. Speed 10 to 100, Clockwise or Counterclockwise. Stops for reduced motion.",[546,565,567],{"name":566},"Custom image","Uploaded per badge. 306 by 168 pixels recommended.",[546,569,570],{"name":385},"A short text on each bar, with variables.",[546,572,573],{"name":396},"Up to six lines per bar, with an icon.",[546,575,576],{"name":434},"To an end date and time in your browser's time zone. Hides on the storefront when it ends.",[546,578,579],{"name":477},"Banner text, Background, Title color, Title size. Bars chosen with Hide behind scratch-off.",[307,581,583],{"id":582},"if-this-does-not-work","If this does not work",[262,585,586],{},"The failures most likely on this procedure, with the check that resolves each one.",[588,589,590,595,599,603],"accordion",{},[591,592,594],"accordion-item",{"label":593},"The Badges section is missing, or badges do not show","Badges exist only in the Vertical layout. Set Style, Layout to Vertical. In Horizontal, Grid and Plain the section is not listed and the widget draws none.",[591,596,598],{"label":597},"The timer is gone from the product page","Its end date has passed, and an ended countdown hides itself on the storefront. The editor preview still shows it. Set a new end date if the offer runs on.",[591,600,602],{"label":601},"The ring badge does not move","Animate is offered only for a ring that runs all the way round with Repeat text on. If it is on and the ring still stands still on one device, that device asks for reduced motion, so the animation stops by design.",[591,604,606],{"label":605},"Border is missing from the Style list","Each target takes one Border badge, and every target this badge could use already has one. Remove or move one of them, or pick another style.",{"title":608,"searchDepth":609,"depth":609,"links":610},"",2,[611,612,613,614,615,622,623],{"id":309,"depth":609,"text":310},{"id":378,"depth":609,"text":379},{"id":433,"depth":609,"text":434},{"id":476,"depth":609,"text":477},{"id":503,"depth":609,"text":504,"children":616},[617,619,620,621],{"id":512,"depth":618,"text":513},3,{"id":519,"depth":618,"text":520},{"id":526,"depth":618,"text":527},{"id":533,"depth":618,"text":534},{"id":540,"depth":609,"text":541},{"id":582,"depth":609,"text":583},"Badges on bars and upsells, highlights and labels, the countdown timer, and the scratch card that hides offers until the shopper scratches it.","md",null,{},true,{"title":170,"description":624},"3-iMgfmtgZVKdZNO23txZC2M_fCSGY3REQiHRgGndao",[632,634],{"title":166,"path":167,"stem":168,"description":633,"children":-1},"Templates and the live preview, layouts, colors, fonts, brand colors, custom CSS and accessibility. Badges, timers, swatches, prices and the sticky bar each have their own page.",{"title":174,"path":175,"stem":176,"description":635,"children":-1},"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.",1791656488213]