Badges, timers and scratch-off

Applies to: TreStack Bundles, every plan
Updated: 11 October 2026

Badges

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.

Each badge has a Style:

• 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.
• 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.
• Border: a ring of text around its target. Text size 8 to 16 px, Thickness 14 to 30 px.
• 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.

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.

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:

• Distance from bar and Text spacing, 0 to 24 px each.
• Repeat text, which writes the text again and again round the ring, with an optional Delimiter between repetitions (a dot by default).
• 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.

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.

Highlights and labels

Every bar has a 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 {{saved_percentage}}, filled in with the bar's real numbers.

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:

• Layout: Vertical, one line under another, or Horizontal, side by side.
• Show highlights only when selected: the lines appear only on the bar the shopper has chosen.
• Size: 8 to 32 px. Text color and Icon color.
• Icon type: None, Checkmark, Dot, Arrow, Star, Heart, Thumbs up, or Custom with an icon you upload.

Countdown timer

The Countdown timer section adds a countdown between the block title and the bars. Turn it on and set:

• 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.
• Title: "Sale ends in {{timer}}" by default. {{timer}} becomes the time left as hours, minutes and seconds, with the days in front from one day on (for example 2d 03:04:05).
• Style: Background and Text colors (the Label colors to start with), Alignment (Left, Center, Right), a font style and a size.

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 Products, dates and visibility.

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.

Scratch-off

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.

On the storefront:

• Hidden bars sit under the card and cannot be selected until revealed. Bars hidden next to each other share one card.
• Scratching away half the card reveals what is under it.
• 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.
• What is revealed stays revealed while the shopper is on the page. Reloading the page covers the bars again.

In the editor, the card shows in the preview only while Show scratch-off previewing is on.

Adding urgency, in four steps.

Settings reference

If this does not work

The failures most likely on this procedure, with the check that resolves each one.