The announcement-bar of the origin debut theme is static, and only has one to be edited. I want to add a multi-announcement-bar for shopify debut theme without using any app. What should i do to customize the code?
1 Like
Hi, Ponny!
Here is a guide for you to customize you debut theme achieving that feature, just need to edit some code in “header.liquid”:
- Open your debut theme file “header.liquid”
- Go to the “https://[xxxxxx].myshopify.com/admin/themes”
- Find the debut theme you want to edit, “Actions”–>“Edit code”, then go to “Sections” folder and you will find the “header.liquid” file, click to open it.
2. Edit the “header.liquid” file
There are two sections you need to change, and i have tagged in the following code as “{------------ the first section you need to change ------------}” and “{------------ the second section you need to change ------------}”:
header.liquid
{% if section.settings.message %}
{% endif %}
{% include 'search-drawer' %}
{% if section.settings.message %}
{% if section.settings.home_page_only == false or request.page_type == 'index' %}
{------------ the first section you need to change ------------}
{% endif %}
{% endif %}
- copy the following code to change "{------------ the first section you need to change ------------}"
```markup
{% for block in section.blocks %}
{% if block.type == 'annoucement' %}
{%- unless block.settings.message_link == blank -%}
{%- endunless -%}
{{ block.settings.message_text }}
{%- unless block.settings.message_link == blank -%}
{%- endunless -%}
{% endif %}
{% endfor %}
- copy the following code to change “{------------ the second section you need to change ------------}”
{
"name": {
"cs": "Záhlaví",
"da": "Overskrift",
"de": "Titel",
"en": "Header",
"es": "Encabezado",
"fi": "Ylätunniste",
"fr": "En-tête",
"it": "Header",
"ja": "ヘッダー",
"ko": "헤더",
"nb": "Header",
"nl": "Koptekst",
"pl": "Nagłówek",
"pt-BR": "Cabeçalho",
"pt-PT": "Cabeçalho",
"sv": "Rubrik",
"th": "ส่วนหัว",
"tr": "Üstbilgi",
"vi": "Đầu trang",
"zh-CN": "标头",
"zh-TW": "標頭"
},
"settings": [
{
"type": "radio",
"id": "align_logo",
"label": {
"cs": "Zarovnání loga",
"da": "Logojustering",
"de": "Logo-Ausrichtung",
"en": "Logo alignment",
"es": "Alineación de logo",
"fi": "Logon tasaus",
"fr": "Alignement du logo",
"it": "Allineamento logo",
"ja": "ロゴアラインメント",
"ko": "로고 정렬",
"nb": "Logojustering",
"nl": "Logo-uitlijning",
"pl": "Wyrównanie logo",
"pt-BR": "Alinhamento do logo",
"pt-PT": "Alinhamento do logótipo",
"sv": "Logojustering",
"th": "การจัดวางโลโก้",
"tr": "Logo hizalaması",
"vi": "Căn chỉnh logo",
"zh-CN": "logo 对齐方式",
"zh-TW": "商標對齊"
},
"default": "left",
"options": [
{
"value": "left",
"label": {
"cs": "Doleva",
"da": "Venstre",
"de": "Links",
"en": "Left",
"es": "Izquierda",
"fi": "Vasen",
"fr": "Gauche",
"it": "Sinistra",
"ja": "左",
"ko": "왼쪽",
"nb": "Venstre",
"nl": "Links",
"pl": "Do lewej",
"pt-BR": "Esquerda",
"pt-PT": "Esquerda",
"sv": "Vänster",
"th": "ด้านซ้าย",
"tr": "Sol",
"vi": "Bên trái",
"zh-CN": "左侧",
"zh-TW": "左方"
}
},
{
"value": "center",
"label": {
"cs": "Na střed",
"da": "Centreret",
"de": "Mittig",
"en": "Centered",
"es": "Centrada",
"fi": "Keskitetty",
"fr": "Centré",
"it": "Centrato",
"ja": "中央揃え",
"ko": "센터 맞추기",
"nb": "Sentrert",
"nl": "Gecentreerd",
"pl": "Wyśrodkowane",
"pt-BR": "Centralizado",
"pt-PT": "Centrado",
"sv": "Centrera",
"th": "ตรงกลาง",
"tr": "Orta",
"vi": "Giữa",
"zh-CN": "居中",
"zh-TW": "置中"
}
}
]
},
{
"type": "image_picker",
"id": "logo",
"label": {
"cs": "Obrázek loga",
"da": "Logobillede",
"de": "Logo-Foto",
"en": "Logo image",
"es": "Logo",
"fi": "Logokuva",
"fr": "Image du logo",
"it": "Immagine del logo",
"ja": "ロゴ画像",
"ko": "로고 이미지",
"nb": "Logobilde",
"nl": "Afbeelding van logo",
"pl": "Obraz logo",
"pt-BR": "Imagem do logo",
"pt-PT": "Imagem do logótipo",
"sv": "Logobild",
"th": "รูปภาพโลโก้",
"tr": "Logo görseli",
"vi": "Hình ảnh logo",
"zh-CN": "logo 图片",
"zh-TW": "標誌圖片"
}
},
{
"type": "range",
"id": "logo_max_width",
"label": {
"cs": "Šířka vlastního loga",
"da": "Tilpasset logobredde",
"de": "Logobreite",
"en": "Custom logo width",
"es": "Ancho del logo personalizado",
"fi": "Mukautetun logon leveys",
"fr": "Largeur personnalisée du logo",
"it": "Larghezza logo personalizzato",
"ja": "ロゴの幅をカスタマイズする",
"ko": "사용자 지정 로고 폭",
"nb": "Tilpasset logobredde",
"nl": "Aangepaste logo-breedte",
"pl": "Niestandardowa szerokość logo",
"pt-BR": "Largura do logo personalizado",
"pt-PT": "Largura de logótipo personalizada",
"sv": "Anpassad logotypsbredd",
"th": "ความกว้างของโลโก้แบบกำหนดเอง",
"tr": "Özel logo genişliği",
"vi": "Chiều rộng logo tùy chỉnh",
"zh-CN": "自定义 logo 宽度",
"zh-TW": "自訂商標寬度"
},
"min": 50,
"max": 250,
"step": 5,
"unit": "px",
"default": 100
},
{
"type": "link_list",
"id": "main_linklist",
"label": {
"cs": "Nabídka",
"da": "Menu",
"de": "Menü",
"en": "Menu",
"es": "Menú",
"fi": "Valikko",
"fr": "Menu",
"it": "Menu",
"ja": "メニュー",
"ko": "메뉴",
"nb": "Meny",
"nl": "Menu",
"pl": "Menu",
"pt-BR": "Menu",
"pt-PT": "Menu",
"sv": "Meny",
"th": "เมนู",
"tr": "Menü",
"vi": "Menu",
"zh-CN": "菜单",
"zh-TW": "選單"
},
"default": "main-menu"
},
{
"type": "header",
"content": {
"cs": "Panel oznámení",
"da": "Meddelelseslinje",
"de": "Ankündigungsbereich",
"en": "Announcement bar",
"es": "Barra de anuncios",
"fi": "Ilmoituspalkki",
"fr": "Barre d'annonces",
"it": "Barra degli annunci",
"ja": "告知バー",
"ko": "공지 표시줄",
"nb": "Kunngjøringslinje",
"nl": "Aankondigingsbalk",
"pl": "Pasek ogłoszeń",
"pt-BR": "Barra de avisos",
"pt-PT": "Barra de comunicado",
"sv": "Meddelandefält",
"th": "แถบประกาศ",
"tr": "Duyuru çubuğu",
"vi": "Thanh thông báo",
"zh-CN": "公告栏",
"zh-TW": "公告列"
}
},
{
"type": "checkbox",
"id": "message",
"label": {
"en": "Show announcement",
"zh-CN": "显示公告"
},
"default": false
},
{
"type": "checkbox",
"id": "home_page_only",
"label": {
"en": "Home page only",
"zh-CN": "仅主页"
},
"default": true
}
],
"blocks": [
{
"type": "annoucement",
"name": "Annoucement Bar",
"settings": [
{
"type": "richtext",
"id": "message_text",
"label": {
"en": "Rich Text",
"zh-CN": "富文本"
},
"default": {
"en": "
Announce something here
",
"zh-CN": "
在此处进行公告
"
}
},
{
"type": "url",
"id": "message_link",
"label": {
"en": "Link",
"zh-CN": "链接"
},
"info": {
"en": "Optional",
"zh-CN": "可选"
}
},
{
"type": "color",
"id": "color_bg",
"label": {
"en": "Background",
"zh-CN": "背景"
},
"default": "#3a3a3a"
},
{
"type": "color",
"id": "color_text",
"label": {
"en": "Text",
"zh-CN": "文本"
},
"default": "#ffffff"
}
]
}
]
}
3. Now the code is finished, go to the the theme customize you theme.
 and the final effect is like this：
Hope this will be helpful for you.
3 Likes
Thanks, Aliven 
. It’s very helpful, and just what i want! 
Hey Ponny, I see what you’re saying and I think it’s great. A good announcement bar can help you incentivize your visitors to buy more by triggering Flash sales and Promo codes especially for them or customize your communication according to your visitor’s origin (Facebook, TikTok, Instagram, Email) or basically any other logic you can think of!..
We are building a Shopify App exactly for this! Click here to see all the features: https://bit.ly/3dxdEae
We’d love to have you try our app for free! Please add your email to the Early Access box or email me at fernanda@shopifica.com for more details, happy to chat more! Thank you.
Is anybody facing issues with mobile view while using this code ?
Wow, this is great. It seems to only load in after the whole page has finished loading tho. Is there anything that can be done to make it load with the header? I fear visitors might scroll down before it’s even loaded.
hi @Aliven when i goto customize theme it returns the following error:
Any solution to this issue ?
thanks
RJ
