header.liquid

{%- comment -%}
  This is a required section for the Shopify Theme Store.
  It is available in the "Header" section in the theme editor.

  Theme Store required settings
  - Show announcement
  - Text: message to announce
  - Link: link of the announcement bar

  Theme Store optional settings
  - Home page only: only shows on the home page
{%- endcomment -%}
<section data-section-id="{{ section.id }}">
  {%- if section.settings.announcement_bar_enabled -%}
    <div class="top-bar" data-section-type="top-bar">
      {%- if section.settings.announcement_bar_home_page_only == false or template.name == 'index' -%}

        <div class="top-bar__prev-btn">
          {% include 'icon-left' %}
        </div>

        <div class="top-bar__announcement">
          {%- if section.settings.announcement_bar_link != blank -%}
            <a href="{{ section.settings.announcement_bar_link }}">
              {{ section.settings.announcement_bar_text | escape }}
            </a>
          {%- else -%}
            <p>{{ section.settings.announcement_bar_text | escape }}</p>
          {%- endif -%}
          {%- if section.settings.announcement_bar_link2 != blank -%}
            <a href="{{ section.settings.announcement_bar_link2 }}">
              {{ section.settings.announcement_bar_text2 | escape }}
            </a>
          {%- else -%}
            <p>{{ section.settings.announcement_bar_text2 | escape }}</p>
          {%- endif -%}
        </div>

        <div class="top-bar__next-btn">
          {% include 'angle-right' %}
        </div>

        <div class="top-bar--destroy">
          {% include 'icon-close' %}
        </div>

      {%- endif -%}
    </div>
  {%- endif -%}

  <header role="banner" class="main-nav" data-section-type="main-nav">
    {% if template.name == 'index' %}
      <h1>
    {% else %}
      <div class="h1">
    {% endif %}
        <a href="/" class="logo-image">
          {% if section.settings.logo != blank %}
            {% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
            <img src="{{ section.settings.logo | img_url: image_size }}"
                srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
                alt="{{ section.settings.logo.alt | default: shop.name }}">
          {% else %}
            {{ shop.name }}
          {% endif %}
        </a>
    {% if template.name == 'index' %}
      </h1>
    {% else %}
      </div>
    {% endif %}

    <nav role="navigation">
      <ul class="main-nav__menu">
        {% for link in linklists[section.settings.menu].links %}
          {% if link.links != blank %}
            <li class="has-subnav">
              <a href="{{ link.url }}">
                {{ link.title }}
                {% include 'icon-down' %}
              </a>

              <ul class="main-nav__sub-nav">
                {% for childlink in link.links %}
                  <li class="main-nav__sub-nav-level2">
                    <a href="{{ childlink.url }}">
                      <h3>{{ childlink.title }}</h3>
                    </a>
                    {% if childlink.links != blank %}
                      <ul class="main-nav__sub-nav-level3">
                      {% for subchildlink in childlink.links %}
                        <li>
                          <a href="{{ subchildlink.url }}">{{ subchildlink.title | escape }}</a>
                        </li>
                      {% endfor %}
                      </ul>
                    {% endif %}
                  </li>
                {% endfor %}
                {% unless section.settings.menu_featured_img == blank %}
                  <li class="main-menu__featured-img">
                    {% include 'responsive-image' with image: section.settings.menu_featured_img, image_class: "css-class", wrapper_class: "wrapper-css-class", max_width: 247, max_height: 231 %}
                    <button class="primary">{{ section.settings.menu_featured_buttontext }}</button>
                  </li>
                {% endunless %}
              </ul>
            </li>
          {% else %}
            <li class="main-nav__level-one">
              <a href="{{ link.url }}">
                {{ link.title }}
              </a>
            </li>
          {% endif %}
        {% endfor %}
        <li class="mobile-footer">
          <ul class="mobile-footer__logos">
            <li>
              <a href="#">
                {% include 'icon-search-w' %}
              </a>
            </li>

            <li>
              <a href="#">
                {% include 'icon-heart-w' %}
              </a>
            </li>

            <li>
              <a href="#">
                {% include 'icon-cart-w' %}
              </a>
            </li>
          </ul>
          <ul class="mobile-footer__links">
            {% if shop.customer_accounts_enabled %}
              {% if customer %}
                <li>
                  {% if customer.first_name != blank %}
                    {% capture first_name %}<a href="/account">{{ customer.first_name }}</a>{% endcapture %}
                    {{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }}
                  {% else %}
                    <a href="/account">{{ 'layout.customer.account' | t }}</a>
                  {% endif %}
                </li>
                <li>
                  {{ 'layout.customer.log_out' | t | customer_logout_link }}
                </li>
              {% else %}
                <li>
                  {{ 'layout.customer.log_in' | t | customer_login_link }}
                </li>
              {% endif %}
            {% endif %}
            <li class="border-left">
              <a href="/contact">
                Contact
              </a>
            </li>
          </ul>
        </li>
    </nav>

    <div class="main-nav__utility-menu">
      {% if shop.customer_accounts_enabled %}
        <ul>
          {% if customer %}
            <li class="hs">
              {% if customer.first_name != blank %}
                {% capture first_name %}<a href="/account">{{ customer.first_name }}</a>{% endcapture %}
                {{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }}
              {% else %}
                <a href="/account">{{ 'layout.customer.account' | t }}</a>
              {% endif %}
            </li>
            <li class="hs">
              {{ 'layout.customer.log_out' | t | customer_logout_link }}
            </li>
          {% else %}
            <li class="hs">
              {{ 'layout.customer.log_in' | t | customer_login_link }}
            </li>
          {% endif %}

      {% endif %}

      <li class="hs">
        <a href="#">
          {% include 'icon-search' %}
        </a>
      </li>

      <li class="hs">
        <a href="#">
          {% include 'icon-heart' %}
        </a>
      </li>

      <li class="main-nav__cart-icon">
        <a href="#">
          {% include 'icon-cart' %}
        </a>
      </li>

      <li class="main-nav__utility-menu--open">
        <a href="#">
          {% include 'icon-burger' %}
        </a>
      </li>

      <li class="main-nav__utility-menu--close">
        <a href="#">
          {% include 'icon-menu-close' %}
        </a>
      </li>

    </div>

  </header>

</section>

{% if section.settings.logo != blank %}
  <style>
    .logo-image {
      display: flex;
      max-width: {{ section.settings.logo_max_width }}px;
      min-width: 163px;
    }
  </style>
{% endif %}
{% schema %}
  {
    "name": "Header",
    "settings": [
      {
        "type": "header",
        "content": "Announcement bar"
      },
      {
        "type": "checkbox",
        "id": "announcement_bar_enabled",
        "label": "Show announcement",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "announcement_bar_home_page_only",
        "label": "Show on home page only",
        "default": true
      },
      {
        "type": "text",
        "id": "announcement_bar_text",
        "label": "Announcement text",
        "default": "Announce something here"
      },
      {
        "type": "url",
        "id": "announcement_bar_link",
        "label": "Announcement link",
        "info": "Optional"
      },
      {
        "type": "text",
        "id": "announcement_bar_text2",
        "label": "Extra Announcement",
        "default": "Announce something else here..."
      },
      {
        "type": "url",
        "id": "announcement_bar_link2",
        "label": "Announcement link",
        "info": "Optional"
      },
      {
        "type": "header",
        "content": "Header"
      },
      {
        "type": "image_picker",
        "id": "logo",
        "label": "Logo image"
      },
      {
        "type": "range",
        "id": "logo_max_width",
        "min": 50,
        "max": 450,
        "step": 10,
        "unit": "px",
        "label": "Custom logo width",
        "default": 250
      },
      {
        "type": "link_list",
        "id": "menu",
        "label": "Menu",
        "default": "main-menu"
      },
      {
        "type": "image_picker",
        "id": "menu_featured_img",
        "label": "Dropdown menu featured image"
      },
      {
        "type": "url",
        "id": "menu_featured_imgurl",
        "label": "Dropdown menu featured image link"
      },
      {
        "type": "text",
        "id": "menu_featured_buttontext",
        "label": "Button Text",
        "default": "Shop Men's"
      }
    ]
  }
{% endschema %}
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "name": "{{ shop.name }}",
  {% if section.settings.logo %}
    {% assign image_size = section.settings.logo.width | append:'x' %}
    "logo": "https:{{ section.settings.logo | img_url: image_size }}",
  {% endif %}
  "sameAs": [
    "{{ settings.social_twitter_link }}",
    "{{ settings.social_facebook_link }}",
    "{{ settings.social_pinterest_link }}",
    "{{ settings.social_instagram_link }}",
    "{{ settings.social_tumblr_link }}",
    "{{ settings.social_snapchat_link }}",
    "{{ settings.social_youtube_link }}",
    "{{ settings.social_vimeo_link }}"
  ],
  "url": "{{ shop.url }}{{ page.url }}"
}
</script>
{% if template.name == 'index' %}
  <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "WebSite",
      "name": "{{ shop.name }}",
      "potentialAction": {
        "@type": "SearchAction",
        "target": "{{ shop.url }}/search?q={search_term_string}",
        "query-input": "required name=search_term_string"
      },
      "url": "{{ shop.url }}{{ page.url }}"
    }
  </script>
{% endif %}