Announcement Bar

This guide shows how to quickly add targeted, customizable announcement bars to customer account pages so you can highlight promotions, coupon codes, or important updates. It explains setting visibility (active, page/position, customer tags), styling and message types, and adding optional buttons for links or copy-to-clipboard actions. Follow it to create timely, contextual notices that drive engagement or deliver critical info.

Ezra Miller
4 steps
41 seconds

Run

Shopify

Announcement Bar Overview

Want to add an announcement bar to the top or the bottom of the customer account page, to let your customers know about upcoming offers, coupon codes, or simply to communicate changes or where something can be found. The C:Hub app can easily add announcement bars to to the '**For You**', '**Orders**', or '**Profile**' page with ease.

Add Announcement Bar

Click "**+ Add Announcement**" in the sidebar. And a new, blank announcement bar, will be added to the top of the 'For You' page, ready to be configured.

Configure Announcemnt Bar

After clicking the '**+ Add Announcemnt**' button, you'll see, inside of the builder, that your new announcement bar car be configured. Inside of this section, you'll see the: - **Active (show this announcement)** - tick box, which is automatically set to on by default. However unticking this, will turn the announcement bar off and will no longer be visible on the customer account page. - **Title (Internal Reference)** - A text field that allows you to change the name of your announcement, this is to easily keep track of which announcement is for what. This title is not visible to customers. - **Type** - A drop down selector to allow you to choose the 'type' of announcement bar you're making. You can select from '**Standard**', '**info**', '**success**', '**alert**', 'warning'. These simply change the color of the announcement bar (These colors can all be changed from the '**style & colors**' tab, under the '**Notification/Status Colors**' section: - **Standard - White** - **Info - Blue** - **Success - Green** - **Alert - Red** - **Warning - Yellow** - **Message** - The text you'd like to display on the announcment. For example, alerting customers to a coupon code they can use, or important date or upcoming changes. Announcement text (supports HTML: strong, b, i, u tags).

- **Action Button Type** - A drop down that allows you to add a button to the announcement bar, by default this is set to '**none**', but you can select '**link**' to add two new fields: - **Button Text** - Where you can add the text you'd like displayed on the button you're added - **Link URL** - Where you can add the link/url you'd like the button to take the customer to when clicked - **Action Button Type** - Also allows you to choose 'Copy Text' which also adds two new fields: - **Button Text** - Where you can add the text you'd like displayed on the button you're added - **Text to Copy** - This is where you enter in the text you'd like copied. For example, you might add a button that says 'Click to copy coupon code!' and when clicked, a coupon code is copied. - **Position** - Below the '**Action Button Type**' is where you select the position of the announcement bar, you can select from the 'top' or the 'bottom', which moved the announcement bar to the top or the bottom of the page. - **Only Show to Customers Tagged** - Where you can add customer tags, to only display the announcement bar to customers with the coresponding tag on their account (controlled through the Shopify admin portal under the 'Customers' tab) - **Display on pages** - This is where you can select where you'd like the announcement bar to be displayed, you can choose to add it to, 1 or many, or all, or none of the: - **For you page** - **Order Search (Order page)** - **Order Detail (Order details page)** - **Profile page**