Moving announcement bar under the header, Minimal Theme

Solved
Highlighted
New Member
15 0 0

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

0 Likes
Highlighted
Shopify Partner
2418 525 671

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.

annocement-bar-drag.jpg

 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
New Member
15 0 0

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.

 

 

0 Likes
Highlighted
Shopify Partner
2418 525 671

@Rii,

Yes, you are right. Code revision needed. You have to check the code of header liquid and do changes ( move code) accordingly.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
New Member
15 0 0

@dmwwebartisan 

I can't do it myself, that's why I'm asking for help.

0 Likes
Highlighted
Shopify Partner
2418 525 671

Hey @Rii,

Please share your code here. I will check and try to help you.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
New Member
15 0 0

Hi @dmwwebartisan,

Thank you for your response. 

This is the header.liquid code:

<style>
  {%- assign logo_width = 695 -%}
  {%- assign logo_max_width = section.settings.logo_max_width | times: 1 -%}
  {% if logo_max_width < logo_width %}
    {%- assign logo_width = logo_max_width -%}
  {% endif %}
  .logo__image-wrapper {
    max-width: {{ logo_width }}px;
  }
  /*================= If logo is above navigation ================== */
  {% if section.settings.nav_below_logo %}
    .site-nav {
      {% if section.settings.show_header_lines %}
        border-top: 1px solid {{ settings.color_borders }};
        border-bottom: 1px solid {{ settings.color_borders }};
      {% endif %}
      margin-top: 15px;
    }

    {% unless section.settings.left_aligned_logo %}
      .logo__image-wrapper {
        margin: 0 auto;
      }
    {% endunless %}
  {% endif %}

  /*============ If logo is on the same line as navigation ============ */
  {% unless section.settings.nav_below_logo or section.settings.show_header_lines == false %}
    .site-header .grid--full {
      border-bottom: 1px solid {{ settings.color_borders }};
      padding-bottom: 30px;
    }
  {% endunless %}


  {% unless section.settings.nav_below_logo %}
    @media screen and (min-width: 769px) {
      .site-nav {
        text-align: right!important;
      }
    }
  {% endunless %}
</style>

<div data-section-id="{{ section.id }}" data-section-type="header-section">
  <div class="header-bar">
    <div class="wrapper medium-down--hide">
      <div class="post-large--display-table">

        {% if section.settings.show_announcement or section.settings.header_search_enable %}
          <div class="header-bar__left post-large--display-table-cell">

            {% comment %}
              Add social links to header
            {% endcomment %}

            {% comment %}
            <div class="header-bar__module header-bar__module--list">
              {% include 'social-links' %}
            </div>
            {% endcomment %}

            {% if section.settings.show_announcement %}
              <div class="header-bar__module header-bar__message">
                {% if section.settings.announcement_link != blank %}
                  <a href="{{ section.settings.announcement_link }}">
                {% endif %}
                  {{ section.settings.header_text | escape }}
                {% if section.settings.announcement_link != blank %}
                  </a>
                {% endif %}
              </div>
            {% elsif section.settings.header_search_enable %}
              <div class="header-bar__module header-bar__search">
                {% include 'search-bar' with 'header' %}
              </div>
            {% endif %}

          </div>
        {% endif %}

        <div class="header-bar__right post-large--display-table-cell">

          {% if shop.customer_accounts_enabled %}
            <ul class="header-bar__module header-bar__module--list">
              {% if customer %}
                <li>
                  <a href="{{ routes.account_url }}">
                  <img src="https://cdn.shopify.com/s/files/1/0421/5118/2498/files/Untitled-1-02.png?v=1594117834" width="24px" height="24px" style="margin-top: 7px;"/>
                  </a>
                </li>
              
              {% else %}
                <li>
                  <a href="{{ routes.account_login_url }}">
                  	<img src="https://cdn.shopify.com/s/files/1/0421/5118/2498/files/Untitled-1-02.png?v=1594117834" width="24px" height="24px" style="margin-top: 7px;"/>
                  </a>
                </li>
              {% endif %}
            </ul>
          {% endif %}

          <div class="header-bar__module">
            <span class="header-bar__sep" aria-hidden="true"></span>  
            <a href="{{ routes.cart_url }}">
              <img src="https://cdn.shopify.com/s/files/1/0421/5118/2498/files/Untitled-1-01.png?v=1594118246" width="24px" height="24px" style="margin-top: 7px;" />
            </a>
          </div>

             <div class="header-bar__module">
            <a href="{{ routes.cart_url }}"class="cart-page-link">
             {% unless cart.item_count == 0 %}{% endunless %}
              <span class="cart-count header-bar__cart-count{% if cart.item_count == 0 %} hidden-count{% endif %}">{{ cart.item_count }}</span>
            </a>
          </div>


          {% if section.settings.header_search_enable %}
            {% if section.settings.show_announcement %}
              <div class="header-bar__module">
                <a href="{{ routes.search_url }}">
                 <img src="https://cdn.shopify.com/s/files/1/0421/5118/2498/files/Untitled-1-03.png?v=1594118247" width="30px" height="30px" style=" margin-top: 7px; margin-left: 12px;"  />
                </a>
              </div>
            {% endif %}
          {% endif %}

        </div>
      </div>
    </div>

 <div class="wrapper post-large--hide announcement-bar--mobile">
      {% if section.settings.show_announcement %}
        {% if section.settings.announcement_link != blank %}
          <a href="{{ section.settings.announcement_link }}">
        {% endif %}
          <span>{{ section.settings.header_text | escape }}</span>
        {% if section.settings.announcement_link != blank %}
          </a>
        {% endif %}
      {% endif %}
    </div>
    
    <div class="wrapper post-large--hide">
      {% unless section.settings.nav_menu == blank and section.settings.header_search_enable == false and shop.customer_accounts_enabled == false %}
        <button type="button" class="mobile-nav-trigger" id="MobileNavTrigger" aria-controls="MobileNav" aria-expanded="false">
          <span class="icon icon-hamburger" aria-hidden="true"></span>  
        </button>
      {% endunless %}
      
      <a href="{{ routes.root_url }}">
        <img src="https://cdn.shopify.com/s/files/1/0421/5118/2498/files/Descuart-01.png?v=1598308948" width="60px" height="60px" style="margin: -20px; margin-top: -15px"" alt="Descuart LLC";"/>     
        </a>
      
      <a href="{{ routes.cart_url }}" class="cart-page-link mobile-cart-page-link">
        <span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
        {{ 'layout.cart.title' | t }} <span class="cart-count{% if cart.item_count == 0 %} hidden-count{% endif %}">{{ cart.item_count }}</span>
      </a>
    </div>
    {% include 'mobile-nav' with linklists[section.settings.nav_menu] %}
  </div>

  <header class="site-header" role="banner">
    <div class="wrapper">

      {% if section.settings.nav_below_logo %}
        <div class="grid--full">
          <div class="grid__item">
            {% if request.page_type == 'index' %}
              <h1 class="site-header__logo{% if section.settings.logo == blank %}{% unless section.settings.left_aligned_logo == false and section.settings.nav_below_logo %} post-large--left{% endunless %}{% endif %}" itemscope itemtype="http://schema.org/Organization">
            {% else %}
              <div class="h1 site-header__logo{% if section.settings.logo == blank %}{% unless section.settings.left_aligned_logo == false and section.settings.nav_below_logo %} post-large--left{% endunless %}{% endif %}" itemscope itemtype="http://schema.org/Organization">
            {% endif %}
              {% if section.settings.logo != blank %}
                <noscript>
                  {% capture image_size %}{{ logo_width | escape }}x{% endcapture %}
                  <div class="logo__image-wrapper">
                    {{ section.settings.logo | img_url: image_size | img_tag: shop.name }}
                  </div>
                </noscript>
                <div class="logo__image-wrapper supports-js">
                  <a href="{{ routes.root_url }}" itemprop="url" style="padding-top:{{ 1 | divided_by: section.settings.logo.aspect_ratio | times: 100}}%;">
                    {% assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                    <img class="logo__image lazyload"
                         src="{{ section.settings.logo | img_url: '300x300' }}"
                         data-src="{{ img_url }}"
                         data-widths="[120, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
                         data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
                         data-sizes="auto"
                         alt="{{ shop.name | escape }}"
                         itemprop="logo">
                  </a>
                </div>
              {% else %}
                <a href="{{ routes.root_url }}" itemprop="url">{{ shop.name }}</a>
              {% endif %}
            {% if request.page_type == 'index' %}
             
            {% else %}
              </div>
                 </h1>
            {% endif %}
        </div>
          </div>
        <div class="grid--full medium-down--hide">
          <div class="grid__item">
            {% include 'site-nav' with linklists[section.settings.nav_menu] %}
          </div>
        </div>
      {% else %}
        <div class="grid--full post-large--display-table">
          <div class="grid__item post-large--one-third post-large--display-table-cell">
            {% if request.page_type == 'index' %}
              <h1 class="site-header__logo{% if section.settings.logo == blank %}{% unless section.settings.left_aligned_logo == false and section.settings.nav_below_logo %} post-large--left{% endunless %}{% endif %}" itemscope itemtype="http://schema.org/Organization">
            {% else %}
              <div class="h1 site-header__logo{% if section.settings.logo == blank %}{% unless section.settings.left_aligned_logo == false and section.settings.nav_below_logo %} post-large--left{% endunless %}{% endif %}" itemscope itemtype="http://schema.org/Organization">
            {% endif %}
              {% if section.settings.logo != blank %}
                <noscript>
                  {% capture image_size %}{{ logo_width | escape }}x{% endcapture %}
                  <div class="logo__image-wrapper">
                    {{ section.settings.logo | img_url: image_size | img_tag: shop.name }}
                  </div>
                </noscript>
                <div class="logo__image-wrapper supports-js">
                  <a href="{{ routes.root_url }}" itemprop="url" style="padding-top:{{ 1 | divided_by: section.settings.logo.aspect_ratio | times: 100}}%;">
                    {% assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                    <img class="logo__image lazyload"
                         src="{{ section.settings.logo | img_url: '300x300' }}"
                         data-src="{{ img_url }}"
                         data-widths="[120, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
                         data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
                         data-sizes="auto"
                         alt="{{ shop.name | escape }}"
                         itemprop="logo">
                  </a>
                </div>
              {% else %}
                <a href="{{ routes.root_url }}" itemprop="url">{{ shop.name }}</a>
              {% endif %}
            {% if request.page_type == 'index' %}
             
            {% else %}
              </div>
             </h1>
            {% endif %}
          </div>
          <div class="grid__item post-large--two-thirds post-large--display-table-cell medium-down--hide">
            {% include 'site-nav' with linklists[section.settings.nav_menu] %}
          </div>
        </div>
      {% endif %}

    </div> 
  </header>
</div>


{% 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' %}
  <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 4;
      font-size: {{ section.settings.font_size }}px;
      font-weight: bold;
      font-style: normal;
      font-family: Karla;
      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 %}
     
    {% else %}
    </a>
  {% endif %}
</div>
  {% 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 %}

 

0 Likes
Highlighted
Shopify Partner
2418 525 671

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!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
New Member
15 0 0

@dmwwebartisan,

For sure. Theme.liquid code:

<!doctype html>
<html class="no-js">
<head>
  
  <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-173041515-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-173041515-1');
</script>
  
  <meta name="google-site-verification" content="9PpJygr7QM30GIxTK36DmZrlFU2vCwoyZB8qMnrk5xI" />
  <!-- Basic page needs ================================================== -->
  <meta name="yandex-verification" content="873f19201fbbd7a5" />
  <meta name="facebook-domain-verification" content="xmqiot6hcsaqo85q7icaai1qwg8q6y" />
  <meta name="p:domain_verify" content="fb21e5affacba092e4b2ed732e38621f"/>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  {% if settings.favicon %}
  <link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png" />
  {% endif %}

  <!-- Title and description ================================================== -->
  <title>
  {{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} &ndash; {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless %}
  </title>

  {% if page_description %}
  <meta name="description" content="{{ page_description | escape }}">
  {% endif %}

  <!-- Social meta ================================================== -->
  {% include 'social-meta-tags' %}

  <!-- Helpers ================================================== -->
  <link rel="canonical" href="{{ canonical_url }}">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="theme-color" content="{{ settings.color_primary }}">

  <!-- CSS ================================================== -->
  {{ 'timber.scss.css' | asset_url | stylesheet_tag }}
  {{ 'theme.scss.css' | asset_url | stylesheet_tag }}

  <script>
    window.theme = window.theme || {};

    var theme = {
      strings: {
        addToCart: {{ 'products.product.add_to_cart' | t | json }},
        soldOut: {{ 'products.product.sold_out' | t | json }},
        unavailable: {{ 'products.product.unavailable' | t | json }},
        zoomClose: {{ "products.zoom.close" | t | json }},
        zoomPrev: {{ "products.zoom.prev" | t | json }},
        zoomNext: {{ "products.zoom.next" | t | json }},
        addressError: {{ 'map.errors.address_error' | t | json }},
        addressNoResults: {{ 'map.errors.address_no_results' | t | json }},
        addressQueryLimit: {{ 'map.errors.address_query_limit_html' | t | json }},
        authError: {{ 'map.errors.auth_error_html' | t | json }}
      },
      settings: {
        // Adding some settings to allow the editor to update correctly when they are changed
        enableWideLayout: {{ settings.enable_wide_layout }},
        typeAccentTransform: {{ settings.type_accent_transform }},
        typeAccentSpacing: {{ settings.type_accent_spacing }},
        baseFontSize: '{{ settings.type_base_size }}',
        headerBaseFontSize: '{{ settings.type_header_size }}',
        accentFontSize: '{{ settings.type_accent_size }}'
      },
      variables: {
        mediaQueryMedium: 'screen and (max-width: 768px)',
        bpSmall: false
      },
      moneyFormat: {{ shop.money_format | json }}
    }

    document.documentElement.className = document.documentElement.className.replace('no-js', 'supports-js');
  </script>

  <!-- Header hook for plugins ================================================== -->
  {{ content_for_header }}

  {{ 'jquery-2.2.3.min.js' | asset_url | script_tag }}

  <script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>

  {% 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' %}
</head>

<body id="{{ page_title | handle }}" class="{% if customer %}customer-logged-in {% endif %}template-{{ request.page_type | handle }}">
  {% section 'announcement-bar' %} 
  {% section 'header' %}

  <main class="wrapper main-content" role="main">
    <div class="grid">
        <div class="grid__item">
          {{ content_for_layout }}
        </div>
    </div>
  </main>

  {% section 'footer' %}

  {%- if request.page_type == 'index' -%}
    <p id="slideshow-info" class="visually-hidden" aria-hidden="true">
      {{- 'home_page.slideshow.navigation_instructions' | t -}}
    </p>
  {%- endif -%}

  {% if request.page_type == 'product' or request.page_type == 'index' %}
    {{ 'option_selection.js' | shopify_asset_url | script_tag }}
  {% endif %}

  <ul hidden>
    <li id="a11y-refresh-page-message">{{ 'general.accessibility.refresh_page' | t }}</li>
    <li id="a11y-external-message">{{ 'general.accessibility.new_window' | t }}</li>
    <li id="a11y-new-window-external-message">{{ 'general.accessibility.new_window_and_external' | t }}</li>
  </ul>

  {{ 'theme.js' | asset_url | script_tag }}

<!-- **BEGIN** Hextom USB Integration // Main Include - DO NOT MODIFY -->
    {% render 'hextom_usb_main', product: product, customer: customer %}
    <!-- **END** Hextom USB Integration // Main Include - DO NOT MODIFY -->
  
  {% 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 }}
</body>
</html>

 

P.s I tried to insert "{% section 'announcement-bar' %} in different lines but nothing changed. Only order appearance in theme settings.

0 Likes
Highlighted
New Member
15 0 0

Hey @dmwwebartisan,

Any updates there, dear friend?

0 Likes