Create an Announcement Bar on Shopify

Table of Contents
You are here:

A Shopify Announcement Bar is a popular way to motivate your customers to purchase. You can create a sense of urgency with special promotions and discounts, offer free shipping, or announce new products and collections.

This tutorial covers everything you need to know in order to create an announcement bar (also called header bar) on Shopify in a few minutes. No coding required.

Basic Configuration

  1. Enter your Juvico App or Install Juvico if you haven’t already.
  2. Create a new Announcement Bar campaign from the Juvico homepage or the campaigns page.

Option 1 & 2 – Setting a Simple Announcement Bar Message

The basic announcement bar behavior is to display a simple message. In order to use it, choose the Announcement with/without action to use it. When used with action, you can specify a URL to be followed when clicked.

Option 3 – Setting a Free Shipping bar

  1. Select “Free Shipping” for the Behavior field.
  2. Condition field should be set to “Minimum purchase amount”.
  3. Set the Minimum Purchase Amount that should qualify a customer for FREE Shipping in the respective field.
  4. In addition, you have to set a matching shipping rate through Shopify Admin based on Shopify free shipping rate guide.

Setting a Dynamic Discount bar

  1. Select “Promotion Code / Discount” for the Behavior field.
  2. Discount Code field should be populated with a discount code created through the Juvico App. Discount can include discounts based on amount, percentage and free shipping. It can be made conditional if the user meets certain requirements.

Theme and Style Customization

Select a theme that suits your site spirit and style, as well as holiday and shopping day based themes.

You can select and customize the following:

  1. Size – Choose Announcement Bar Size (reflected in mostly in bar height).
  2. Theme – Choose gradients, patterns, holiday, and shopping day themes.
  3. Position – use automatic positions as “top”, “top (Sticky)” bars, etc. or choose “manual position” to place the announcement bar wherever you want in your template.
  4. Font – choose from a variety of popular fonts.
  5. Choose a different Text color to override the theme default.
  6. Choose a background color to override the theme completely. 
Shopify announcement bar themes and styles.

Dynamic Content

If you choose either behavior of type “free shipping” or “discount”, and also set conditions for qualification, the content form will become responsive. Each of the 3 text fields will include a dynamic message displayed to the user based on their qualification status:

  1. Initial Message – the message will appear as long as the user’s cart is empty.
  2. Ongoing Message – the message will show after the customer added something to the cart, but before qualification conditions were met. The message will include the remaining amount (or items quantity) the user needs to add in order to qualify for the benefit.
  3. Achieved Goal Message – the message will show once the total cart value exceeds the minimum required amount to qualify for the benefit.
Dynamic content changes based on cart value (Free Shipping bar example)