If you already own a Shopify store or plan on creating one just now, you will need a way to inform your customers about important matters in a non-intrusive way, but at the same time placed on top of everything so anyone can notice.
Such a place is the so-called announcement bar at the top of the website. Some themes may already have this feature implemented and it is just a matter of adding some text to it, but this article will explain how you can add it if your theme does not have this feature.
Of course you can choose an app from the Shopify Appstore to do this for you, but for such a small and simple feature I do not recommend installing any additional apps since that will impact the store's speed and performance
This guide will help you create a simple announcement bar that will work with any theme structure or configuration. Also this guide requires editing the theme's code so before venturing onwards, please make sure to make a backup of the theme, or simply create a duplicate and work on that.
Implementation
First step is creating a new section:
- Assuming you are already logged in the Shopify admin, go to Actions>Edit code
- Select "Add a new section" from the Sections folder
- Name the new section (eg. announcement-bar )
- Copy the code from the end of this article and paste it inside the newly created section file
Second step is including the new section on the storefront:
- In the code editor go to Layout > theme.liquid file
- Scroll down and look for the body opening tag ( <body> )
- Right after it place the following line: {%- section 'announcement-bar' -%}, or replace 'announcement-bar' with the name you chose when creating the section
- Save
The third and final step is to initialise the new section and announce something:
- Close the code editor and select "Customize"
- On the left sidebar you will now notice a new section called "Announcement Bar". Click on it.
- Toggle between showing the bar or not
- Toggle for displaying the bar on the homepage only, or all the pages
- Type in the text to display
- Optionally choose a link for the bar
- Choose the colours for the background and text
- Save
Troubleshooting
If the bar does not show up at all, make sure the {%- section 'announcement-bar' -%} is present in the theme.liquid file and the asset is saved.
If the bar shows up lower than the top of the page, for example under the menu, make sure to include the section higher in the theme.liquid file.
For other cases, you can contact me and I will provide a solution.
The code:
{% if section.settings.show_announcement %}
{% if section.settings.home_page_only == false or request.page_type == 'index' %}
<style>
.announcement-bar {
background-color: {{ section.settings.color_bg }};
text-align: center;
position: relative;
z-index: 10;
}
.announcement-bar--link:hover {
{% assign brightness = section.settings.color_bg | color_brightness %}
{% if brightness <= 192 %}
{% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %}
background-color: {{ section.settings.color_bg | color_lighten: lightenAmount }};
{% else %}
{% assign darkenAmount = 255 | divided_by: brightness | times: 8 %}
background-color: {{ section.settings.color_bg | color_darken: darkenAmount }};
{% endif %}
}
.announcement-bar__message {
color: {{ section.settings.color_text }};
display: block;
font-size: 1em;
font-weight: 600;
padding: 10px 22px;
}
</style>
{% if section.settings.link == blank %}
<div class="announcement-bar">
{% else %}
<a href="{{ section.settings.link }}" class="announcement-bar announcement-bar--link">
{% endif %}
<p class="announcement-bar__message">{{ section.settings.text | escape }}</p>
{% if section.settings.link == blank %}
</div>
{% else %}
</a>
{% endif %}
{% endif %}
{% endif %}
{% schema %}
{
"name": "Announcement Bar",
"settings": [
{
"type": "header",
"content": {
"da": "Meddelelseslinje",
"de": "Ankündigungsleiste",
"en": "Announcement bar",
"es": "Barra de anuncios",
"fi": "Ilmoituspalkki",
"fr": "Barre d'annonces",
"hi": "घोषणा बार",
"it": "Barra degli annunci",
"ja": "告知バー",
"ko": "공지 표시줄",
"ms": "Bar pengumuman",
"nb": "Kunngjøringslinje",
"nl": "Aankondigingsbalk",
"pt-BR": "Barra de anúncio",
"pt-PT": "Barra de comunicado",
"sv": "Meddelandefält",
"th": "แถบประกาศ",
"zh-CN": "公告栏",
"zh-TW": "公告列"
}
},
{
"type": "checkbox",
"id": "show_announcement",
"label": {
"da": "Vis meddelelse",
"de": "Ankündigung anzeigen",
"en": "Show announcement",
"es": "Mostrar anuncio",
"fi": "Näytä ilmoitus",
"fr": "Afficher l'annonce",
"hi": "घोषणा डिखाएं",
"it": "Mostra annuncio",
"ja": "告知を表示する",
"ko": "공지 표시",
"ms": "Tunjukkan pengumuman",
"nb": "Vis kunngjøring",
"nl": "Aankondiging weergeven",
"pt-BR": "Exibir anúncio",
"pt-PT": "Mostrar comunicado",
"sv": "Visa tillkännagivande",
"th": "แสดงประกาศ",
"zh-CN": "显示公告",
"zh-TW": "顯示公告"
},
"default": false
},
{
"type": "checkbox",
"id": "home_page_only",
"label": {
"da": "Kun startside",
"de": "Nur Startseite",
"en": "Home page only",
"es": "Solo página de inicio",
"fi": "Vain kotisivu",
"fr": "Page d'accueil uniquement",
"hi": "केवल होमपेज",
"it": "Solo home page",
"ja": "ホームページのみ",
"ko": "홈페이지만",
"ms": "Halaman utama sahaja",
"nb": "Kun på startsiden",
"nl": "Alleen startpagina",
"pt-BR": "Apenas na página inicial",
"pt-PT": "Apenas a página inicial",
"sv": "Endast hemsida",
"th": "หน้าแรกเท่านั้น",
"zh-CN": "仅主页",
"zh-TW": "僅限首頁"
},
"default": true
},
{
"type": "text",
"id": "text",
"label": {
"da": "Tekst",
"de": "Text",
"en": "Text",
"es": "texto",
"fi": "Teksti",
"fr": "Texte",
"hi": "टेक्स्ट",
"it": "Testo",
"ja": "テキスト",
"ko": "텍스트",
"ms": "Teks",
"nb": "Tekst",
"nl": "Tekst",
"pt-BR": "Texto",
"pt-PT": "Texto",
"sv": "Text",
"th": "ข้อความ",
"zh-CN": "文本",
"zh-TW": "文字"
},
"default": {
"da": "Meddel noget her",
"de": "Hier Ankündigung platzieren",
"en": "Announce something here",
"es": "Anuncia algo aquí",
"fi": "Ilmoita jotakin tässä",
"fr": "Annoncer quelque chose ici",
"hi": "यहां कुछ घोषित करें",
"it": "Annuncia qualcosa qui",
"ja": "ここで告知してください",
"ko": "여기에 공지하십시오",
"ms": "Mengumumkan sesuatu di sini",
"nb": "Kunngjør noe her",
"nl": "Kondig hier iets aan",
"pt-BR": "Anuncie algo aqui",
"pt-PT": "Anunciar algo aqui",
"sv": "Meddela något här",
"th": "ประกาศข้อความที่นี่",
"zh-CN": "在此处进行公告",
"zh-TW": "在此公告資訊"
}
},
{
"type": "url",
"id": "link",
"label": {
"da": "Link",
"de": "Link",
"en": "Link",
"es": "Enlace",
"fi": "Linkki",
"fr": "Lien",
"hi": "लिंक",
"it": "Link",
"ja": "リンク",
"ko": "링크",
"ms": "Pautan",
"nb": "Kobling",
"nl": "Link",
"pt-BR": "Link",
"pt-PT": "Ligação",
"sv": "Länk",
"th": "ลิงก์",
"zh-CN": "链接",
"zh-TW": "連結"
}
},
{
"type": "color",
"id": "color_bg",
"label": {
"da": "Bjælke",
"de": "Leiste",
"en": "Bar",
"es": "Barra",
"fi": "Palkki",
"fr": "Barre",
"hi": "बार",
"it": "Barra",
"ja": "バー",
"ko": "바",
"ms": "Bar",
"nb": "Felt",
"nl": "Balk",
"pt-BR": "Barra",
"pt-PT": "Barra",
"sv": "Fält",
"th": "แถบ",
"zh-CN": "栏",
"zh-TW": "橫條"
},
"default": "#1c1d1d"
},
{
"type": "color",
"id": "color_text",
"label": {
"da": "Tekst",
"de": "Text",
"en": "Text",
"es": "texto",
"fi": "Teksti",
"fr": "Texte",
"hi": "टेक्स्ट",
"it": "Testo",
"ja": "テキスト",
"ko": "텍스트",
"ms": "Teks",
"nb": "Tekst",
"nl": "Tekst",
"pt-BR": "Texto",
"pt-PT": "Texto",
"sv": "Text",
"th": "ข้อความ",
"zh-CN": "文本",
"zh-TW": "文字"
},
"default": "#fff"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}