[{"data":1,"prerenderedAt":689},["ShallowReactive",2],{"navigation_docs":3,"-timer-how-to-design-a-timer":497,"-timer-how-to-design-a-timer-surround":684},[4,171,412],{"title":5,"path":6,"stem":7,"children":8},"TreStack Timer","\u002Ftimer","1.timer",[9,12,34,99,120,137,158],{"title":10,"path":6,"stem":11},"TreStack Timer docs","1.timer\u002Findex",{"title":13,"path":14,"stem":15,"children":16,"page":33},"Getting started","\u002Ftimer\u002Fstart","1.timer\u002F1.start",[17,21,25,29],{"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",{"title":30,"path":31,"stem":32},"Common questions","\u002Ftimer\u002Fstart\u002Fcommon-questions","1.timer\u002F1.start\u002F4.common-questions",false,{"title":35,"path":36,"stem":37,"children":38,"page":33},"How-to guides","\u002Ftimer\u002Fhow-to","1.timer\u002F2.how-to",[39,43,47,51,55,59,63,67,71,75,79,83,87,91,95],{"title":40,"path":41,"stem":42},"Set up a product page timer","\u002Ftimer\u002Fhow-to\u002Fset-up-a-product-page-timer","1.timer\u002F2.how-to\u002F01.set-up-a-product-page-timer",{"title":44,"path":45,"stem":46},"Set up a countdown bar across your store","\u002Ftimer\u002Fhow-to\u002Fset-up-a-top-or-bottom-bar","1.timer\u002F2.how-to\u002F02.set-up-a-top-or-bottom-bar",{"title":48,"path":49,"stem":50},"Count down to a date","\u002Ftimer\u002Fhow-to\u002Fcount-down-to-a-date","1.timer\u002F2.how-to\u002F03.count-down-to-a-date",{"title":52,"path":53,"stem":54},"Run a recurring daily or weekly timer","\u002Ftimer\u002Fhow-to\u002Frun-a-daily-or-weekly-timer","1.timer\u002F2.how-to\u002F04.run-a-daily-or-weekly-timer",{"title":56,"path":57,"stem":58},"Give each visitor their own countdown","\u002Ftimer\u002Fhow-to\u002Fgive-each-visitor-their-own-countdown","1.timer\u002F2.how-to\u002F05.give-each-visitor-their-own-countdown",{"title":60,"path":61,"stem":62},"Schedule a timer to start later","\u002Ftimer\u002Fhow-to\u002Fschedule-a-timer-to-start-later","1.timer\u002F2.how-to\u002F06.schedule-a-timer-to-start-later",{"title":64,"path":65,"stem":66},"Add a timer to collection pages or the password page","\u002Ftimer\u002Fhow-to\u002Fadd-a-timer-to-collection-pages-or-the-password-page","1.timer\u002F2.how-to\u002F07.add-a-timer-to-collection-pages-or-the-password-page",{"title":68,"path":69,"stem":70},"Place a timer anywhere with an app block","\u002Ftimer\u002Fhow-to\u002Fplace-a-timer-anywhere-with-an-app-block","1.timer\u002F2.how-to\u002F08.place-a-timer-anywhere-with-an-app-block",{"title":72,"path":73,"stem":74},"Add a timer to the cart page and cart drawer","\u002Ftimer\u002Fhow-to\u002Fadd-a-timer-to-the-cart","1.timer\u002F2.how-to\u002F09.add-a-timer-to-the-cart",{"title":76,"path":77,"stem":78},"Add a countdown to a marketing email","\u002Ftimer\u002Fhow-to\u002Fadd-a-countdown-to-an-email","1.timer\u002F2.how-to\u002F10.add-a-countdown-to-an-email",{"title":80,"path":81,"stem":82},"Show a timer only in some countries","\u002Ftimer\u002Fhow-to\u002Fshow-a-timer-in-some-countries","1.timer\u002F2.how-to\u002F11.show-a-timer-in-some-countries",{"title":84,"path":85,"stem":86},"Translate a timer's text","\u002Ftimer\u002Fhow-to\u002Ftranslate-a-timer","1.timer\u002F2.how-to\u002F12.translate-a-timer",{"title":88,"path":89,"stem":90},"Change a timer's layout, colors and font","\u002Ftimer\u002Fhow-to\u002Fdesign-a-timer","1.timer\u002F2.how-to\u002F13.design-a-timer",{"title":92,"path":93,"stem":94},"Add a background image to a timer","\u002Ftimer\u002Fhow-to\u002Fadd-a-background-image","1.timer\u002F2.how-to\u002F14.add-a-background-image",{"title":96,"path":97,"stem":98},"Read a timer's analytics","\u002Ftimer\u002Fhow-to\u002Fread-a-timers-analytics","1.timer\u002F2.how-to\u002F15.read-a-timers-analytics",{"title":100,"path":101,"stem":102,"children":103,"page":33},"Timer types","\u002Ftimer\u002Ftimer-types","1.timer\u002F3.timer-types",[104,108,112,116],{"title":105,"path":106,"stem":107},"TreStack Timer, setup and settings","\u002Ftimer\u002Ftimer-types\u002Ftrestack-timer","1.timer\u002F3.timer-types\u002F1.trestack-timer",{"title":109,"path":110,"stem":111},"Placement, countries, and translations","\u002Ftimer\u002Ftimer-types\u002Fplacement-and-targeting","1.timer\u002F3.timer-types\u002F2.placement-and-targeting",{"title":113,"path":114,"stem":115},"Cart page and cart drawer timers","\u002Ftimer\u002Ftimer-types\u002Fcart-timers","1.timer\u002F3.timer-types\u002F3.cart-timers",{"title":117,"path":118,"stem":119},"Email timers","\u002Ftimer\u002Ftimer-types\u002Femail-timers","1.timer\u002F3.timer-types\u002F4.email-timers",{"title":121,"path":122,"stem":123,"children":124,"page":33},"Performance and themes","\u002Ftimer\u002Freference","1.timer\u002F4.reference",[125,129,133],{"title":126,"path":127,"stem":128},"Performance notes","\u002Ftimer\u002Freference\u002Fperformance-notes","1.timer\u002F4.reference\u002F1.performance-notes",{"title":130,"path":131,"stem":132},"Theme compatibility","\u002Ftimer\u002Freference\u002Ftheme-compatibility","1.timer\u002F4.reference\u002F2.theme-compatibility",{"title":134,"path":135,"stem":136},"Running several timers at once","\u002Ftimer\u002Freference\u002Frunning-several-timers","1.timer\u002F4.reference\u002F3.running-several-timers",{"title":138,"path":139,"stem":140,"children":141,"page":33},"Billing, privacy, and data","\u002Ftimer\u002Faccount","1.timer\u002F5.account",[142,146,150,154],{"title":143,"path":144,"stem":145},"Pricing and billing","\u002Ftimer\u002Faccount\u002Fbilling","1.timer\u002F5.account\u002F1.billing",{"title":147,"path":148,"stem":149},"Privacy and data, what the app stores","\u002Ftimer\u002Faccount\u002Fprivacy-and-data","1.timer\u002F5.account\u002F2.privacy-and-data",{"title":151,"path":152,"stem":153},"Data processing and subprocessors","\u002Ftimer\u002Faccount\u002Fdata-processing-and-subprocessors","1.timer\u002F5.account\u002F3.data-processing-and-subprocessors",{"title":155,"path":156,"stem":157},"Uninstalling TreStack Timer","\u002Ftimer\u002Faccount\u002Funinstalling-trestack-timer","1.timer\u002F5.account\u002F4.uninstalling-trestack-timer",{"title":159,"path":160,"stem":161,"children":162,"page":33},"When something is wrong","\u002Ftimer\u002Ftroubleshooting","1.timer\u002F6.troubleshooting",[163,167],{"title":164,"path":165,"stem":166},"When the timer does not appear","\u002Ftimer\u002Ftroubleshooting\u002Ftroubleshooting-app-blocks","1.timer\u002F6.troubleshooting\u002F1.troubleshooting-app-blocks",{"title":168,"path":169,"stem":170},"When the timer shows in the wrong place or looks wrong","\u002Ftimer\u002Ftroubleshooting\u002Ftroubleshooting-storefront-display","1.timer\u002F6.troubleshooting\u002F2.troubleshooting-storefront-display",{"title":172,"path":173,"stem":174,"children":175},"TreStack Bundles","\u002Fbundles","2.bundles",[176,179,203,283,312,337,350,371,396],{"title":177,"path":173,"stem":178},"TreStack Bundles docs","2.bundles\u002Findex",{"title":180,"path":181,"stem":182,"children":183,"page":33},"Getting a deal live","\u002Fbundles\u002Fstart","2.bundles\u002F1.start",[184,188,192,196,200],{"title":185,"path":186,"stem":187},"Getting started with TreStack Bundles","\u002Fbundles\u002Fstart\u002Fgetting-started","2.bundles\u002F1.start\u002F1.getting-started",{"title":189,"path":190,"stem":191},"Deal types and deal bars","\u002Fbundles\u002Fstart\u002Fdeal-types","2.bundles\u002F1.start\u002F2.deal-types",{"title":193,"path":194,"stem":195},"Creating, publishing and managing deals","\u002Fbundles\u002Fstart\u002Fcreating-and-publishing-deals","2.bundles\u002F1.start\u002F3.creating-and-publishing-deals",{"title":197,"path":198,"stem":199},"Development stores and testing safely","\u002Fbundles\u002Fstart\u002Fdevelopment-stores-and-testing","2.bundles\u002F1.start\u002F4.development-stores-and-testing",{"title":30,"path":201,"stem":202},"\u002Fbundles\u002Fstart\u002Fcommon-questions","2.bundles\u002F1.start\u002F5.common-questions",{"title":35,"path":204,"stem":205,"children":206,"page":33},"\u002Fbundles\u002Fhow-to","2.bundles\u002F2.how-to",[207,211,215,219,223,227,231,235,239,243,247,251,255,259,263,267,271,275,279],{"title":208,"path":209,"stem":210},"Set up a quantity break deal","\u002Fbundles\u002Fhow-to\u002Fset-up-a-quantity-break","2.bundles\u002F2.how-to\u002F01.set-up-a-quantity-break",{"title":212,"path":213,"stem":214},"Set up a Buy X, get Y deal","\u002Fbundles\u002Fhow-to\u002Fset-up-a-buy-x-get-y-deal","2.bundles\u002F2.how-to\u002F02.set-up-a-buy-x-get-y-deal",{"title":216,"path":217,"stem":218},"Give a volume discount across different products","\u002Fbundles\u002Fhow-to\u002Fgive-a-volume-discount-across-products","2.bundles\u002F2.how-to\u002F03.give-a-volume-discount-across-products",{"title":220,"path":221,"stem":222},"Sell a bundle of different products","\u002Fbundles\u002Fhow-to\u002Fsell-a-bundle-of-different-products","2.bundles\u002F2.how-to\u002F04.sell-a-bundle-of-different-products",{"title":224,"path":225,"stem":226},"Add a free gift to a deal","\u002Fbundles\u002Fhow-to\u002Fadd-a-free-gift","2.bundles\u002F2.how-to\u002F05.add-a-free-gift",{"title":228,"path":229,"stem":230},"Add an upsell to a deal","\u002Fbundles\u002Fhow-to\u002Fadd-an-upsell-to-a-deal","2.bundles\u002F2.how-to\u002F06.add-an-upsell-to-a-deal",{"title":232,"path":233,"stem":234},"Sell a deal as a subscription","\u002Fbundles\u002Fhow-to\u002Fsell-a-deal-as-a-subscription","2.bundles\u002F2.how-to\u002F07.sell-a-deal-as-a-subscription",{"title":236,"path":237,"stem":238},"Set the variant each item starts on","\u002Fbundles\u002Fhow-to\u002Fset-default-variants","2.bundles\u002F2.how-to\u002F08.set-default-variants",{"title":240,"path":241,"stem":242},"Customize variant pickers and swatches","\u002Fbundles\u002Fhow-to\u002Fcustomize-variant-pickers-and-swatches","2.bundles\u002F2.how-to\u002F09.customize-variant-pickers-and-swatches",{"title":244,"path":245,"stem":246},"Show compare-at prices on a deal","\u002Fbundles\u002Fhow-to\u002Fshow-compare-at-prices","2.bundles\u002F2.how-to\u002F10.show-compare-at-prices",{"title":248,"path":249,"stem":250},"Round prices and remove decimals","\u002Fbundles\u002Fhow-to\u002Fround-prices-and-remove-decimals","2.bundles\u002F2.how-to\u002F11.round-prices-and-remove-decimals",{"title":252,"path":253,"stem":254},"Match deals to your store's colors and fonts","\u002Fbundles\u002Fhow-to\u002Fmatch-your-store-colors-and-fonts","2.bundles\u002F2.how-to\u002F12.match-your-store-colors-and-fonts",{"title":256,"path":257,"stem":258},"Move the widget or show it in another section","\u002Fbundles\u002Fhow-to\u002Fmove-the-widget-on-your-theme","2.bundles\u002F2.how-to\u002F13.move-the-widget-on-your-theme",{"title":260,"path":261,"stem":262},"Combine a deal with discount codes","\u002Fbundles\u002Fhow-to\u002Fcombine-a-deal-with-discount-codes","2.bundles\u002F2.how-to\u002F14.combine-a-deal-with-discount-codes",{"title":264,"path":265,"stem":266},"Change the discount name shown at checkout","\u002Fbundles\u002Fhow-to\u002Fchange-the-discount-name-at-checkout","2.bundles\u002F2.how-to\u002F15.change-the-discount-name-at-checkout",{"title":268,"path":269,"stem":270},"Translate a deal's texts","\u002Fbundles\u002Fhow-to\u002Ftranslate-a-deal","2.bundles\u002F2.how-to\u002F16.translate-a-deal",{"title":272,"path":273,"stem":274},"Show a deal in one market, or price it differently there","\u002Fbundles\u002Fhow-to\u002Fshow-a-deal-in-one-market","2.bundles\u002F2.how-to\u002F17.show-a-deal-in-one-market",{"title":276,"path":277,"stem":278},"Run an A\u002FB test on a deal","\u002Fbundles\u002Fhow-to\u002Frun-an-a-b-test","2.bundles\u002F2.how-to\u002F18.run-an-a-b-test",{"title":280,"path":281,"stem":282},"Export deal analytics as CSV","\u002Fbundles\u002Fhow-to\u002Fexport-analytics-as-csv","2.bundles\u002F2.how-to\u002F19.export-analytics-as-csv",{"title":284,"path":285,"stem":286,"children":287,"page":33},"Building offers","\u002Fbundles\u002Fdeals","2.bundles\u002F3.deals",[288,292,296,300,304,308],{"title":289,"path":290,"stem":291},"Quantity breaks and Buy X, get Y","\u002Fbundles\u002Fdeals\u002Fquantity-breaks-and-buy-x-get-y","2.bundles\u002F3.deals\u002F1.quantity-breaks-and-buy-x-get-y",{"title":293,"path":294,"stem":295},"Bundles and mix and match","\u002Fbundles\u002Fdeals\u002Fbundles-and-mix-and-match","2.bundles\u002F3.deals\u002F2.bundles-and-mix-and-match",{"title":297,"path":298,"stem":299},"Free gifts and progressive gifts","\u002Fbundles\u002Fdeals\u002Fgifts-and-progressive-gifts","2.bundles\u002F3.deals\u002F3.gifts-and-progressive-gifts",{"title":301,"path":302,"stem":303},"Upsells, add-ons and personalisation","\u002Fbundles\u002Fdeals\u002Fupsells-add-ons-and-personalisation","2.bundles\u002F3.deals\u002F4.upsells-add-ons-and-personalisation",{"title":305,"path":306,"stem":307},"Subscriptions in a deal","\u002Fbundles\u002Fdeals\u002Fsubscriptions","2.bundles\u002F3.deals\u002F5.subscriptions",{"title":309,"path":310,"stem":311},"Products, dates and visibility","\u002Fbundles\u002Fdeals\u002Fproducts-dates-and-visibility","2.bundles\u002F3.deals\u002F6.products-dates-and-visibility",{"title":313,"path":314,"stem":315,"children":316,"page":33},"How a deal looks, and where","\u002Fbundles\u002Fdesign","2.bundles\u002F4.design",[317,321,325,329,333],{"title":318,"path":319,"stem":320},"Designing a deal","\u002Fbundles\u002Fdesign\u002Fdesign","2.bundles\u002F4.design\u002F1.design",{"title":322,"path":323,"stem":324},"Badges, timers and scratch-off","\u002Fbundles\u002Fdesign\u002Fbadges-timers-and-scratch-off","2.bundles\u002F4.design\u002F2.badges-timers-and-scratch-off",{"title":326,"path":327,"stem":328},"Variants, swatches and images","\u002Fbundles\u002Fdesign\u002Fvariants-swatches-and-images","2.bundles\u002F4.design\u002F3.variants-swatches-and-images",{"title":330,"path":331,"stem":332},"Prices, the sticky bar and the savings summary","\u002Fbundles\u002Fdesign\u002Fprices-sticky-bar-and-savings","2.bundles\u002F4.design\u002F4.prices-sticky-bar-and-savings",{"title":334,"path":335,"stem":336},"Translations, currencies and markets","\u002Fbundles\u002Fdesign\u002Ftranslations-and-markets","2.bundles\u002F4.design\u002F5.translations-and-markets",{"title":338,"path":339,"stem":340,"children":341,"page":33},"Prices at checkout","\u002Fbundles\u002Fcheckout","2.bundles\u002F5.checkout",[342,346],{"title":343,"path":344,"stem":345},"How the discount is applied at checkout","\u002Fbundles\u002Fcheckout\u002Fhow-the-discount-is-applied","2.bundles\u002F5.checkout\u002F1.how-the-discount-is-applied",{"title":347,"path":348,"stem":349},"Combining discounts, and store limits","\u002Fbundles\u002Fcheckout\u002Fcombinations-and-limits","2.bundles\u002F5.checkout\u002F2.combinations-and-limits",{"title":351,"path":352,"stem":353,"children":354,"page":33},"Tests and numbers","\u002Fbundles\u002Fmeasure","2.bundles\u002F6.measure",[355,359,363,367],{"title":356,"path":357,"stem":358},"Deal analytics","\u002Fbundles\u002Fmeasure\u002Fanalytics","2.bundles\u002F6.measure\u002F1.analytics",{"title":360,"path":361,"stem":362},"Added revenue","\u002Fbundles\u002Fmeasure\u002Fadded-revenue","2.bundles\u002F6.measure\u002F2.added-revenue",{"title":364,"path":365,"stem":366},"A\u002FB testing a deal","\u002Fbundles\u002Fmeasure\u002Fab-tests","2.bundles\u002F6.measure\u002F3.ab-tests",{"title":368,"path":369,"stem":370},"Smart A\u002FB tests","\u002Fbundles\u002Fmeasure\u002Fsmart-ab-tests","2.bundles\u002F6.measure\u002F4.smart-ab-tests",{"title":372,"path":373,"stem":374,"children":375,"page":33},"Billing, privacy, and when something is wrong","\u002Fbundles\u002Faccount","2.bundles\u002F7.account",[376,380,384,388,392],{"title":377,"path":378,"stem":379},"TreStack Bundles plans and billing","\u002Fbundles\u002Faccount\u002Fplans-and-billing","2.bundles\u002F7.account\u002F1.plans-and-billing",{"title":381,"path":382,"stem":383},"Going over your plan","\u002Fbundles\u002Faccount\u002Fgoing-over-your-plan","2.bundles\u002F7.account\u002F2.going-over-your-plan",{"title":385,"path":386,"stem":387},"Pausing, cancelling and uninstalling","\u002Fbundles\u002Faccount\u002Fpausing-cancelling-and-uninstalling","2.bundles\u002F7.account\u002F3.pausing-cancelling-and-uninstalling",{"title":389,"path":390,"stem":391},"Privacy, data and sub-processors","\u002Fbundles\u002Faccount\u002Fprivacy-and-data","2.bundles\u002F7.account\u002F4.privacy-and-data",{"title":393,"path":394,"stem":395},"When a deal does not show or prices look wrong","\u002Fbundles\u002Faccount\u002Ftroubleshooting","2.bundles\u002F7.account\u002F5.troubleshooting",{"title":397,"path":398,"stem":399,"children":400,"page":33},"Reference","\u002Fbundles\u002Freference","2.bundles\u002F8.reference",[401,404,408],{"title":126,"path":402,"stem":403},"\u002Fbundles\u002Freference\u002Fperformance-notes","2.bundles\u002F8.reference\u002F1.performance-notes",{"title":405,"path":406,"stem":407},"Theme compatibility and placement","\u002Fbundles\u002Freference\u002Ftheme-compatibility","2.bundles\u002F8.reference\u002F2.theme-compatibility",{"title":409,"path":410,"stem":411},"Text variables","\u002Fbundles\u002Freference\u002Ftext-variables","2.bundles\u002F8.reference\u002F3.text-variables",{"title":413,"path":414,"stem":415,"children":416},"TreStack Checkout","\u002Fcheckout","3.checkout",[417,420,433,450,467,480],{"title":418,"path":414,"stem":419},"TreStack Checkout docs","3.checkout\u002Findex",{"title":421,"path":422,"stem":423,"children":424,"page":33},"Getting a block live","\u002Fcheckout\u002Fstart","3.checkout\u002F1.start",[425,429],{"title":426,"path":427,"stem":428},"Getting started with TreStack Checkout","\u002Fcheckout\u002Fstart\u002Fgetting-started","3.checkout\u002F1.start\u002F1.getting-started",{"title":430,"path":431,"stem":432},"App blocks","\u002Fcheckout\u002Fstart\u002Fapp-blocks","3.checkout\u002F1.start\u002F2.app-blocks",{"title":434,"path":435,"stem":436,"children":437,"page":33},"Offers and surveys","\u002Fcheckout\u002Foffers","3.checkout\u002F2.offers",[438,442,446],{"title":439,"path":440,"stem":441},"Upsells and gifts","\u002Fcheckout\u002Foffers\u002Fupsells-and-gifts","3.checkout\u002F2.offers\u002F1.upsells-and-gifts",{"title":443,"path":444,"stem":445},"Post-purchase page","\u002Fcheckout\u002Foffers\u002Fpost-purchase-page","3.checkout\u002F2.offers\u002F2.post-purchase-page",{"title":447,"path":448,"stem":449},"Surveys and forms","\u002Fcheckout\u002Foffers\u002Fsurveys-and-forms","3.checkout\u002F2.offers\u002F3.surveys-and-forms",{"title":451,"path":452,"stem":453,"children":454,"page":33},"Rules, branding and translations","\u002Fcheckout\u002Fcustomize","3.checkout\u002F3.customize",[455,459,463],{"title":456,"path":457,"stem":458},"Rules: payment, shipping, validation and cart links","\u002Fcheckout\u002Fcustomize\u002Frules","3.checkout\u002F3.customize\u002F1.rules",{"title":460,"path":461,"stem":462},"Checkout branding","\u002Fcheckout\u002Fcustomize\u002Fcheckout-branding","3.checkout\u002F3.customize\u002F2.checkout-branding",{"title":464,"path":465,"stem":466},"Translations","\u002Fcheckout\u002Fcustomize\u002Ftranslations","3.checkout\u002F3.customize\u002F3.translations",{"title":468,"path":469,"stem":470,"children":471,"page":33},"Numbers and reviews","\u002Fcheckout\u002Fmeasure","3.checkout\u002F4.measure",[472,476],{"title":473,"path":474,"stem":475},"Upsell analytics","\u002Fcheckout\u002Fmeasure\u002Fanalytics","3.checkout\u002F4.measure\u002F1.analytics",{"title":477,"path":478,"stem":479},"Review ratings from Judge.me and Okendo","\u002Fcheckout\u002Fmeasure\u002Fintegrations","3.checkout\u002F4.measure\u002F2.integrations",{"title":481,"path":482,"stem":483,"children":484,"page":33},"Billing, and when something is wrong","\u002Fcheckout\u002Faccount","3.checkout\u002F5.account",[485,489,493],{"title":486,"path":487,"stem":488},"TreStack Checkout plans and billing","\u002Fcheckout\u002Faccount\u002Fplans-and-billing","3.checkout\u002F5.account\u002F1.plans-and-billing",{"title":490,"path":491,"stem":492},"FAQ","\u002Fcheckout\u002Faccount\u002Ffaq","3.checkout\u002F5.account\u002F2.faq",{"title":494,"path":495,"stem":496},"Troubleshooting","\u002Fcheckout\u002Faccount\u002Ftroubleshooting","3.checkout\u002F5.account\u002F3.troubleshooting",{"id":498,"title":88,"body":499,"description":677,"extension":678,"links":679,"meta":680,"navigation":681,"path":89,"seo":682,"stem":90,"__hash__":683},"docs\u002F1.timer\u002F2.how-to\u002F13.design-a-timer.md",{"type":500,"value":501,"toc":670},"minimark",[502,517,547,554,559,594,601,620,626,636,640,646,650,664],[503,504,505,509,510,513,516],"p",{},[506,507,508],"strong",{},"Applies to:"," TreStack Timer",[511,512],"br",{},[506,514,515],{},"Updated:"," 5 November 2026",[518,519,520,525],"callout",{},[503,521,522],{},[506,523,524],{},"At a glance",[526,527,528,535,541],"ul",{},[529,530,531,534],"li",{},[506,532,533],{},"Layouts:"," Standard, Balanced and Inline",[529,536,537,540],{},[506,538,539],{},"Presets:"," 20 color presets, or your own colors",[529,542,543,546],{},[506,544,545],{},"Preview:"," Same code as the storefront",[503,548,549,550,553],{},"Every timer is styled on its own, on the ",[506,551,552],{},"Design"," tab, with the live preview beside it. The preview uses the same rendering code as the storefront, so what you see is what shoppers get.",[555,556,558],"h2",{"id":557},"set-it-up","Set it up",[560,561,562,568,591],"ol",{},[529,563,564,565,567],{},"Open the timer in TreStack Timer and go to the ",[506,566,552],{}," tab.",[529,569,570,571,574,575,578,579,582,583,586,587,590],{},"Under ",[506,572,573],{},"Template",", pick a ",[506,576,577],{},"Layout",": ",[506,580,581],{},"Standard",", ",[506,584,585],{},"Balanced"," or ",[506,588,589],{},"Inline",".",[529,592,593],{},"Start from one of the 20 color presets. A preset changes the colors and the background and keeps the rest of your settings.",[503,595,596],{},[597,598],"img",{"alt":599,"src":600},"The Template section of the Design tab: Layout set to Standard and Style set to Custom","\u002Fimg\u002Ftimer\u002Fhow-to\u002Fdesign-template.webp",[560,602,604,607,614,617],{"start":603},4,[529,605,606],{},"Adjust any color by hand. Custom colors take transparency, and the background can be a gradient instead of a single color.",[529,608,609,610,613],{},"Choose the font: ",[506,611,612],{},"Use your theme fonts"," to follow your theme, or one of the bundled web fonts.",[529,615,616],{},"Set the labels for days, hours, minutes and seconds. They read Days, Hrs, Mins and Secs by default.",[529,618,619],{},"The days column hides itself while it reads zero. Turn that off if you want it to show 00 days.",[503,621,622],{},[597,623],{"alt":624,"src":625},"The Typography section: Font set to Use your theme fonts, then the size and color of the title, subheading, timer and legend","\u002Fimg\u002Ftimer\u002Fhow-to\u002Fdesign-typography.webp",[560,627,629],{"start":628},8,[529,630,631,632,635],{},"Save, or choose ",[506,633,634],{},"Publish"," if the timer is not live yet.",[555,637,639],{"id":638},"check-it-on-your-store","Check it on your store",[503,641,642,643,645],{},"Open a page the timer shows on, on a real phone as well as a computer. A resized desktop window is not the same as a phone. If the timer runs off the side of a narrow screen, try the ",[506,644,589],{}," layout or smaller digits.",[555,647,649],{"id":648},"good-to-know","Good to know",[526,651,652,658],{},[529,653,654,657],{},[506,655,656],{},"Prefer the theme font or a web font."," A system font shows only on devices that have it installed and falls back on the rest. The bundled web fonts load wherever the timer shows, and only the characters your timer text uses.",[529,659,660,663],{},[506,661,662],{},"Live timers change for everyone."," A save on a published timer reaches the storefront after a short delay. On a fixed minutes timer, an edit also starts every visitor's countdown again.",[503,665,666,667,590],{},"Every design control and its default is in ",[668,669,105],"a",{"href":106},{"title":671,"searchDepth":672,"depth":672,"links":673},"",2,[674,675,676],{"id":557,"depth":672,"text":558},{"id":638,"depth":672,"text":639},{"id":648,"depth":672,"text":649},"Style a timer on the Design tab: one of three layouts, a color preset or your own colors, a gradient, your theme font or a web font, and the labels under the numbers.","md",null,{},true,{"title":88,"description":677},"eKmtp7hap3qmEwZRES0VEW8GKg1fXA13BWmH891CO8Q",[685,687],{"title":84,"path":85,"stem":86,"description":686,"children":-1},"Write a timer's text for each of your store languages, so shoppers read it in their language and see your default language wherever a translation is missing.",{"title":92,"path":93,"stem":94,"description":688,"children":-1},"Upload a background image to your store's Shopify Files or pick one from the suggested library, and make a landing timer or bar clickable with a button.",1793861942892]