Promo bar
FreeConversionv1.0.0
The first thing shoppers read, made to sell. Add messages one by one and they take turns in a slim bar at the top of the page. A countdown ticks down to your offer's real end in your store's time zone, then switches to an after-sale message or steps aside. Free shipping progress follows the cart as shoppers add products, whichever button they use, with a small meter and the amount left in their own currency. Any message can carry a link or a discount code that copies in one click. It pauses on hover and has a pause button, uses your theme's button colors or blends in, and never shows a fake or restarting timer.
Good for: Sales and launches with a deadline · Raising order value with free shipping · Sharing a discount code
When to use it
Use it at the very top of your store, above or below the header, so every page opens with your current offer.
- A deadline shoppers can trust. A countdown runs to the real end of your sale in your store’s time zone. When it ends, it switches to an after-sale message or leaves the bar. It never restarts.
- A reason to add one more item. The free shipping message follows the cart as shoppers add products and tells them how much is left to spend, with a small meter.
- Codes without typing. Any message can show a discount code as a button. One click copies it, ready to paste at checkout.
Set it up
Add the section
In the theme editor sidebar, find the Header area and choose Add section, then pick SU: Promo bar. Choosing Customize next to the section in the app opens it there for you. It starts with a Free shipping progress block and a Message block.
Write your messages
Add a block for each message, up to 6. They take turns in the order of the blocks. Drag blocks to reorder them. With two or more messages, shoppers get previous, next and pause buttons, and the bar pauses while they hover over it.
- Message has a Text, an optional Link with its Link label (both are needed for the link to show) and an optional Discount code.
- Countdown counts down to a date. See the next step.
- Free shipping progress follows the cart. You can add only one.
Select a block in the theme editor to show that message in the preview. The bar stays on it while it’s selected.
Set up a countdown
In a Countdown block, fill in Text (for example Sale ends in) and End date as YYYY-MM-DD, for example
2026-12-01. End time is HH:MM in your store’s time zone, in 24-hour time. Leave it empty for 23:59. Until you
add an end date, the theme editor shows a reminder instead of a timer.
When the time is up, the countdown shows Text after the end if you wrote one. If you left it empty, the message leaves the bar. If no messages are left, the bar hides.
Share a discount code
Create the code in Discounts in your Shopify admin first, then type it into Discount code on a Message or Countdown block. Shoppers see it as a button that copies the code. The bar doesn’t apply the code: shoppers paste it at checkout. On a countdown, the code button disappears when the offer ends.
Set the free shipping value
In the Free shipping progress block, enter Free shipping from: the order value from your free shipping rate, in your store’s currency. Shoppers using another currency see it converted with Shopify’s rate.
Edit the three texts if you like: Text with an empty cart, Text while below and Text once reached. In the
first two, [amount] is replaced by the free shipping value or by what’s left to spend.
Choose the look
Colors set to Button colors uses your theme’s button colors. Blend with the theme uses the page’s own colors. Text size is Small or Medium. Time per message sets how long each message shows, from 3 to 12 seconds.
The bar can’t read your shipping rates. If you change your free shipping rate in Settings → Shipping and delivery, change Free shipping from to match.
Try it
Settings
In the theme editor, in the order you'll see them. Every section also has the heading and style settings.
| Setting | What it does |
|---|---|
| ColorsDropdown | |
| Time per messageSlider (3–12 s) | |
| Text sizeDropdown |
Blocks go inside the section: use Add block, up to 6 in all, and drag them to change the order.
Block: Message
| Setting | What it does |
|---|---|
| TextText (bold, italic, links) | |
| Link labelText | |
| LinkLink | |
| Discount codeText | Shown as a button that copies the code. Create the code in Discounts first. |
Block: Countdown
| Setting | What it does |
|---|---|
| TextText (bold, italic, links) | |
| End dateText | YYYY-MM-DD, e.g. 2026-12-01. The real end of your offer: the timer never restarts. |
| End timeText | HH:MM in your store's time zone. Leave empty for 23:59. |
| Text after the endText (bold, italic, links) | Leave empty to drop this message once the offer ends. |
| Discount codeText | Shown as a button that copies the code. |
Block: Free shipping progress
| Setting | What it does |
|---|---|
| Free shipping fromNumber | Order value in your store's currency, as set in your shipping rates. Other currencies are converted with Shopify's rate. |
| Text with an empty cartText | [amount] is the free shipping value. |
| Text while belowText | [amount] is what's left to spend. |
| Text once reachedText |
Good to know
- Liquid can't read your shipping rates: enter the free shipping value yourself, in your store's currency.
- Countdown end times use your store's time zone with its current UTC offset; a daylight-saving change before the end can shift it by an hour.
- Without JavaScript the first message shows, with countdowns written as their end date and free shipping as of page load.
Changelog
- 1.0.0: Initial release.