Custom Header

Your storeConnect system allows you to completely replace the header displayed on your site.

This is done using the “Header” relationship on your store object and creating a Content Block using the “No added styling” template.

A full featured example of a custom header is detailed below. You would copy this into the content section of the content block you have created. This will create a header content block that looks similar to the default site.

Once associated with the store, it will take a few minutes to appear on your site.

Like any content block, you can make full use of our Liquid methods to make your header content block dynamic. You will need to be familiar with Liquid and HTML to edit this correctly.

<header class="Header" data-id="custom">
  <section class="Header_top">
    <div class="Header_inner u-position-relative">
      <div class="Header_brand">
        <img src="{{ store.logo.url }}" class="Logo_image" />
      </div>
      <div class="Header_search">
        <form class="Search" action="/search/products" accept-charset="UTF-8" method="get">
          <input type="search" name="q" id="q" class="Search_input" placeholder="Search our services...">
          <svg class="Search_icon" viewBox="0 0 100 100">
            <g>
              <path d="M11.652431,11.6457538 C26.6779705,-3.37183253 50.8588389,-3.93592721 66.5690008,10.3646146 C81.5005863,23.9564391 83.7695942,46.414946 72.3170256,62.6475766 L71.9657769,63.1375533 L71.7513932,63.426668 L98.3749934,90.1327205 C99.3204764,91.1099972 99.8870192,92.3846794 99.9856939,93.732218 L100,94.0026306 L100,94.2745868 C99.966142,95.8152594 99.3189162,97.2787992 98.2518296,98.2909403 C97.1663345,99.3847941 95.6888834,100 94.1476867,100 C92.6971486,100 91.3030773,99.4550425 90.2448483,98.4847421 L90.0504343,98.2978555 L63.4550971,71.7171439 L63.168154,71.9305497 C47.2230675,83.531483 25.0294668,81.6926119 11.2187089,67.4392992 L10.8027821,67.0035818 L10.3706079,66.5367284 C-3.79511634,50.9911431 -3.38356459,27.1465501 11.2059842,12.0990289 L11.652431,11.6457538 Z M32.1163294,12.6111353 C19.9604486,16.072001 11.5897505,27.1888967 11.6272188,39.8213604 C11.6587534,50.9829051 18.2727659,61.0762544 28.4976172,65.5654838 C38.7229779,70.0549369 50.6354465,68.0949594 58.8235314,60.6209905 L59.7047414,59.764147 C60.0559329,59.418901 60.3138008,59.1553622 60.6057132,58.842357 C69.1680055,49.5506618 70.5043726,35.7022858 63.8767689,24.9464556 C57.2488155,14.1900579 44.2726675,9.15013946 32.1163294,12.6111353 Z"></path>
            </g>
          </svg>
        </form>
      </div>
      <nav class="Header_secondary-nav">
        {% comment %} Login Link or Logged In Drop Down {% endcomment %}
        <div class="NavItem NavItem-right u-hide-up-to-small">
          {% if customer %}
          <a class="NavItem_link" href="{{ store.profile_path }}">
            Hi there, {{ customer.firstname }}
          </a>
          <div class="NavItem_dropdown">
            <h4 class="NavItem_dropdown_heading">Your Account</h4>
            <a class="NavItem_dropdown_link" href="{{ store.profile_path }}">Account</a>
            <a class="NavItem_dropdown_link" href="{{ store.shipping_information_path }}">Shipping</a>
            <a class="NavItem_dropdown_link" href="{{ store.orders_path }}">Orders</a>
            <a class="NavItem_dropdown_link" href="{{ store.logout_path }}" data-method='delete'>Log out</a>
          </div>
          {% else %}
          <a class="NavItem_link" href="{{ store.login_path }}">Log in</a>
          {% endif %}
        </div>

        {% comment %} Cart Link {% endcomment %}
        <div class="NavItem NavItem-right NavItem-cart" data-cart="">
          <a class="NavItem_link" data-meganav-trigger="" href="{{ store.cart_path }}">
            Cart
            {% if cart.item_count > 0 %}
            <div class="Count u-s-ml-tiny">
              {{ cart.item_count }}
            </div>
            {% endif %}
          </a>
          {% comment %} Drop Down {% endcomment %}
          {% if cart.item_count > 0 %}
          <div class="NavItem_dropdown">
            <div class="u-s-mb-base">

              {% comment %} Cart Line Items {% endcomment %}
              {% for item in cart.items %}
                <div class="ProductItem">
                  <a class="ProductItem_image" href="{{ item.product.url }}">
                    <img src="{{ item.product.image.thumbnail_path }}">
                  </a>
                  <div class="ProductItem_summary">
                    <a class="ProductItem_heading" href="/products/yoga-mat-green-8mm">
                    {{ item.product.display_name }}
                    </a>
                    <div class="ProductItem_qty" data-spec-line-item-quantity="900">
                      Qty {{ item.quantity }}
                    </div>
                  </div>
                  <div class="ProductItem_total" data-spec-line-item-total="900">
                    {{ item.total_price | money }}
                  </div>
                </div>
              {% endfor %}


            </div>
            <div class="OrderTotal_line">
              <div class="OrderTotal_line_label">Total</div>
              <div class="OrderTotal_line_total" data-spec-cart-total="">
                {{ cart.total | money }}
              </div>
            </div>
            <div class="OrderTotal_line">
              <div class="OrderTotal_line_label">Payment due now</div>
              <div class="OrderTotal_line_total" data-spec-cart-due="">
                {{ cart.total_remaining | money }}
              </div>
            </div>
            <a class="Button Button-primary Button-expanded" href="{{ store.checkout_path }}">Checkout</a>
          </div>
          {% endif %}
        </div>
      </nav>
      <button class="Hamburger" data-js-toggle-active-trigger="nav" type="button">
        <svg viewBox="0 0 100 100">
          <g>
            <path d="M77,69 C78.6568542,69 80,70.3431458 80,72 C80,73.6568542 78.6568542,75 77,75 L23,75 C21.3431458,75 20,73.6568542 20,72 C20,70.3431458 21.3431458,69 23,69 L77,69 Z M77,47 C78.6568542,47 80,48.3431458 80,50 C80,51.6568542 78.6568542,53 77,53 L23,53 C21.3431458,53 20,51.6568542 20,50 C20,48.3431458 21.3431458,47 23,47 L77,47 Z M77,25 C78.6568542,25 80,26.3431458 80,28 C80,29.6568542 78.6568542,31 77,31 L23,31 C21.3431458,31 20,29.6568542 20,28 C20,26.3431458 21.3431458,25 23,25 L77,25 Z"></path>
          </g>
        </svg>
      </button>
    </div>
  </section>
  <div class="Header_bottom">
    <div class="Header_inner">
      <div class="Navbar" data-navbar="" data-js-toggle-active-target="nav">
        <div class="Navbar_inner">
          <div class="u-flex-grow u-flex-column-to-row">
            <div class="NavItem NavItem-mega">
              <a data-meganav-trigger="" class="NavItem_link" href="/categories/sporting-goods">
                <span>Sporting Items</span>
                <svg class="NavItem_link_icon" viewBox="0 0 100 100">
                  <path d="M56.7,75.75 L95.4,37.05 C98.8,33.65 98.8,28.05 95.4,24.65 C92,21.25 86.4,21.25 83,24.65 L50.5,57.05 L18,24.55 C14.6,21.15 9,21.15 5.6,24.55 C3.9,26.25 3,28.55 3,30.75 C3,33.05 3.9,35.25 5.6,36.95 L44.3,75.75 C47.7,79.15 53.3,79.15 56.7,75.75 Z"></path>
                </svg>
              </a>
              <div class="NavItem_dropdown">
                <ul class="NavList NavList-root ">
                  <li class="NavList_item NavList_item-tier1 u-hide-xlarge-and-up">
                    <a class="NavList_link NavList_link-tier1" href="/categories/sporting-goods">All Sporting Items</a>
                  </li>
                  <li class="NavList_item NavList_item-tier1">
                    <a class="NavList_link NavList_link-tier1" href="/categories/running">Running</a>
                  </li>
                  <li class="NavList_item NavList_item-tier1">
                    <a class="NavList_link NavList_link-tier1" href="/categories/swimming">Swimming</a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="NavItem NavItem-mega">
              <a data-meganav-trigger="" class="NavItem_link" href="/categories/services">
                <span>Our Services</span>
                <svg class="NavItem_link_icon" viewBox="0 0 100 100">
                  <path d="M56.7,75.75 L95.4,37.05 C98.8,33.65 98.8,28.05 95.4,24.65 C92,21.25 86.4,21.25 83,24.65 L50.5,57.05 L18,24.55 C14.6,21.15 9,21.15 5.6,24.55 C3.9,26.25 3,28.55 3,30.75 C3,33.05 3.9,35.25 5.6,36.95 L44.3,75.75 C47.7,79.15 53.3,79.15 56.7,75.75 Z"></path>
                </svg>
              </a>
              <div class="NavItem_dropdown">
                <ul class="NavList NavList-root ">
                  <li class="NavList_item NavList_item-tier1 u-hide-xlarge-and-up">
                    <a class="NavList_link NavList_link-tier1" href="/categories/services">All Services</a>
                  </li>
                  <li class="NavList_item NavList_item-tier1">
                    <a class="NavList_link NavList_link-tier1" href="/categories/training">Training</a>
                  </li>
                  <li class="NavList_item NavList_item-tier1">
                    <a class="NavList_link NavList_link-tier1" href="/categories/consulting">Consulting</a>
                  </li>
                  <li class="NavList_item NavList_item-tier1">
                    <a class="NavList_link NavList_link-tier1" href="/categories/one-on-one">One on One</a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="NavItem">
              <a class="NavItem_link" href="/contact-us">Contact Us</a>
            </div>
          </div>
        </div>
        <div class="Navbar_overlay" data-js-toggle-active-trigger="nav"></div>
      </div>
      <div data-handheld=""></div>
    </div>
  </div>
</header>
 

 
Back to Documentation