Links and Call-to-Actions
Adding a link to your announcement bar turns it from a passive message into an active driver of traffic. Whether you want visitors to shop a sale, view a new collection, or visit a specific page, links give them a clear next step.
Three Link Styles
When you add a link to an announcement, you choose one of three styles that determines how the link appears in the bar.
Button
A pill-shaped button that stands out from the message text. The colors are automatically inverted – your Text Color becomes the button’s background, and your Background Color becomes the button’s text. This contrast makes the button visually distinct and easy to spot.
Setup:
Set your Link Text (e.g., “Shop Now”, “View Collection”, “Get 20% Off”)
Set your Link URL (e.g.,
/collections/sale)
Best for: High-priority calls to action where you want the link to stand out. Sales, product launches, and promotions that need maximum click-through.
Text Link
A traditional underlined text link that appears in the bar’s Text Color. It blends more naturally with the message and feels less aggressive than a button.
Setup:
Set your Link Text (e.g., “Learn More”, “See Details”, “Shop Sale”)
Set your Link URL (e.g.,
/pages/sale-info)
Best for: Informational links, secondary calls to action, or announcements where you want the message to be the focus with a subtle link option.
Entire Bar Clickable
The whole announcement bar becomes one large clickable area. No separate button or link text is shown – the visitor clicks anywhere on the bar to navigate to your URL. The cursor changes to a pointer on hover to signal that the bar is interactive.
Setup:
Set your Link URL (e.g.,
/collections/new-arrivals)Link Text is not needed (the bar itself is the link)
Best for: Simple, clean bars where the message is the call to action. Works well with short, direct messages like “New arrivals are here” or “Shop our biggest sale ever.”
Setting Up a Link
Open the announcement editor
Choose your Link Style: Button, Text Link, or Entire Bar Clickable
For Button or Text Link: enter a Link Text and Link URL
For Entire Bar Clickable: enter only the Link URL
Preview the result and save
Tips for Link URLs:
Use relative URLs starting with
/for pages on your store (e.g.,/collections/all)Use full URLs starting with
https://for external linksAlways test links after publishing to make sure they go to the right page
Positioning Links with the {link} Placeholder
By default, the link or button appears after your message text. If you want to control exactly where it shows up, use the {link} placeholder in your message.
Examples:
Big sale! {link} to save 20%– the button or link text appears between “Big sale!” and “to save 20%”Free shipping on all orders. {link}– same as default, link at the end{link} -- our biggest sale starts now– link appears at the very beginning
Without a {link} placeholder, the link or button is automatically appended after your message text.
The {link} placeholder works with both Button and Text Link styles. It has no effect when using Entire Bar Clickable, since the entire bar is the link.
Choosing the Right Link Style
Consider what action you want visitors to take and how prominent the link should be:
Button when the click is the primary goal. You want high visibility and the announcement exists mainly to drive traffic somewhere. Sales, launches, limited-time offers.
Text Link when the link is secondary to the message. The visitor should read and absorb the message first, with the link as an optional next step. Policy updates, informational announcements.
Entire Bar Clickable when you want a clean, minimal bar with no visual clutter. The message and the action are one and the same. Works best with short, actionable messages.
Combining Links with Multiple Messages
If your announcement bar has multiple messages (using Fade, Running Line, or Typed styles), each message can have its own link. This lets you rotate through different promotions, each pointing to a different page on your store.
When using the Classic style with navigation arrows, visitors can browse between messages and each one shows its own link or button.
Example Setups
Sale with button:
Message: Summer Sale -- Up to 40% Off Everything Link Style: Button Link Text: Shop the Sale Link URL: /collections/sale
Informational with text link:
Message: We've updated our return policy. Link Style: Text Link Link Text: Read the details Link URL: /pages/returns
Clean clickable bar:
Message: New arrivals just dropped -- take a look Link Style: Entire Bar Clickable Link URL: /collections/new-arrivals
Inline link placement:
Message: Free shipping on all orders. {link} before midnight!
Link Style: Button
Link Text: Shop Now
Link URL: /collections/all
Common Questions
Can I open the link in a new tab? Links open in the same tab by default. This follows standard e-commerce navigation patterns and keeps visitors within your store flow.
Do links work with countdown timers? Yes. You can combine any link style with a countdown announcement. The link and the timer display together in the bar.
Can I link to an external website? Yes. Use a full URL starting with https:// (e.g., https://example.com/page). Relative URLs starting with / are for pages within your own store.