How to add a button or link to your Shopify announcement bar

Why give your bar a link

An announcement without a next step leaves shoppers to find the sale or the policy on their own. A link turns the bar into a shortcut: from "Spring sale is live" straight to the sale collection, or from "Free returns" to the returns page.

There are two ways to do it, and they suit different messages:

Your options on Shopify

Many themes let you add a link to their built-in announcement bar in the theme editor, which usually makes the text clickable. A separate styled button is less common in theme bars. See Customizing themes for how to edit your theme's header sections.

With Nexora Announcement Bar you can choose between a styled button and a fully clickable bar per bar (or per slide in a rotating bar), and see how many shoppers click in Analytics.

Step by step: add a button

1. Open the bar

   In Announcement bar, click the bar's name or New announcement.

2. Choose Button

   In the Call to action card, set Call to action to Button.

3. Write the button text

   Enter Button text, up to 30 characters. Short verbs work well: "Shop now", "See the sale", "Learn more".

4. Add the link

   Enter a Link. Use a store path such as /collections/sale or /pages/returns, or a full address starting with https://.

5. Style the button

   On Design, the Button card sets Button background, Button text size and color (with bold), Corner radius (px), Padding (Top & bottom, Left & right) and Spacing from title.

6. Save

   Click Save, or Publish if the bar isn't live yet.

To make the whole bar a link instead, choose Make entire bar clickable and enter only the Link. There's no button text to fill in.

Call to action settings by bar type

Example: a new collection launch

• Title: "The Autumn Collection is here"
• Call to action: Button, Button text "Explore", Link /collections/autumn
• Button card: Button background in a contrasting colour, text bold, Corner radius (px) 20 for a pill shape
• Spacing from title: a small gap so the button sits close to the message
• Placement: Every page except the autumn collection itself, using Specific URLs under Exclude specific pages with /collections/autumn

Excluding the destination page means shoppers already on it aren't shown a button that sends them to the page they're on.

Writing button text that gets clicked

• Start with a verb: "Shop", "See", "Get", "Explore".
• Match the destination: "See the sale" should open the sale, not the home page.
• Keep it to two or three words, well inside the 30-character limit, so the button stays compact on small screens.
• Avoid vague labels such as "Click here", which say nothing about where the link goes.

More link ideas

A link doesn't have to point to a collection. Besides store paths and https:// addresses, Link accepts mailto: and tel: links, so a button can start an email or a phone call.

In the last row, the copy button next to the code and the Shop the sale button are separate actions. Copying the code doesn't open the link, and each one counts as a click in Analytics.

If the button or link doesn't work

• The button says "Shop now!": Button text is empty, so the bar falls back to that wording. Enter your own text and save.
• Nothing happens on click: the Link field is empty. The button still shows, but it has nowhere to go. A bar set to Make entire bar clickable with no link isn't clickable at all.
• The link was cleared: only store paths, http:// and https:// addresses, mailto: and tel: links are allowed. Anything else, such as a javascript: link, is removed for safety.
• Clicking the code or the X didn't follow the link: that's intended. On a clickable bar, the coupon copy button and the close icon do their own job; clicks anywhere else on the bar open the link.
• Rotating bar opens the wrong page: on a clickable rotating bar, the arrows only change slides, and a click on the bar uses the link of the slide that is showing at that moment.

Tips and common mistakes

• Test the link after publishing. A typo in the path leads to a 404 page.
• Make the button stand out: a button the same colour as the bar is easy to miss. Pick a contrasting Button background.
• Translate the button: when you add a translation, you can change Button text and, if needed, the Link for that language. Leave Link empty to keep the default.
• Measure it: Clicks in Analytics counts clicks on the button or the clickable bar, plus coupon copies. CTR is clicks divided by impressions.
• Close icon and clickable bars: the close icon still works on a clickable bar, so shoppers can dismiss it without following the link.

Frequently asked questions