A user seeks help repositioning the announcement bar below the header (instead of above it) in Shopify’s Minimal theme. They followed a tutorial to create an announcement-bar.liquid section, but it appears at the top of the header and cannot be dragged to the desired position through the theme editor.
Key Technical Details:
Proposed Solution:
A helper (@dmwwebartisan) provided a screenshot showing the fix: moving the {% section 'announcement-bar' %} line in theme.liquid to appear after the {% section 'header' %} line, rather than before it.
Current Status:
Hello,
Can anyone help me to move the announcement bar and place it under the header in a minimal theme?
I created an “announcement bar.liquid” in “theme sections” following the steps mentioned on this website.
So it appears at the top of the header, and I can’t move it anywhere else.
I need this for both mobile and desktop versions. Check my website.
Thanks in advance,
Rii
Hey @Rii ,
If you followed the above tutorial then check the last screenshot given. You can drag and drop the annocement bar section below the header.
Hey @dmwwebartisan ,
Thank you for your reply.
You get me wrong, my friend.
If you visit my website, you will see that the announcement bar already configured. The problem is that I can’t put it below the header section above the logo.
Also, there is no way to drag this section under the heading as you showed on the picture. And that won’t solve my problem. Code revision needed.
@Rii ,
Yes, you are right. Code revision needed. You have to check the code of header liquid and do changes ( move code) accordingly.
Thanks!
I can’t do it myself, that’s why I’m asking for help.
Hi @dmwwebartisan ,
Thank you for your response.
This is the header.liquid code:
{% if section.settings.show_announcement or section.settings.header_search_enable %}
{% comment %}
Add social links to header
{% endcomment %}
{% comment %}
{% include 'social-links' %}
{% endcomment %}
{% if section.settings.show_announcement %}
{% if section.settings.announcement_link != blank %}
{% endif %}
{{ section.settings.header_text | escape }}
{% if section.settings.announcement_link != blank %}
{% endif %}
{% elsif section.settings.header_search_enable %}
{% include 'search-bar' with 'header' %}
{% endif %}
{% endif %}
{% if shop.customer_accounts_enabled %}
{% if customer %}
-
{% else %}
-
{% endif %}
{% endif %}
{% unless cart.item_count == 0 %}{% endunless %}
{{ cart.item_count }}
{% if section.settings.header_search_enable %}
{% if section.settings.show_announcement %}
{% endif %}
{% endif %}
{% if section.settings.show_announcement %}
{% if section.settings.announcement_link != blank %}
{% endif %}
{{ section.settings.header_text | escape }}
{% if section.settings.announcement_link != blank %}
{% endif %}
{% endif %}
{% unless section.settings.nav_menu == blank and section.settings.header_search_enable == false and shop.customer_accounts_enabled == false %}
{% endunless %}
{{ 'layout.cart.title' | t }} {{ cart.item_count }}
{% include 'mobile-nav' with linklists[section.settings.nav_menu] %}
{% schema %}
{
"name": {
"da": "Overskrift",
"de": "Titel",
"en": "Header",
"es": "Encabezado",
"fi": "Ylätunniste",
"fr": "En-tête",
"hi": "हैडर",
"it": "Header",
"ja": "ヘッダー",
"ko": "헤더",
"nb": "Header",
"nl": "Koptekst",
"pt-BR": "Cabeçalho",
"pt-PT": "Cabeçalho",
"sv": "Rubrik",
"th": "ส่วนหัว",
"zh-CN": "标头",
"zh-TW": "標頭"
},
"settings": [
{
"type": "checkbox",
"id": "header_search_enable",
"label": {
"da": "Vis søgelinje",
"de": "Suchleiste anzeigen",
"en": "Show search bar",
"es": "Mostrar barra de búsqueda",
"fi": "Näytä hakupalkki",
"fr": "Afficher la barre de recherche",
"hi": "सर्च बार दिखाएं",
"it": "Mostra barra di ricerca",
"ja": "検索バーを表示する",
"ko": "검색 바 표시",
"nb": "Vis søkefelt",
"nl": "Zoekbalk weergeven",
"pt-BR": "Exibir barra de pesquisa",
"pt-PT": "Mostrar barra de pesquisa",
"sv": "Visa sökfältet",
"th": "แสดงแถบการค้นหา",
"zh-CN": "显示搜索栏",
"zh-TW": "顯示搜尋列"
}
},
{
"type": "image_picker",
"id": "logo",
"label": {
"da": "Logo",
"de": "Logo",
"en": "Logo",
"es": "Logo",
"fi": "Logo",
"fr": "Logo",
"hi": "लोगो",
"it": "Logo",
"ja": "ロゴ",
"ko": "로고",
"nb": "Logo",
"nl": "Logo",
"pt-BR": "Logotipo",
"pt-PT": "Logótipo",
"sv": "Logotyp",
"th": "โลโก้",
"zh-CN": "logo",
"zh-TW": "商標"
},
"info": {
"da": "450 x 200 pixel anbefales",
"de": "450 x 200 Pixel empfohlen",
"en": "450 x 200px recommended",
"es": "450 x 200px recomendado",
"fi": "Suositus 450 x 200px",
"fr": "450 x 200 px recommandé",
"hi": "450 x 200px की अनुशंसा की जाती है",
"it": "450 x 200 px consigliato",
"ja": "450 x 200ピクセルを推奨",
"ko": "450x200 픽셀 권장",
"nb": "450 x 200 px anbefales",
"nl": "450 x 200 px aanbevolen",
"pt-BR": "450 x 200 px recomendado",
"pt-PT": "450 x 200 píxeis (recomendado)",
"sv": "450 x 200px rekommenderas",
"th": "แนะนำขนาด 450 x 200 พิกเซล",
"zh-CN": "推荐使用 450 x 200 像素大小",
"zh-TW": "建議使用 450 x 200px"
}
},
{
"type": "text",
"id": "logo_max_width",
"label": {
"da": "Tilpasset logobredde (i pixels)",
"de": "Benutzerdefinierte Logobreite (Pixel)",
"en": "Custom logo width (in pixels)",
"es": "Ancho del logo personalizado (en píxeles)",
"fi": "Mukautettu logon leveys (pikseleinä)",
"fr": "Largeur personnalisée du logo (en pixels)",
"hi": "कस्टम लोगो की चौड़ाई (पिक्सेल)",
"it": "Larghezza logo personalizzato (in pixel)",
"ja": "ロゴの幅をカスタマイズする (ピクセル単位)",
"ko": "사용자 지정 로고 폭 (픽셀)",
"nb": "Tilpasset logobredde (i piksler)",
"nl": "Aangepaste logobreedte (in pixels)",
"pt-BR": "Largura do logotipo personalizado (em pixels)",
"pt-PT": "Largura de logótipo personalizada (em píxeis)",
"sv": "Anpassad logotypbredd (i pixlar)",
"th": "ความกว้างของโลโก้แบบกำหนดเอง (เป็นพิกเซล)",
"zh-CN": "自定义 logo 宽度（像素）",
"zh-TW": "自訂標誌寬度 (單位為像素)"
},
"default": {
"da": "450",
"de": "450",
"en": "450",
"es": "450",
"fi": "450",
"fr": "450",
"hi": "450",
"it": "450",
"ja": "450",
"ko": "450",
"nb": "450",
"nl": "450",
"pt-BR": "450",
"pt-PT": "450",
"sv": "450",
"th": "450",
"zh-CN": "450",
"zh-TW": "450"
}
},
{
"type": "header",
"content": {
"da": "Hovedmenu",
"de": "Hauptmenü",
"en": "Main menu",
"es": "Menú principal",
"fi": "Päävalikko",
"fr": "Menu principal",
"hi": "मुख्य मेनू",
"it": "Menu principale",
"ja": "メインメニュー",
"ko": "주 메뉴",
"nb": "Hovedmeny",
"nl": "Hoofdmenu",
"pt-BR": "Menu principal",
"pt-PT": "Menu principal",
"sv": "Huvudmeny",
"th": "เมนูหลัก",
"zh-CN": "主菜单",
"zh-TW": "主選單"
}
},
{
"type": "link_list",
"id": "nav_menu",
"label": {
"da": "Menu",
"de": "Menü",
"en": "Menu",
"es": "Menú",
"fi": "Valikko",
"fr": "Menu",
"hi": "मेनू",
"it": "Menu",
"ja": "メニュー",
"ko": "메뉴",
"nb": "Meny",
"nl": "Menu",
"pt-BR": "Menu",
"pt-PT": "Menu",
"sv": "Meny",
"th": "เมนู",
"zh-CN": "菜单",
"zh-TW": "選單"
},
"default": "main-menu"
},
{
"type": "checkbox",
"id": "nav_below_logo",
"label": {
"da": "Centrer hovedmenuen under logoet",
"de": "Hauptmenü unter Logo zentrieren",
"en": "Center main menu below logo",
"es": "Centrar el menú principal debajo del logo",
"fi": "Keskitä päävalikko logon alle",
"fr": "Centrer le menu principal sous le logo",
"hi": "लोगो के नीचे केंद्र मुख्य मेनू",
"it": "Centra menu principale sotto il logo",
"ja": "ロゴの下のメインメニューを中央寄せする",
"ko": "로고 아래 중앙 주요 메뉴",
"nb": "Sentrer hovedmeny under logo",
"nl": "Centreer hoofdmenu onder logo",
"pt-BR": "Centralizar menu principal abaixo do logotipo",
"pt-PT": "Centrar menu principal abaixo do logótipo",
"sv": "Centrera huvudmeny under logotypen",
"th": "จัดเมนูหลักใต้โลโก้ให้อยู่ตรงกลาง",
"zh-CN": "在 logo 下方居中显示主菜单",
"zh-TW": "將主選單置中並置於商標下方"
}
},
{
"type": "checkbox",
"id": "left_aligned_logo",
"label": {
"da": "Venstrejuster logo",
"de": "Logo linksbündig ausrichten",
"en": "Left-align logo",
"es": "Alinear el logo a la izquierda",
"fi": "Tasaa logo vasemmalle",
"fr": "Aligner le logo à gauche",
"hi": "बाईं ओर पंक्तिबद्ध लोगो",
"it": "Allinea logo a sinistra",
"ja": "ロゴを左寄せする",
"ko": "왼쪽 맞춤 로고",
"nb": "Venstrejuster logo",
"nl": "Logo links uitlijnen",
"pt-BR": "Alinhar logotipo à esquerda",
"pt-PT": "Alinhar logótipo à esquerda",
"sv": "Vänsterjustera logotypen",
"th": "จัดโลโก้ชิดซ้าย",
"zh-CN": "左对齐 logo",
"zh-TW": "將商標靠左對齊"
}
},
{
"type": "checkbox",
"id": "show_header_lines",
"label": {
"da": "Vis skillelinjer i sidehoved",
"de": "Trennlinien in Header anzeigen",
"en": "Show divider lines in header",
"es": "Mostrar líneas divisorias en el encabezado",
"fi": "Näytä väliviivat otsikossa",
"fr": "Afficher les lignes de séparation dans l'en-tête",
"hi": "हैडर में डिवाइडर लाइन दिखाएं",
"it": "Mostra linee divisorie nell'header",
"ja": "ヘッダーに分割線を表示する",
"ko": "제목에 구분선 표시",
"nb": "Vis skillelinjer i topptekst",
"nl": "Toon scheidingslijnen in koptekst",
"pt-BR": "Exibir linhas divisórias no cabeçalho",
"pt-PT": "Mostrar linhas divisórias no cabeçalho",
"sv": "Visa delningslinjer i rubriken",
"th": "แสดงเส้นแบ่งในส่วนหัว",
"zh-CN": "在标头中显示分割线",
"zh-TW": "在標頭中顯示分隔線"
}
},
{
"type": "header",
"content": {
"da": "Meddelelseslinje",
"de": "Ankündigungsbereich",
"en": "Announcement bar",
"es": "Barra de anuncios",
"fi": "Ilmoituspalkki",
"fr": "Barre d'annonces",
"hi": "घोषणा बार",
"it": "Barra degli annunci",
"ja": "告知バー",
"ko": "공지 표시줄",
"nb": "Kunngjøringslinje",
"nl": "Aankondigingsbalk",
"pt-BR": "Barra de avisos",
"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": "공지 표시",
"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": true
},
{
"type": "text",
"id": "header_text",
"label": {
"da": "Tekst",
"de": "Text",
"en": "Text",
"es": "Texto",
"fi": "Teksti",
"fr": "Texte",
"hi": "टेक्स्ट",
"it": "Testo",
"ja": "テキスト",
"ko": "텍스트",
"nb": "Tekst",
"nl": "Tekst",
"pt-BR": "Texto",
"pt-PT": "Texto",
"sv": "Text",
"th": "ข้อความ",
"zh-CN": "文本",
"zh-TW": "文字"
},
"default": {
"da": "Meddel noget her",
"de": "Hier etwas ankündigen",
"en": "Announce something here",
"es": "Anuncia algo aquí",
"fi": "Ilmoita jotakin tässä",
"fr": "Annoncez quelque chose ici",
"hi": "यहां कुछ घोषित करें",
"it": "Annuncia qualcosa qui",
"ja": "ここで告知してください",
"ko": "여기에 공지하십시오",
"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": "announcement_link",
"label": {
"da": "Link",
"de": "Link",
"en": "Link",
"es": "Enlace",
"fi": "Linkki",
"fr": "Lien",
"hi": "लिंक",
"it": "Link",
"ja": "リンク",
"ko": "링크",
"nb": "Kobling",
"nl": "Link",
"pt-BR": "Link",
"pt-PT": "Ligação",
"sv": "Länk",
"th": "ลิงก์",
"zh-CN": "链接",
"zh-TW": "連結"
},
"info": {
"da": "Valgfri",
"de": "Optional",
"en": "Optional",
"es": "Opcional",
"fi": "Valinnainen",
"fr": "Facultatif",
"hi": "वैकल्पिक",
"it": "Facoltativo",
"ja": "オプション",
"ko": "선택 사항",
"nb": "Valgfritt",
"nl": "Optioneel",
"pt-BR": "Opcional",
"pt-PT": "Opcional",
"sv": "Valfritt",
"th": "ไม่จำเป็น",
"zh-CN": "可选",
"zh-TW": "(選填)"
}
}
]
}
{% endschema %}
This is the announcement-bar.liquid code:
{% if section.settings.message %}
{% if section.settings.home_page_only == false or template.name == 'index' %}
{% 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 %}
{% endif %}
{{ announcement_message }}
{% if section.settings.message_link == blank %}
{% else %}
{% endif %}
{% endif %}
{% endif %}
{% 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 %}
Hey @Rii ,
I checked header.liquid. I think the announcement bar not coming with this.
Could you please provide a theme. liquid code?
I need to check that as well.
Thanks!
For sure. Theme.liquid code:
{% if settings.favicon %}
{% endif %}
{% if page_description %}
{% endif %}
{% include 'social-meta-tags' %}
{{ 'timber.scss.css' | asset_url | stylesheet_tag }}
{{ 'theme.scss.css' | asset_url | stylesheet_tag }}
{{ content_for_header }}
{{ 'jquery-2.2.3.min.js' | asset_url | script_tag }}
{% comment %}
If you store has customer accounts disabled, you can remove the following JS file
{% endcomment %}
{% if request.page_type contains 'customers/' %}
{{ 'shopify_common.js' | shopify_asset_url | script_tag }}
{% endif %}
{% include 'booster-common' %}
{% section 'announcement-bar' %}
{% section 'header' %}
{% section 'footer' %}
{%- if request.page_type == 'index' -%}
{{- 'home_page.slideshow.navigation_instructions' | t -}}
{%- endif -%}
{% if request.page_type == 'product' or request.page_type == 'index' %}
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
{% endif %}
- {{ 'general.accessibility.refresh_page' | t }}
- {{ 'general.accessibility.new_window' | t }}
- {{ 'general.accessibility.new_window_and_external' | t }}
{{ 'theme.js' | asset_url | script_tag }}
{% render 'hextom_usb_main', product: product, customer: customer %}
{% render 'ajaxify-cart' %}
{% include 'booster-message' %}
{{ '//cdn.shopify.com/s/files/1/0194/1736/6592/t/1/assets/booster-page-speed-optimizer.js?23' | script_tag }}
P.s I tried to insert "{% section ‘announcement-bar’ %} in different lines but nothing changed. Only order appearance in theme settings.
Hey @dmwwebartisan ,
Any updates there, dear friend?
Hey @dmwwebartisan ,
As I understood, you can’t help me with this?
@Rii ,
Sorry for the delay.
Please check the following screenshot and do changes in your theme.liquid file.
Thanks!
