Tab 1
Content tab
Defines what the bar says. Available fields depend on the bar type.
Name
Banner nameAll types
Internal label — only you see it. Used to find the bar in the list. Required.
Message
TitleSimple · Running line
The main line of text. Required (unless the free-shipping bar is on, which supplies its own title).
SubheadingSimple only
A secondary line under the title. Hidden for Running line (which is single-line).
Call to action
Choose No CTA, Button, or Text link.
Button label
The clickable text. Shown when the CTA is a Button or Text link.
Link URL
Where the CTA points. Must start with http(s)://, / (a store path), or #.
Coupon
Coupon codeSimple · Running line
Shown as a dashed pill; shoppers click to copy it. Leave blank for none.
Close button
Let visitors dismiss this banner
Adds an × on the right. A dismissed bar stays hidden for that visitor (remembered in their browser).
Countdown timer
Show a countdown timer
Turns the countdown on. When on, configure the fields below.
Ends on / Ends at (24h)
The target date and time (HH:MM) the timer counts down to, in your shop’s timezone.
Format
Days, hours, minutes, seconds or Hours, minutes, seconds.
Text when expired
Shown after the countdown ends. Leave blank to hide the timer instead.
Hide the entire banner once the countdown ends
Removes the whole bar when time runs out.
Choose the timer’s look — inline text, digit boxes, pills, or flip cards — and its colors, size, and font in the Design tab under Countdown timer.
Free shipping bar
Replace the title with a free-shipping progress message
Turns the bar into a free-shipping goal widget.
Free shipping threshold (cents)
The qualifying amount in cents — e.g. 5000 means $50.00 in your shop currency.
Before-qualified text
Shown while the shopper is under the threshold. Use {{amount}} for the remaining amount (e.g. "Add {{amount}} more for free shipping").
Qualified text
Shown once the cart qualifies (e.g. "You qualify for free shipping!").
Progress bar & amountSimple
Simple bars also show a progress bar filling toward the goal and a “current / goal” amount. Style them (colors, thickness, corner, and show/hide) in the Design tab under Free shipping bar.
Free shipping takes over the title
When on, the widget rewrites the title on the storefront to show live cart progress. On a Running line bar it also owns the scrolling text, so a countdown won't show at the same time — use a Simple bar if you want both.
Slides
Slide 1, Slide 2, …Rotating only
Each slide has its own Title, Subheading, Call to action, Coupon code, and close-button option. Use Add slide / Remove slide to manage them (at least one slide is required).
Translations
Add translationSimple · Running line
Override the text per locale: Locale (a BCP-47 tag like en, fr, or en-US), plus Title, Subheading, CTA text, and Coupon code. The storefront picks the row matching the visitor's shop locale (Markets-aware), falling back to the language prefix (so fr-CA uses an fr row). Not available for Rotating bars.
Tab 2
Design tab
Template
A preset color palette. Pick one to fill the color fields instantly; editing any color afterward switches the selection back to Custom. Templates only change colors — your sizes, corners, and font are preserved.
CustomDaybreakElectricForestGraphiteVibrantNeonLatteLoveEarthValentineCotton CandyBumblebeeBlack TieFireFrostGolden HourGarnetMidnightMinimalMint
Card
Background
Single color (one Background color) or Gradient(Gradient start, Gradient end, and a Gradient angle from 0–360°).
Corner radius (px)
Rounds the bar's corners. 0–80.
Border size (px) & Border color
An optional outline. Width 0–20, plus a color.
Typography
Font
Pick from the stacks below. "Use your theme fonts" inherits your storefront's fonts.
| Option | Renders as |
|---|
| Use your theme fonts | Your storefront's own fonts (default) |
| System | The visitor's native system UI font |
| Helvetica / Sans | Helvetica, Arial, sans-serif |
| Georgia / Serif | Georgia, Times New Roman, serif |
| Times | Times New Roman, Times, serif |
| Monospace | SF Mono, Menlo, Consolas, monospace |
| Rounded | Trebuchet MS, Segoe UI, Verdana |
Title size (px) & Title color
Title is 10–48 px, plus a color.
Subheading size (px) & Subheading color
Subheading is 8–32 px, plus a color.
Theme fonts and the preview
"Use your theme fonts" can't be shown in the admin preview — publish the bar to see your theme's fonts on the storefront.
Discount code
Outline color · Icon color · Text color
Colors for the dashed coupon pill.
Text size (px) & Corner radius (px)
Coupon text 8–40 px; corner 0–60.
Button
Button color · Text color
Background and text colors for the CTA button.
Text size (px) & Corner radius (px)
Button text 8–40 px; corner 0–60.
Icons
Close icon color
The color of the × dismiss icon.
Countdown timer Simple
Timer style
Pick the layout: Inline text (e.g. 2d 14:05:30), Digit boxes (labelled tiles), Pills (rounded capsules), or Flip cards (dark high-contrast cards). Running line bars always show the timer as inline text in the scrolling message.
Number size (px) & Font
Digit size 10–48 px; font defaults to Same as banner, or pick a built-in stack.
Number / Label / Box color
Colors for the digits, the unit labels (or pill unit letters), and each cell’s background. Label and box colors apply to the Digit boxes, Pills, and Flip cards styles.
Free shipping bar Simple
Show the progress bar / Show the amount
Toggle the progress track and the “current / goal” amount label independently.
Fill / Track color
The filled portion (themed to the template accent) and the empty track behind it.
Bar thickness (px) & Corner radius (px)
Bar thickness 2–24 px; corner 0–999 (999 = a fully rounded pill).
Animation
Speed (seconds per full loop)Running line
How long one full scroll takes. Lower is faster; 5–120 (default 30).
DirectionRunning line
Scroll left or Scroll right.
Time per item (seconds)Rotating
How long each slide shows before advancing. 2–30 (default 5).
DirectionRotating
Horizontal slider or Vertical ticker.
Tab 3
Placement tab
Surface — where the bar lives
| Surface | Behavior |
|---|
| Top or bottom of every page | Site-wide. Choose which pages and a vertical position (the options below appear). |
| Inside a specific section | You drop the bar into a chosen theme section via the theme editor (see custom placement). |
| Next to the cart form | Appears alongside the cart form. Hidden when the cart is empty. |
Pages Site-wide surface
Show on
Where the bar appears: Every page, Home page only, All product pages, Specific products, All collection pages, Specific collections, or Cart page only.
Product handles / Collection handles
Shown when you pick "Specific products" or "Specific collections". Enter comma-separated URL slugs — the part after /products/ or /collections/ (e.g. black-friday-tee, summer-bundle). At least one is required.
Position Site-wide surface
Vertical position
Top of page or Bottom of page.
Stay visible while the visitor scrolls
Makes the bar sticky so it follows the viewport.
Exclude pages Site-wide surface
Hide on these page types
Tick any page templates to hide on: Home, Products, Collections, Blogs, Posts, Cart, Search, 404.
Hide on URLs containing
Comma-separated substrings, e.g. /policies, /account/login.
Hide on URLs with these keywords
Comma-separated path segments — e.g. sale, clearance hides /collections/sale and /products/clearance-tee.
Custom placement Specific-section surface
- Open your theme editor (Online Store → Themes → Customize).
- Choose the page and section where the bar should appear.
- Add the "Custom Announcement Bar" app block to that section.
- Paste the Banner ID (copy it from the editor sidebar) into the block's settings and save.
Extend to full width
Block setting (off by default). By default the bar fills the section it sits in; tick this to break it out of the theme's content width so it spans the whole page. Has no effect in themes that clip sections with hidden overflow.
Audience
Show only to visitors from
Limit the bar to specific countries. Search and tick countries; leave everything unchecked to show to everyone. Selected countries appear as removable chips.
Country is resolved from Shopify Markets first, falling back to IP geolocation when Markets isn't configured. Country targeting is ignored in the theme-editor preview.
Schedule
Start date / Start time · End date / End time
Set a window for the bar. Times are in your shop’s timezone (Shopify admin → Settings → General) — no conversion needed. Leave either side blank to remove it (e.g. a start with no end runs indefinitely). The end must be on or after the start.
Reporting
Analytics
Pick a date range with the From / To fields and Apply (the default is the last 30 days; you can't query future dates).
Totals
Five metrics across your store: Impressions, Clicks, CTR (click-through rate), Dismissals, and Coupon copies.
By announcement
The same metrics broken down per bar (Name, Kind, Impressions, Clicks, CTR, Dismissals, Coupon copies).
First 24 hours
After you start using the app you'll see "Analytics is warming up" — data appears within 24 hours. Raw events are kept for 7 days and then rolled into daily totals.
Help
Troubleshooting
The bar doesn't appear on the storefront
Two common causes: the app embed isn't activated in your theme (use the "Activate embed" prompt on the Announcements list), or the bar is still a Draft (set its status to Published).
I see a "new version available" banner in the admin
A newer extension version was deployed but your theme still references the older one. Open the theme editor, toggle the embed off and back on, then Save — it resolves within a minute.
The countdown is frozen or never starts
Check that the end date and time are in the future. Times are entered in your shop's timezone (Shopify admin → Settings → General) and count down the same everywhere in the world.
The free-shipping bar doesn't update after a cart change
Most themes fire cart events the widget listens to. If yours doesn't, it polls the cart every few seconds as a fallback — updates still happen, just slightly delayed.
Translations don't appear
Translations apply when the visitor's storefront locale matches a locale you saved (e.g. fr, or fr-CA). Stores without Markets localization only use the default copy.
Still stuck?
Email support@vizua.sk with screenshots and your shop URL and we'll help.