Symmetry theme: Need to add store name below the logo in the header

Solved
VisheshStudio
Excursionist
35 0 5

Hi Team, I am trying to update my online Shopify store.

URL: https://visheshstudio.com/

My requirement is add a NEW logo with store name below the logo separated by the light gray horizontal lines just like we have one above MENU.

Refer to the mock up below:

Screen Shot 2021-04-22 at 11.47.37 AM.png

 

Appreciate your help on this.

Looking forward to hearing from you.

Thanks,

VS

VisheshStudio
Excursionist
35 0 5

@JHKCreate Can you please check on this and guide me on the same?

0 Likes
KetanKumar
Shopify Partner
17039 1848 6375

@VisheshStudio 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your header code so i will update,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
VisheshStudio
Excursionist
35 0 5

Where do i look for header code I mean what file should i refer?

0 Likes
KetanKumar
Shopify Partner
17039 1848 6375

@VisheshStudio 

can you please go to edit code > section > header file

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
VisheshStudio
Excursionist
35 0 5
<style type="text/css">
  .logo img {
    width: {{ section.settings.logo_img_width | escape }}px;
  }

  #mobile-header .logo img {
    width: {{ section.settings.logo_img_width | at_most: 125 }}px;
  }
</style>

{% if template == 'gift_card' %}

{% comment %} Gift card template logo {% endcomment %}
<meta itemprop="url" content="{{ shop.url }}">
<meta itemprop="name" content="{{ shop.name }}">
{% if section.settings.logo != blank %}
<h1 class="logo" {% comment remove microdata structured data %}itemscope{% endcomment %} itemtype="http://schema.org/Organization">
  {% capture img_size %}{{ section.settings.logo_img_width | times: 2 }}x{% endcapture %}
  <img src="{{ section.settings.logo | img_url: img_size }}" alt="{{ section.settings.logo.alt | escape }}" itemprop="logo" />
</h1>
{% else %}
<h1>{{ shop.name }}</h1>
{% endif %}

{% else %}

<div data-section-type="header">
  {% if section.settings.announcement_show %}
  {% unless template != 'index' and section.settings.announcement_home_only %}
    <style type="text/css">
      .announcement {
        background: {{ section.settings.announcement_bar_col }};
        color: {{ section.settings.announcement_text_col }};
      }
    </style>
    <div class="announcement">
      {% if section.settings.announcement_link != blank %}<a href="{{ section.settings.announcement_link }}">{% endif %}
      <div class="announcement__inner">
        {{ section.settings.announcement_text }}
      </div>
      {% if section.settings.announcement_link != blank %}</a>{% endif %}
    </div>
  {% endunless %}
  {% endif %}

  <div id="pageheader">

    {% capture logo_html %}
    <div class="logo">
      <a href="{{ routes.root_url }}" title="{{ shop.name }}">
        {% if section.settings.logo != blank %}
        {% capture img_size %}{{ section.settings.logo_img_width | times: 2 }}x{% endcapture %}
        <img src="{{ section.settings.logo | img_url: img_size }}" alt="{{ section.settings.logo.alt | escape }}" itemprop="logo" />
        {% else %}
        <span class="logotext">{{ shop.name }}</span>
        {% endif %}
      </a>
    </div><!-- /#logo -->
    {% endcapture %}

    <div id="mobile-header" class="cf">
      <button class="notabutton mobile-nav-toggle" aria-label="{{ 'general.navigation.menu_toggle_aria_label' | t | escape }}" aria-controls="main-nav">
        {% render 'svg-menu' %}
      </button>
      {{ logo_html }}
      <a href="{{ routes.cart_url }}" class="cart-count">
        <span class="beside-svg">({{ cart.item_count }})</span>
        {% render 'svg-cart' %}
      </a>
    </div>

    <div class="logo-area logo-pos-{{ section.settings.logo_pos }} cf">

      {% unless section.settings.logo_pos == 'below' %}<div class="container">{{ logo_html }}</div>{% endunless %}

      <div class="util-area">
        <div class="search-box elegant-input"
            data-live-search="{{ settings.enable_live_search }}"
            data-live-search-price="{{ settings.live_search_show_price }}"
            data-live-search-vendor="{{ settings.live_search_show_vendor }}">
          <form class="search-form" action="{{ routes.search_url }}" method="get" autocomplete="off">
            {% render 'svg-search' %}
            <label class="search-box-label" for="header-search">{{ 'layout.header.search' | t }}</label>
            <input type="text" id="header-search" name="q" autocomplete="off" />
            <button class="button" type="submit" aria-label="{{ 'layout.header.search_submit' | t }}"><span class="button__icon">{% render 'svg-chevron-right' %}</span></button>
            <input type="hidden" name="type" value="{{ settings.search_type }}" />
            <input type="hidden" name="options[prefix]" value="last" />
          </form>

          {% if section.settings.show_social_icons %}
            {% capture icon_size %}{% if settings.soc_icons_double %}x46{% else %}x30{% endif %}{% endcapture %}
            {% render 'social-icons', icon_setting: settings.social_custom_icon, icon_size: icon_size %}
          {% endif %}
        </div>

        <div class="utils">
          {% if shop.customer_accounts_enabled %}
            {% if customer %}
              <div class="header-disclosures">
                <h2 class="visually-hidden" id="account-link-list-header">{{- 'layout.customer.account' | t -}}</h2>
                <div class="disclosure" data-disclosure-account>
                  <button type="button" class="disclosure__toggle" aria-expanded="false" aria-controls="account-link-list" aria-describedby="account-link-list-header" data-disclosure-toggle>
                    {{- 'layout.customer.account' | t -}}
                    <span class="disclosure__toggle-arrow" role="presentation">{% render 'svg-chevron-down.liquid' %}</span>
                  </button>
                  <ul id="account-link-list" class="disclosure-list" data-disclosure-list>
                    <li class="disclosure-list__item your-acct">
                      <a class="disclosure-list__option" href="{{ routes.account_url }}">{{ 'layout.customer.my_account' | t }}</a>
                    </li>
                    <li class="disclosure-list__item logout">
                      <a class="disclosure-list__option" href="{{ routes.account_logout_url }}">{{ 'layout.customer.log_out' | t }}</a>
                    </li>
                  </ul>
                  <span class="disclosure__arrow" role="presentation"></span>
                </div>
              </div>
            {% elsif section.settings.nav_show_reg %}
              <div class="header-disclosures">
                <h2 class="visually-hidden" id="account-link-list-header">{{- 'layout.customer.account' | t -}}</h2>
                <div class="disclosure" data-disclosure-account>
                  <button type="button" class="disclosure__toggle" aria-expanded="false" aria-controls="account-link-list" aria-describedby="account-link-list-header" data-disclosure-toggle>
                    {{- 'layout.customer.account' | t -}}
                    <span class="disclosure__toggle-arrow" role="presentation">{% render 'svg-chevron-down.liquid' %}</span>
                  </button>
                  <ul id="account-link-list" class="disclosure-list" data-disclosure-list>
                    <li class="disclosure-list__item login">
                      <a class="disclosure-list__option" href="{{ routes.account_login_url }}">{{ 'layout.customer.log_in' | t }}</a>
                    </li>
                    <li class="disclosure-list__item register">
                      <a class="disclosure-list__option" href="{{ routes.account_register_url }}">{{ 'layout.customer.register' | t }}</a>
                    </li>
                  </ul>
                  <span class="disclosure__arrow" role="presentation"></span>
                </div>
              </div>
            {% else %}
              <div class="account-links-inline">
                <div class="login"><a href="{{ routes.account_login_url }}">{{ 'layout.customer.log_in' | t }}</a></div>
              </div>
            {% endif %}
          {% endif %}

          {% if section.settings.show_locale_selector or section.settings.show_currency_selector %}
            <div class="header-disclosures">
              {% render 'localization', input_prefix: 'header' %}
            </div>
          {% endif %}

          <div class="cart-summary">
            <a href="{{ routes.cart_url }}" class="cart-count {% if section.settings.use_btn_style_cart_link %}button{% endif %}">
              <span class="cart-count__text">{{ 'layout.header.cart' | t }} ({{ cart.item_count }})</span>
              {% unless section.settings.use_btn_style_cart_link %}
                {% render 'svg-cart' %}
              {% endunless %}
            </a>
          </div>
        </div><!-- /.utils -->
      </div><!-- /.util-area -->

      {% if section.settings.logo_pos == 'below' %}<div class="container">{{ logo_html }}</div>{% endif %}

    </div><!-- /.logo-area -->
  </div><!-- /#pageheader -->

  {% assign featured_links = section.settings.nav_featured_link | split: ', ' %}
  <div id="main-nav" class="{% if section.settings.nav_autoexpand and section.settings.nav_nested_layout == 'rows click' %}autoexpand{% endif %}">
    <div class="mobile-features">
      <form class="mobile-search" action="{{ routes.search_url }}" method="get">
        <i></i>
        <input type="text" name="q" placeholder="{{ 'layout.header.search' | t }}" aria-label="{{ 'layout.header.search' | t }}" />
        <button type="submit" class="notabutton">{% render 'svg-search' %}</button>
        <input type="hidden" name="type" value="{{ settings.search_type }}" />
        <input type="hidden" name="options[prefix]" value="last" />
        <input type="hidden" name="options[unavailable_products]" value="last" />
      </form>
    </div>
    <div class="nav-row multi-level-nav reveal-on-{{ section.settings.nav_nested_layout | split: ' ' | last }}" role="navigation" aria-label="{{ 'general.navigation.main_navigation_aria_label' | t | escape }}">
      <div class="tier-1">
        <ul>
          {% for link in linklists[section.settings.menu_linklist].links %}
          <li class="{% if link.active %}active{% endif %}{% if link.links != blank %} contains-children{% endif %}{% if featured_links contains link.title %} featured-link{% endif %}">
            <a href="{{ link.url }}" {% if link.links != blank %}class="has-children" aria-haspopup="true"{% endif %}>
              {{ link.title }}
              {% if link.links != blank %}
              <span class="exp">{% render 'icon-toggle-menu' %}</span>
              {% endif %}
            </a>

            {% if link.links != blank %}
            <ul {% if link.levels >= 2 and section.settings.nav_nested_layout contains 'columns' %} class="nav-columns nav-columns--count-{{ link.links.size }}"{% endif %}>
              {% for child_link in link.links %}
              <li class="{% if child_link.active %}active{% endif %}{% if child_link.links != blank %} contains-children{% endif %}{% if featured_links contains child_link.title %} featured-link{% endif %}">
                <a href="{{ child_link.url }}" class="{% if child_link.links != blank %}has-children {% if section.settings.nav_nested_layout contains 'columns' %}column-title{% endif %}{% endif %}" {% if child_link.links != blank %}aria-haspopup="true"{% endif %}>
                  {{ child_link.title }}
                  {% if child_link.links != blank %}
                  <span class="exp">{% render 'icon-toggle-menu' %}</span>
                  {% endif %}
                </a>

                {% if child_link.links != blank %}
                <ul>
                  {% for child_child_link in child_link.links %}
                  <li class="{% if child_child_link.active %}active{% endif %}{% if featured_links contains child_child_link.title %} featured-link{% endif %}">
                    <a href="{{ child_child_link.url }}">{{ child_child_link.title }}</a>
                  </li>
                  {% endfor %}
                </ul>
                {% endif %}
              </li>
              {% endfor %}
            </ul>
            {% endif %}
          </li>
          {% endfor %}
        </ul>

        {% if section.settings.show_social_icons %}
          {% capture icon_size %}{% if settings.soc_icons_double %}x46{% else %}x30{% endif %}{% endcapture %}
          {% render 'social-icons', icon_setting: settings.social_custom_icon, icon_size: icon_size, container_class: 'mobile-social' %}
        {% endif %}


        {% if shop.customer_accounts_enabled %}
        <ul class="account-links">
          {% if customer %}
            <li class="your-acct"><a href="{{ routes.account_url }}">{{ 'layout.customer.account' | t }}</a></li>
            <li class="logout"><a href="{{ routes.account_logout_url }}">{{ 'layout.customer.log_out' | t  }}</a></li>
          {% else %}
            {% if section.settings.nav_show_reg %}
              <li class="register"><a href="{{ routes.account_register_url }}">{{ 'layout.customer.register' | t }}</a></li>
            {% endif %}
            <li class="login"><a href="{{ routes.account_login_url }}">{{ 'layout.customer.log_in' | t }}</a></li>
          {% endif %}
        </ul>
        {% endif %}
      </div>
    </div>

    {% if section.settings.show_locale_selector or section.settings.show_currency_selector %}
      <div class="mobile-header-localization">
        {% render 'localization', input_prefix: 'header-mobile' %}
      </div>
    {% endif %}
  </div><!-- /#main-nav -->


  {% if section.settings.head_not_home_only == false or template == 'index' %}

  <div id="store-messages" class="messages-{{ section.blocks.size }}">
    <div class="container cf">
      {% for block in section.blocks %}

      <div class="message message-{{ forloop.index }}">
        {% if block.settings.link_url != blank %}
        <a href="{{ block.settings.link_url }}">
          {% endif %}

          {% if block.settings.heading != blank %}
            <h6 class="title">{{ block.settings.heading | escape }}</h6>
          {% endif %}
          {% if block.settings.subheading != blank %}
            <span class="tagline">{{ block.settings.subheading | escape }}</span>
          {% endif %}

          {% if block.settings.link_url != blank %}
        </a>
        {% endif %}

        {% unless forloop.first %}<div class="fluff"></div>{% endunless %}
      </div>

      {% endfor %}
    </div>
  </div><!-- /#store-messages -->

  {% if section.settings.head_not_mob_show %}
  <div id="store-messages-mobile">
    <div class="container">
      {% if section.settings.head_not_mob_url != blank %}
      <a href="{{ section.settings.head_not_mob_url }}">
        {% endif %}
        {{ section.settings.head_not_mob_text | escape }}
        {% if section.settings.head_not_mob_url != blank %}
      </a>
      {% endif %}
    </div>
  </div>
  {% endif %}

  {% endif %}
</div>

{% endif %}


{% schema %}
  {
    "name": "Header",
    "class": "section-header",
    "max_blocks": 3,
    "settings": [
      {
        "type": "checkbox",
        "id": "use_btn_style_cart_link",
        "label": "Show cart link as button",
        "info": "Only applies to desktop layout"
      },
      {
        "type": "checkbox",
        "id": "nav_show_reg",
        "label": "Show 'Register' account link",
        "info": "Requires customer accounts to be enabled in Settings > Checkout",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_social_icons",
        "label": "Show social icons",
        "default": true
      },
      {
        "type": "header",
        "content": "Navigation"
      },
      {
        "type": "link_list",
        "id": "menu_linklist",
        "label": "Menu",
        "default": "main-menu"
      },
      {
        "type": "select",
        "id": "nav_nested_layout",
        "label": "Nested navigation layout",
        "info": "On desktop and tablet screens",
        "default": "rows click",
        "options": [
          {
            "label": "Columns - on click",
            "value": "columns click"
          },
          {
            "label": "Columns - on hover",
            "value": "columns hover"
          },
          {
            "label": "Rows - on click",
            "value": "rows click"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "nav_autoexpand",
        "label": "Automatically expand navigation to current page",
        "info": "When using 'Rows - on click' layout",
        "default": false
      },
      {
        "type": "text",
        "id": "nav_featured_link",
        "label": "Featured link",
        "info": "Enter the title of a link to highlight it in a different color",
        "default": "Sale"
      },
      {
        "type": "header",
        "content": "Logo"
      },
      {
        "type": "image_picker",
        "id": "logo",
        "label": "Custom logo image",
        "info": "520 x 200px (recommended)"
      },
      {
        "type": "text",
        "id": "logo_img_width",
        "label": "Logo width",
        "info": "Defined in pixels. Do not add the 'px' unit.",
        "default": "300"
      },
      {
        "type": "select",
        "id": "logo_pos",
        "label": "Logo position",
        "options": [
          {
            "value": "",
            "label": "Same row as search\/cart"
          },
          {
            "value": "above",
            "label": "Above search\/cart"
          },
          {
            "value": "below",
            "label": "Below search\/cart"
          }
        ]
      },
      {
        "type": "header",
        "content": "Language Selector",
        "info": "To add a language, go to your [language settings.](/admin/settings/languages)"
      },
      {
        "type": "checkbox",
        "id": "show_locale_selector",
        "label": "Show language selector",
        "default": true
      },
      {
        "type": "header",
        "content": "Currency Selector",
        "info": "To add a currency, go to your [payment settings.](/admin/settings/payments)"
      },
      {
        "type": "checkbox",
        "id": "show_currency_selector",
        "label": "Show currency selector",
        "default": true
      },
      {
        "type": "header",
        "content": "Announcement bar"
      },
      {
        "type": "checkbox",
        "id": "announcement_show",
        "label": "Show announcement bar",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "announcement_home_only",
        "label": "Home page only",
        "default": false
      },
      {
        "type": "text",
        "id": "announcement_text",
        "label": "Text",
        "default": "Announce something here"
      },
      {
        "type": "url",
        "id": "announcement_link",
        "label": "Link"
      },
      {
        "type": "color",
        "id": "announcement_bar_col",
        "label": "Bar",
        "default": "#4a4a4a"
      },
      {
        "type": "color",
        "id": "announcement_text_col",
        "label": "Text",
        "default": "#ffffff"
      },
      {
        "type": "header",
        "content": "Store messages"
      },
      {
        "type": "paragraph",
        "content": "These are displayed under the main menu - great for promotions and notices"
      },
      {
        "type": "checkbox",
        "id": "head_not_home_only",
        "label": "Show only on home page"
      },
      {
        "type": "header",
        "content": "Mobile store message"
      },
      {
        "type": "checkbox",
        "id": "head_not_mob_show",
        "label": "Enable",
        "default": false
      },
      {
        "type": "text",
        "id": "head_not_mob_text",
        "label": "Text"
      },
      {
        "type": "url",
        "id": "head_not_mob_url",
        "label": "Link URL"
      }
    ],
    "blocks": [
      {
        "type": "message",
        "name": "Store message",
        "settings": [
          {
            "type": "text",
            "id": "heading",
            "label": "Heading"
          },
          {
            "type": "text",
            "id": "subheading",
            "label": "Subheading"
          },
          {
            "type": "url",
            "id": "link_url",
            "label": "Link URL"
          }
        ]
      }
    ]
  }
{% endschema %}

 

@KetanKumar Provided the header file code for your reference.

KetanKumar
Shopify Partner
17039 1848 6375

This is an accepted solution.

@VisheshStudio 

thanks for the code.

can you please update code 

<style type="text/css">
  .logo img {
    width: {{ section.settings.logo_img_width | escape }}px;
  }

  #mobile-header .logo img {
    width: {{ section.settings.logo_img_width | at_most: 125 }}px;
  }
</style>

{% if template == 'gift_card' %}

{% comment %} Gift card template logo {% endcomment %}
<meta itemprop="url" content="{{ shop.url }}">
<meta itemprop="name" content="{{ shop.name }}">
{% if section.settings.logo != blank %}
<h1 class="logo" {% comment remove microdata structured data %}itemscope{% endcomment %} itemtype="http://schema.org/Organization">
  {% capture img_size %}{{ section.settings.logo_img_width | times: 2 }}x{% endcapture %}
  <img src="{{ section.settings.logo | img_url: img_size }}" alt="{{ section.settings.logo.alt | escape }}" itemprop="logo" />
</h1>
{% else %}
<h1>{{ shop.name }}</h1>
{% endif %}

{% else %}

<div data-section-type="header">
  {% if section.settings.announcement_show %}
  {% unless template != 'index' and section.settings.announcement_home_only %}
    <style type="text/css">
      .announcement {
        background: {{ section.settings.announcement_bar_col }};
        color: {{ section.settings.announcement_text_col }};
      }
    </style>
    <div class="announcement">
      {% if section.settings.announcement_link != blank %}<a href="{{ section.settings.announcement_link }}">{% endif %}
      <div class="announcement__inner">
        {{ section.settings.announcement_text }}
      </div>
      {% if section.settings.announcement_link != blank %}</a>{% endif %}
    </div>
  {% endunless %}
  {% endif %}

  <div id="pageheader">

    {% capture logo_html %}
    <div class="logo">
      <a href="{{ routes.root_url }}" title="{{ shop.name }}">
        {% if section.settings.logo != blank %}
        {% capture img_size %}{{ section.settings.logo_img_width | times: 2 }}x{% endcapture %}
        <img src="{{ section.settings.logo | img_url: img_size }}" alt="{{ section.settings.logo.alt | escape }}" itemprop="logo" />
<span class="logotext">{{ shop.name }}</span>
        {% else %}
        <span class="logotext">{{ shop.name }}</span>
        {% endif %}
      </a>
    </div><!-- /#logo -->
    {% endcapture %}

    <div id="mobile-header" class="cf">
      <button class="notabutton mobile-nav-toggle" aria-label="{{ 'general.navigation.menu_toggle_aria_label' | t | escape }}" aria-controls="main-nav">
        {% render 'svg-menu' %}
      </button>
      {{ logo_html }}
      <a href="{{ routes.cart_url }}" class="cart-count">
        <span class="beside-svg">({{ cart.item_count }})</span>
        {% render 'svg-cart' %}
      </a>
    </div>

    <div class="logo-area logo-pos-{{ section.settings.logo_pos }} cf">

      {% unless section.settings.logo_pos == 'below' %}<div class="container">{{ logo_html }}</div>{% endunless %}

      <div class="util-area">
        <div class="search-box elegant-input"
            data-live-search="{{ settings.enable_live_search }}"
            data-live-search-price="{{ settings.live_search_show_price }}"
            data-live-search-vendor="{{ settings.live_search_show_vendor }}">
          <form class="search-form" action="{{ routes.search_url }}" method="get" autocomplete="off">
            {% render 'svg-search' %}
            <label class="search-box-label" for="header-search">{{ 'layout.header.search' | t }}</label>
            <input type="text" id="header-search" name="q" autocomplete="off" />
            <button class="button" type="submit" aria-label="{{ 'layout.header.search_submit' | t }}"><span class="button__icon">{% render 'svg-chevron-right' %}</span></button>
            <input type="hidden" name="type" value="{{ settings.search_type }}" />
            <input type="hidden" name="options[prefix]" value="last" />
          </form>

          {% if section.settings.show_social_icons %}
            {% capture icon_size %}{% if settings.soc_icons_double %}x46{% else %}x30{% endif %}{% endcapture %}
            {% render 'social-icons', icon_setting: settings.social_custom_icon, icon_size: icon_size %}
          {% endif %}
        </div>

        <div class="utils">
          {% if shop.customer_accounts_enabled %}
            {% if customer %}
              <div class="header-disclosures">
                <h2 class="visually-hidden" id="account-link-list-header">{{- 'layout.customer.account' | t -}}</h2>
                <div class="disclosure" data-disclosure-account>
                  <button type="button" class="disclosure__toggle" aria-expanded="false" aria-controls="account-link-list" aria-describedby="account-link-list-header" data-disclosure-toggle>
                    {{- 'layout.customer.account' | t -}}
                    <span class="disclosure__toggle-arrow" role="presentation">{% render 'svg-chevron-down.liquid' %}</span>
                  </button>
                  <ul id="account-link-list" class="disclosure-list" data-disclosure-list>
                    <li class="disclosure-list__item your-acct">
                      <a class="disclosure-list__option" href="{{ routes.account_url }}">{{ 'layout.customer.my_account' | t }}</a>
                    </li>
                    <li class="disclosure-list__item logout">
                      <a class="disclosure-list__option" href="{{ routes.account_logout_url }}">{{ 'layout.customer.log_out' | t }}</a>
                    </li>
                  </ul>
                  <span class="disclosure__arrow" role="presentation"></span>
                </div>
              </div>
            {% elsif section.settings.nav_show_reg %}
              <div class="header-disclosures">
                <h2 class="visually-hidden" id="account-link-list-header">{{- 'layout.customer.account' | t -}}</h2>
                <div class="disclosure" data-disclosure-account>
                  <button type="button" class="disclosure__toggle" aria-expanded="false" aria-controls="account-link-list" aria-describedby="account-link-list-header" data-disclosure-toggle>
                    {{- 'layout.customer.account' | t -}}
                    <span class="disclosure__toggle-arrow" role="presentation">{% render 'svg-chevron-down.liquid' %}</span>
                  </button>
                  <ul id="account-link-list" class="disclosure-list" data-disclosure-list>
                    <li class="disclosure-list__item login">
                      <a class="disclosure-list__option" href="{{ routes.account_login_url }}">{{ 'layout.customer.log_in' | t }}</a>
                    </li>
                    <li class="disclosure-list__item register">
                      <a class="disclosure-list__option" href="{{ routes.account_register_url }}">{{ 'layout.customer.register' | t }}</a>
                    </li>
                  </ul>
                  <span class="disclosure__arrow" role="presentation"></span>
                </div>
              </div>
            {% else %}
              <div class="account-links-inline">
                <div class="login"><a href="{{ routes.account_login_url }}">{{ 'layout.customer.log_in' | t }}</a></div>
              </div>
            {% endif %}
          {% endif %}

          {% if section.settings.show_locale_selector or section.settings.show_currency_selector %}
            <div class="header-disclosures">
              {% render 'localization', input_prefix: 'header' %}
            </div>
          {% endif %}

          <div class="cart-summary">
            <a href="{{ routes.cart_url }}" class="cart-count {% if section.settings.use_btn_style_cart_link %}button{% endif %}">
              <span class="cart-count__text">{{ 'layout.header.cart' | t }} ({{ cart.item_count }})</span>
              {% unless section.settings.use_btn_style_cart_link %}
                {% render 'svg-cart' %}
              {% endunless %}
            </a>
          </div>
        </div><!-- /.utils -->
      </div><!-- /.util-area -->

      {% if section.settings.logo_pos == 'below' %}<div class="container">{{ logo_html }}</div>{% endif %}

    </div><!-- /.logo-area -->
  </div><!-- /#pageheader -->

  {% assign featured_links = section.settings.nav_featured_link | split: ', ' %}
  <div id="main-nav" class="{% if section.settings.nav_autoexpand and section.settings.nav_nested_layout == 'rows click' %}autoexpand{% endif %}">
    <div class="mobile-features">
      <form class="mobile-search" action="{{ routes.search_url }}" method="get">
        <i></i>
        <input type="text" name="q" placeholder="{{ 'layout.header.search' | t }}" aria-label="{{ 'layout.header.search' | t }}" />
        <button type="submit" class="notabutton">{% render 'svg-search' %}</button>
        <input type="hidden" name="type" value="{{ settings.search_type }}" />
        <input type="hidden" name="options[prefix]" value="last" />
        <input type="hidden" name="options[unavailable_products]" value="last" />
      </form>
    </div>
    <div class="nav-row multi-level-nav reveal-on-{{ section.settings.nav_nested_layout | split: ' ' | last }}" role="navigation" aria-label="{{ 'general.navigation.main_navigation_aria_label' | t | escape }}">
      <div class="tier-1">
        <ul>
          {% for link in linklists[section.settings.menu_linklist].links %}
          <li class="{% if link.active %}active{% endif %}{% if link.links != blank %} contains-children{% endif %}{% if featured_links contains link.title %} featured-link{% endif %}">
            <a href="{{ link.url }}" {% if link.links != blank %}class="has-children" aria-haspopup="true"{% endif %}>
              {{ link.title }}
              {% if link.links != blank %}
              <span class="exp">{% render 'icon-toggle-menu' %}</span>
              {% endif %}
            </a>

            {% if link.links != blank %}
            <ul {% if link.levels >= 2 and section.settings.nav_nested_layout contains 'columns' %} class="nav-columns nav-columns--count-{{ link.links.size }}"{% endif %}>
              {% for child_link in link.links %}
              <li class="{% if child_link.active %}active{% endif %}{% if child_link.links != blank %} contains-children{% endif %}{% if featured_links contains child_link.title %} featured-link{% endif %}">
                <a href="{{ child_link.url }}" class="{% if child_link.links != blank %}has-children {% if section.settings.nav_nested_layout contains 'columns' %}column-title{% endif %}{% endif %}" {% if child_link.links != blank %}aria-haspopup="true"{% endif %}>
                  {{ child_link.title }}
                  {% if child_link.links != blank %}
                  <span class="exp">{% render 'icon-toggle-menu' %}</span>
                  {% endif %}
                </a>

                {% if child_link.links != blank %}
                <ul>
                  {% for child_child_link in child_link.links %}
                  <li class="{% if child_child_link.active %}active{% endif %}{% if featured_links contains child_child_link.title %} featured-link{% endif %}">
                    <a href="{{ child_child_link.url }}">{{ child_child_link.title }}</a>
                  </li>
                  {% endfor %}
                </ul>
                {% endif %}
              </li>
              {% endfor %}
            </ul>
            {% endif %}
          </li>
          {% endfor %}
        </ul>

        {% if section.settings.show_social_icons %}
          {% capture icon_size %}{% if settings.soc_icons_double %}x46{% else %}x30{% endif %}{% endcapture %}
          {% render 'social-icons', icon_setting: settings.social_custom_icon, icon_size: icon_size, container_class: 'mobile-social' %}
        {% endif %}


        {% if shop.customer_accounts_enabled %}
        <ul class="account-links">
          {% if customer %}
            <li class="your-acct"><a href="{{ routes.account_url }}">{{ 'layout.customer.account' | t }}</a></li>
            <li class="logout"><a href="{{ routes.account_logout_url }}">{{ 'layout.customer.log_out' | t  }}</a></li>
          {% else %}
            {% if section.settings.nav_show_reg %}
              <li class="register"><a href="{{ routes.account_register_url }}">{{ 'layout.customer.register' | t }}</a></li>
            {% endif %}
            <li class="login"><a href="{{ routes.account_login_url }}">{{ 'layout.customer.log_in' | t }}</a></li>
          {% endif %}
        </ul>
        {% endif %}
      </div>
    </div>

    {% if section.settings.show_locale_selector or section.settings.show_currency_selector %}
      <div class="mobile-header-localization">
        {% render 'localization', input_prefix: 'header-mobile' %}
      </div>
    {% endif %}
  </div><!-- /#main-nav -->


  {% if section.settings.head_not_home_only == false or template == 'index' %}

  <div id="store-messages" class="messages-{{ section.blocks.size }}">
    <div class="container cf">
      {% for block in section.blocks %}

      <div class="message message-{{ forloop.index }}">
        {% if block.settings.link_url != blank %}
        <a href="{{ block.settings.link_url }}">
          {% endif %}

          {% if block.settings.heading != blank %}
            <h6 class="title">{{ block.settings.heading | escape }}</h6>
          {% endif %}
          {% if block.settings.subheading != blank %}
            <span class="tagline">{{ block.settings.subheading | escape }}</span>
          {% endif %}

          {% if block.settings.link_url != blank %}
        </a>
        {% endif %}

        {% unless forloop.first %}<div class="fluff"></div>{% endunless %}
      </div>

      {% endfor %}
    </div>
  </div><!-- /#store-messages -->

  {% if section.settings.head_not_mob_show %}
  <div id="store-messages-mobile">
    <div class="container">
      {% if section.settings.head_not_mob_url != blank %}
      <a href="{{ section.settings.head_not_mob_url }}">
        {% endif %}
        {{ section.settings.head_not_mob_text | escape }}
        {% if section.settings.head_not_mob_url != blank %}
      </a>
      {% endif %}
    </div>
  </div>
  {% endif %}

  {% endif %}
</div>

{% endif %}


{% schema %}
  {
    "name": "Header",
    "class": "section-header",
    "max_blocks": 3,
    "settings": [
      {
        "type": "checkbox",
        "id": "use_btn_style_cart_link",
        "label": "Show cart link as button",
        "info": "Only applies to desktop layout"
      },
      {
        "type": "checkbox",
        "id": "nav_show_reg",
        "label": "Show 'Register' account link",
        "info": "Requires customer accounts to be enabled in Settings > Checkout",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_social_icons",
        "label": "Show social icons",
        "default": true
      },
      {
        "type": "header",
        "content": "Navigation"
      },
      {
        "type": "link_list",
        "id": "menu_linklist",
        "label": "Menu",
        "default": "main-menu"
      },
      {
        "type": "select",
        "id": "nav_nested_layout",
        "label": "Nested navigation layout",
        "info": "On desktop and tablet screens",
        "default": "rows click",
        "options": [
          {
            "label": "Columns - on click",
            "value": "columns click"
          },
          {
            "label": "Columns - on hover",
            "value": "columns hover"
          },
          {
            "label": "Rows - on click",
            "value": "rows click"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "nav_autoexpand",
        "label": "Automatically expand navigation to current page",
        "info": "When using 'Rows - on click' layout",
        "default": false
      },
      {
        "type": "text",
        "id": "nav_featured_link",
        "label": "Featured link",
        "info": "Enter the title of a link to highlight it in a different color",
        "default": "Sale"
      },
      {
        "type": "header",
        "content": "Logo"
      },
      {
        "type": "image_picker",
        "id": "logo",
        "label": "Custom logo image",
        "info": "520 x 200px (recommended)"
      },
      {
        "type": "text",
        "id": "logo_img_width",
        "label": "Logo width",
        "info": "Defined in pixels. Do not add the 'px' unit.",
        "default": "300"
      },
      {
        "type": "select",
        "id": "logo_pos",
        "label": "Logo position",
        "options": [
          {
            "value": "",
            "label": "Same row as search\/cart"
          },
          {
            "value": "above",
            "label": "Above search\/cart"
          },
          {
            "value": "below",
            "label": "Below search\/cart"
          }
        ]
      },
      {
        "type": "header",
        "content": "Language Selector",
        "info": "To add a language, go to your [language settings.](/admin/settings/languages)"
      },
      {
        "type": "checkbox",
        "id": "show_locale_selector",
        "label": "Show language selector",
        "default": true
      },
      {
        "type": "header",
        "content": "Currency Selector",
        "info": "To add a currency, go to your [payment settings.](/admin/settings/payments)"
      },
      {
        "type": "checkbox",
        "id": "show_currency_selector",
        "label": "Show currency selector",
        "default": true
      },
      {
        "type": "header",
        "content": "Announcement bar"
      },
      {
        "type": "checkbox",
        "id": "announcement_show",
        "label": "Show announcement bar",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "announcement_home_only",
        "label": "Home page only",
        "default": false
      },
      {
        "type": "text",
        "id": "announcement_text",
        "label": "Text",
        "default": "Announce something here"
      },
      {
        "type": "url",
        "id": "announcement_link",
        "label": "Link"
      },
      {
        "type": "color",
        "id": "announcement_bar_col",
        "label": "Bar",
        "default": "#4a4a4a"
      },
      {
        "type": "color",
        "id": "announcement_text_col",
        "label": "Text",
        "default": "#ffffff"
      },
      {
        "type": "header",
        "content": "Store messages"
      },
      {
        "type": "paragraph",
        "content": "These are displayed under the main menu - great for promotions and notices"
      },
      {
        "type": "checkbox",
        "id": "head_not_home_only",
        "label": "Show only on home page"
      },
      {
        "type": "header",
        "content": "Mobile store message"
      },
      {
        "type": "checkbox",
        "id": "head_not_mob_show",
        "label": "Enable",
        "default": false
      },
      {
        "type": "text",
        "id": "head_not_mob_text",
        "label": "Text"
      },
      {
        "type": "url",
        "id": "head_not_mob_url",
        "label": "Link URL"
      }
    ],
    "blocks": [
      {
        "type": "message",
        "name": "Store message",
        "settings": [
          {
            "type": "text",
            "id": "heading",
            "label": "Heading"
          },
          {
            "type": "text",
            "id": "subheading",
            "label": "Subheading"
          },
          {
            "type": "url",
            "id": "link_url",
            "label": "Link URL"
          }
        ]
      }
    ]
  }
{% endschema %}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
VisheshStudio
Excursionist
35 0 5

@KetanKumar Could you please share what specific change did you make in the code? I would like to understand for my development interest. Thanks!

KetanKumar
Shopify Partner
17039 1848 6375

@VisheshStudio 

yes, sure i have added this code see attachment

KetanKumar_0-1619328688795.png

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
VisheshStudio
Excursionist
35 0 5

Thanks for sharing this @KetanKumar 

I have updated the header code.

Now the shop name is showing next to logo. I want it to be below logo. Can you please guide me?

0 Likes