How to add Shopify Announcement bar (without an app)

The Shopify announcement bar is an excellent way to promote a special discount offer, a sale, or another type of promotion at the top of your Shopify store. And there’s no need to pay a monthly fee for this feature. Simply paste a few lines of code into your theme and you’re done.

This free Shopify announcement bar also allows you to display an optional “free shipping countdown,” so customers can always see how close they are to receiving free shipping.

Now these days eCommerce websites have many announcement. So they need to notify user about announcements. Like: –

Highlight a recently released product
Advertise a special or promotion
Weather delay or holiday hours
Promote upcoming new products
Offer a free giveaway or download
Share news about a recent award or certification

Also Read: How to create customizable products in Shopify without an app

Table of Contents

Adding an Shopify announcement bar on store

Step-1. Open the theme editor in Shopify.

Login to you Shopify admin pane, and found the option under Online Store > Themes > Actions > Edit code.

Please refer below screenshot

Step-2. Add a new Section for announcement bar

Take a look in the left-hand sidebar of your theme editor. Click “Add a new section” under the “Sections” header. Enter the name “announcement-bar” in the popup that appears.

Make sure to delete the Shopify default code in your new section. Please refer below image

Step-3. Paste announcement bar code

Select all the below code, then copy and paste the code into your new section.


{% if section.settings.message %}
  {% if section.settings.home_page_only == false or template.name == 'index' %}
  <style>
    .announcement-bar {
      background-color: {{ section.settings.color_bg }};
      text-align:center;
      {% if section.settings.header_padding > 0 %}
        position:absolute;
        top: -{{ section.settings.header_padding }}px !important;
        left:0;
        width:100%;
        z-index:9;
      {% endif %}
    }
    .announcement-bar p {
      padding:10px 0;
      font-size: {{ section.settings.font_size }}px;
      margin:0 !important;
    }
    .announcement-bar__message,
    .announcement-bar--link {
      color: {{ section.settings.color_text }};
    }
    .announcement-bar--link:hover, 
    .announcement-bar--link:hover .announcement-bar__message {
      color: {{ section.settings.color_text_hover }} !important;
    }
    body {
      position:relative;
      top: {{ section.settings.header_padding }}px !important;
    }
  </style>

  {% if section.settings.message_link == blank %}
  <div class="announcement-bar">
    {% else %}
    <a href="{{ section.settings.message_link }}" class="announcement-bar announcement-bar--link">
      {% endif %}

      {% capture shipping_value %}{{ section.settings.free_shipping_threshold | times: 100 }}{% endcapture %}
      {% assign cart_total = cart.total_price %}
      {% assign shipping_value_left = shipping_value | minus: cart_total %}
      {% assign shipping_value_left_money = shipping_value_left | money %}
      {% capture free_shipping_notqualified %}
        {{ section.settings.free_shipping_notqualified | replace: '[price]', shipping_value_left_money }}
      {% endcapture %}
      {% assign free_shipping_qualified = section.settings.free_shipping_qualified %}
      {% assign announcement_message = section.settings.message_text %}
      
      {% if section.settings.free_shipping_countdown %}
        {% if cart.total_price > 0 %}
          {% assign announcement_message = free_shipping_notqualified %}
        {% endif %}
        {% if shipping_value_left <= 0 %}
          {% assign announcement_message = free_shipping_qualified %}
        {% endif %}
      {% endif %}
      
      <p class="announcement-bar__message">{{ announcement_message }}</p>

      {% if section.settings.message_link == blank %}
      </div>
    {% else %}
    </a>
  {% endif %}

  {% endif %}
{% endif %}

<style>
  
</style>

{% schema %}
  {
    "name": "Announcement bar",
    "settings": [
      {
        "type": "header",
        "content": "General"
      },
      {
        "type": "checkbox",
        "id": "message",
        "label": "Show announcement",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "home_page_only",
        "label": "Home page only",
        "default": false
      },
    {
        "type":   "range",
        "id":     "header_padding",
        "min":    0,
        "max":    100,
        "step":   1,
        "unit":   "px",
        "label":  "Header padding",
        "default":   0,
    "info":   "Pushes page content down below announcement bar (only needed on some themes)"
      },
    {
        "type": "header",
        "content": "Content"
      },
      {
        "type": "text",
        "id": "message_text",
        "label": "Text",
        "default": "Announce something here"
      },
    {
        "type": "checkbox",
        "id": "free_shipping_countdown",
        "label": "Show free shipping countdown",
    "info": "Tells the customer how much they need to add to their cart to receive free shipping (only appears when at least one item is in the cart).",
        "default": false
      },
    {
        "type":   "range",
        "id":     "free_shipping_threshold",
        "min":    5,
        "max":    100,
        "step":   1,
        "unit":   "$",
        "label":  "Free shipping threshold",
        "default":   25,
    "info":   "The amount at which customers receive free shipping (must match your shipping settings)."
      },
    {
        "type": "textarea",
        "id": "free_shipping_notqualified",
        "label": "Free shipping (not qualified) message",
        "default": "Add just [price] to your cart to receive free shipping!"
      },
    {
        "type": "textarea",
        "id": "free_shipping_qualified",
        "label": "Free shipping (qualified) message",
        "default": "Your order qualifies for free shipping!"
      },
      {
        "type": "url",
        "id": "message_link",
        "label": "Link",
        "info": "Optional"
      },
    {
        "type": "header",
        "content": "Fonts and colors"
      },
      {
        "type": "color",
        "id": "color_bg",
        "label": "Background color",
        "default": "#333333"
      },
      {
        "type": "color",
        "id": "color_text",
        "label": "Text color",
        "default": "#ffffff"
      },
    {
        "type": "color",
        "id": "color_text_hover",
        "label": "Link hover color",
        "default": "#eeeeee"
      },
    {
        "type":   "range",
        "id":     "font_size",
        "min":    8,
        "max":    36,
        "step":   1,
        "unit":   "px",
        "label":  "Font size",
        "default":   14
      }
    ]
  }
{% endschema %}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

{% if section.settings.message %}

{% if section.settings.home_page_only == false or template.name == 'index' %}

<style>

.announcement-bar {

background-color: {{ section.settings.color_bg }};

text-align:center;

{% if section.settings.header_padding > 0 %}

position:absolute;

top: -{{ section.settings.header_padding }}px !important;

left:0;

width:100%;

z-index:9;

{% endif %}

}

.announcement-bar p {

padding:10px 0;

font-size: {{ section.settings.font_size }}px;

margin:0 !important;

}

.announcement-bar__message,

.announcement-bar--link {

color: {{ section.settings.color_text }};

}

.announcement-bar--link:hover,

.announcement-bar--link:hover .announcement-bar__message {

color: {{ section.settings.color_text_hover }} !important;

}

body {

position:relative;

top: {{ section.settings.header_padding }}px !important;

}

</style>

{% if section.settings.message_link == blank %}

{% else %}

{% endif %}

{% capture shipping_value %}{{ section.settings.free_shipping_threshold | times: 100 }}{% endcapture %}

{% assign cart_total = cart.total_price %}

{% assign shipping_value_left = shipping_value | minus: cart_total %}

{% assign shipping_value_left_money = shipping_value_left | money %}

{% capture free_shipping_notqualified %}

{{ section.settings.free_shipping_notqualified | replace: '[price]', shipping_value_left_money }}

{% endcapture %}

{% assign free_shipping_qualified = section.settings.free_shipping_qualified %}

{% assign announcement_message = section.settings.message_text %}

{% if section.settings.free_shipping_countdown %}

{% if cart.total_price > 0 %}

{% assign announcement_message = free_shipping_notqualified %}

{% endif %}

{% if shipping_value_left <= 0 %}

{% assign announcement_message = free_shipping_qualified %}

{% endif %}

<p class="announcement-bar__message">{{ announcement_message }}</p>

{% if section.settings.message_link == blank %}

</div>

{% else %}

</a>

{% endif %}

<style>

</style>

{% schema %}

{

"name": "Announcement bar",

"settings": [

{

"type": "header",

"content": "General"

{

"type": "checkbox",

"id": "message",

"label": "Show announcement",

"default": false

{

"type": "checkbox",

"id": "home_page_only",

"label": "Home page only",

"default": false

{

"type": "range",

"id": "header_padding",

"min": 0,

"max": 100,

"step": 1,

"unit": "px",

"label": "Header padding",

"default": 0,

"info": "Pushes page content down below announcement bar (only needed on some themes)"

{

"type": "header",

"content": "Content"

{

"type": "text",

"id": "message_text",

"label": "Text",

"default": "Announce something here"

{

"type": "checkbox",

"id": "free_shipping_countdown",

"label": "Show free shipping countdown",

"info": "Tells the customer how much they need to add to their cart to receive free shipping (only appears when at least one item is in the cart).",

"default": false

{

"type": "range",

"id": "free_shipping_threshold",

"min": 5,

"max": 100,

"step": 1,

"unit": "$",

"label": "Free shipping threshold",

"default": 25,

"info": "The amount at which customers receive free shipping (must match your shipping settings)."

{

"type": "textarea",

"id": "free_shipping_notqualified",

"label": "Free shipping (not qualified) message",

"default": "Add just [price] to your cart to receive free shipping!"

{

"type": "textarea",

"id": "free_shipping_qualified",

"label": "Free shipping (qualified) message",

"default": "Your order qualifies for free shipping!"

{

"type": "url",

"id": "message_link",

"label": "Link",

"info": "Optional"

{

"type": "header",

"content": "Fonts and colors"

{

"type": "color",

"id": "color_bg",

"label": "Background color",

"default": "#333333"

{

"type": "color",

"id": "color_text",

"label": "Text color",

"default": "#ffffff"

{

"type": "color",

"id": "color_text_hover",

"label": "Link hover color",

"default": "#eeeeee"

{

"type": "range",

"id": "font_size",

"min": 8,

"max": 36,

"step": 1,

"unit": "px",

"label": "Font size",

"default": 14

}

]

}

{% endschema %}

Now your screen should now look like blow screenshot:

Step-4. Open theme.liquid in your theme editor

Take a look in the left-hand sidebar of your theme editor. You’ll find theme.liquid inside the Layout folder.

Step-5. Add one line of code inside theme.liquid file

Inside theme.liquid, and search for the following code:

{% section ‘header’ %}

It might be called something else depending on your theme, but it probably has the word “header” in it. Some other common names are:

{% section ‘general-header’ %}

{% section ‘dynamic-header’ %}

Just above this code, copy and paste the following:


{% section 'announcement-bar' %}

{% section 'announcement-bar' %}

Refer the below image, updated code should look like this:

Step-6. Open your theme settings and set up your announcement bar

Now open your theme settings (Online Store > Themes > Customize), and you’ll see a new section titled “Announcement bar.” Please refer the below images

Shopify Announcement bar (without an app)

Hey, Now you can set up the announcement message, colors, font size, link, and an option to add promotion content or free shipping countdown.

add Shopify Announcement bar (without an app)

Step-7. Open or Refresh your website

Now open or refresh your website and look the view of Shopify announcement bar.

Step-8. Congratulations!

Congratulations! the announcement bar code is now installed and your new Shopify announcement bar is live!!.

Wrapping Words

Well, This tutorial provide you complete steps to add Shopify Announcement bar (without an app). I hope you found this tutorial helpful for your project. Keep learning!.

Having trouble? Are you want to get implementation help, or modify or extend the functionality of this script? Submit a paid service request

Pradeep Maurya

Pradeep Maurya is the Professional Web Developer & Designer and the Founder of “Tutorials website”. He lives in Delhi and loves to be a self-dependent person. As an owner, he is trying his best to improve this platform day by day. His passion, dedication and quick decision making ability to stand apart from others. He’s an avid blogger and writes on the publications like Dzone, e27.co