Twig Announcement Bar
Add beautiful, fully customisable announcement bars to your Shopify store — top bars, bottom bars, cart alerts, and product page banners. No coding needed.
Quick Start
Get your first announcement bar live in under 3 minutes.
Install the App
Find Twig Announcement Bar in the Shopify App Store and click Install. You will be redirected back to your Shopify admin after installation.
Enable the App Embed
Open the Setup Guide on the app dashboard and click Enable App Embed. This activates the app on your storefront — no theme code changes needed.
Create Your First Bar
Click Create Announcement Bar, choose a bar type, pick a template or start from scratch, customise your message, and click Save & Publish.
Check Your Storefront
Visit your store to see the bar live. Use the preview mode inside the app to test desktop and mobile views before publishing.
Enable App Embed
The app uses Shopify's native App Embed system — a safe, no-code way to inject content into your theme.
- In the app dashboard, open the Setup Guide.
- Click Enable App Embed — this opens your Shopify theme editor.
- In the theme editor, make sure the Twig Announcement Bar toggle is turned ON.
- Click Save in the theme editor.
- Return to the app and confirm the embed is active.
Top & Bottom Bar
The most common bar type. Renders at the very top or bottom of every page (or specific pages), sticky or static.
When to use
- Sitewide promotions — free shipping threshold, sale end date
- Important announcements — holiday hours, policy changes
- Welcome messages and brand taglines
Key options
| Option | Description |
|---|---|
| Position | Top of page or Bottom of page |
| Sticky | Bar stays visible when the user scrolls |
| Closeable | Show an ✕ button so visitors can dismiss the bar |
| Animation | Static, rotating messages, or running ticker |
| Height | Control the bar height in pixels |
| Z-index | Control stacking order relative to other page elements |
Cart Page Bar
Announcement bars displayed on the cart page — above the item list, below the list, or at the top/bottom of the cart page. Ideal for last-minute conversion boosts.
When to use
- Free shipping progress — "Spend $X more for free shipping!"
- Limited-time coupon codes
- Trust signals — "Secure checkout · Free returns"
- Upsell reminders — "Don't forget to add X"
Position options
| Position | Where it appears |
|---|---|
| Cart Top | Above the product list in the cart |
| Cart Bottom | Below the product list, above checkout button |
| Product List Top | Directly above each product row |
| Product List Bottom | Directly below each product row |
Product Page Bar
Show announcement bars on individual product pages — above the product title, below the price, near the Buy button, or next to the product image.
When to use
- Urgency — "Only 3 left in stock"
- Product-specific offers — "Buy 2 get 1 free on this item"
- Social proof — "50+ sold this week"
- Shipping info — "Ships within 24 hours"
Animations
Three animation modes are available for Top & Bottom bars:
Static
A single message displayed with no movement. Best for clear, important announcements that need full readability.
Rotating
Multiple messages rotate (fade or slide) on a timer. Lets you show several promotions in one bar without taking extra space. You can configure the rotation interval (e.g. every 4 seconds).
Running Line (Marquee)
Text scrolls continuously from right to left — classic ticker style. Great for sale events or urgent news. Control the speed to match your design.
Styling & Fonts
Every bar has full visual control:
| Setting | Description |
|---|---|
| Background color | Solid color or gradient (two-color linear gradient) |
| Background image | Upload a custom image as the bar background |
| Text color | Applies to the message text |
| Font family | Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Oswald, Raleway, Playfair Display, Merriweather |
| Font size | Set in pixels (desktop and mobile independently) |
| Font weight | Normal or Bold |
| Text align | Left, Center, Right |
| Padding | Top / Bottom / Left / Right padding inside the bar |
| Emoji support | Add emojis anywhere in your message text |
| HTML in message | Supports basic inline HTML (links, bold, italic) |
Targeting
Show bars only where they are relevant — avoid cluttering every page with every bar.
Page targeting
| Target | Description |
|---|---|
| All pages | Bar appears on every page of the store |
| Home page only | Only the storefront home page |
| Collection pages | All collection listing pages, or specific collections |
| Product pages | All product pages, or specific products by URL handle |
| Cart page | The cart / checkout page |
| Custom pages | Target by specific URL path or pattern |
Display rules
- Start / End date — show the bar only within a date range (see Scheduling)
- Device — show on Desktop only, Mobile only, or both
- Hide on scroll — non-sticky bars can be configured to hide after the user scrolls past a certain point
Coupon Codes
Add a clickable coupon chip inside any bar. When a visitor clicks it, the code is copied to their clipboard automatically.
How to add a coupon
- While editing a bar, enable the Coupon Code toggle.
- Enter your discount code (e.g.
SAVE20). - Optionally customise the chip label (default: "Copy code").
- The coupon chip will appear inline with your bar message.
Scheduling
Set a date range so bars appear and disappear automatically — no manual toggling required.
- Start date — the bar becomes visible from this date/time (your store's timezone)
- End date — the bar is automatically hidden after this date/time
- Leave both blank to run indefinitely
- You can still manually toggle a bar on/off regardless of the schedule
Live Previews
Examples of what announcement bars look like on a real storefront.
Settings Reference
Full list of all configurable fields available when creating or editing an announcement bar.
General
| Field | Type | Description |
|---|---|---|
| Name | Text | Internal label for this bar (not shown to customers) |
| Status | Toggle | Enable or disable the bar without deleting it |
| Bar type | Select | Top/Bottom, Cart page, or Product page |
| Position | Select | Where on the page the bar appears |
Content
| Field | Type | Description |
|---|---|---|
| Message | Rich text | Main announcement text. Supports emoji and basic HTML. |
| Link URL | URL | Makes the entire bar clickable |
| Link target | Select | Open link in same tab or new tab |
| Coupon code | Text | Discount code displayed in a click-to-copy chip |
Appearance
| Field | Type | Description |
|---|---|---|
| Background color | Color picker | Solid background color |
| Gradient | Toggle + colors | Two-color linear gradient background |
| Background image | Image upload | Custom image behind the bar content |
| Text color | Color picker | Color applied to message text |
| Font family | Select | 10 Google Font options |
| Font size | Number (px) | Separate desktop and mobile values |
| Font weight | Select | Normal (400) or Bold (700) |
| Text alignment | Select | Left / Center / Right |
| Padding | 4× number (px) | Top, Right, Bottom, Left internal spacing |
| Height | Number (px) | Min height of the bar container |
Behaviour
| Field | Type | Description |
|---|---|---|
| Sticky | Toggle | Bar scrolls with the page vs. stays fixed at top/bottom |
| Closeable | Toggle | Show dismiss (✕) button |
| Animation type | Select | Static, Rotating, or Marquee |
| Rotation interval | Number (s) | Seconds between rotating messages |
| Marquee speed | Number | Scroll speed for running line animation |
| Start date | Date/time | Bar becomes active from this datetime |
| End date | Date/time | Bar is automatically deactivated after this datetime |
FAQ
2. Confirm the App Embed is enabled in your theme (Shopify Admin → Online Store → Themes → Customize → App embeds).
3. Check that any scheduled start/end dates are correct.
4. Hard-refresh your storefront (Ctrl+Shift+R) to bypass browser cache.
<strong>, <em>, and <a href="..."> are also supported.Support
Need help? We're here for you.
📧 Email Support
Send us a message at support@twigpixel.com and we'll get back to you within 24 hours (Mon–Fri).
💬 In-App Chat
Use the Support section inside the app dashboard to send us a message directly with your store details attached.
⭐ Leave a Review
Enjoying Twig Announcement Bar? A review on the Shopify App Store helps us grow and keeps the app free for everyone.
© 2026 Twig Pixel · Twig Announcement Bar for Shopify