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
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.
|
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 %} <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 %} |
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:
|
2 3 4 |
{% 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
Hey, Now you can set up the announcement message, colors, font size, link, and an option to add promotion content or free shipping countdown.
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 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
