This article is intended for advanced users and our partners as it requires advanced web development or Salesforce admin or programming knowledge. While the functionality is part of StoreConnect, we do not provide end user assistance to implement it beyond our help documentation. If you need help or are unsure on how to do this, you can hire one of our StoreConnect partners.

This feature requires StoreConnect version 10.0 or above. Here is how to check your version

Custom Header

StoreConnect allows you to customize your store header in 3 ways.

  1. Using the default menu which allows you to only adjust which product categories are shown in what order to the left of the Account menu option. How to do this is detailed in our Navigation Product Categories help article.

  2. Using the menu builder to customise the navigation completely while using the standard search and account login links. How to do this is detailed in our Menu Builder help article.

  3. Completely replacing the Header Menu HTML in it’s entirety and optionally use the Menu Builder to control the navigation menu from within your Salesforce environment. This article shows you how to do this.

How to Use a 100% 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="SC-Header" id="SC-Header">
  <div class="SC-Header_inner">

    <div class="SC-Header_inner_left">
      <!-- Hamburger icon for handheld devices -->
      <button data-menu-init="header" class="SC-Icon SC-Icon-button SC-Icon-large sc-hide-medium-and-up" type="button">
        <?xml version="1.0" encoding="UTF-8"?>
        <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
          <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" id="Combined-Shape" fill="currentColor"></path></g>
        </svg>
      </button>
      <!--  Logo for large and up screens -->
      <div class="sc-hide-up-to-medium">
        <a class="SC-Logo" href="{{ current_store.home_path }}">
          <img src="{{ current_store.logo.url }}" class="SC-Logo_image" />
        </a>
      </div>
    </div>

    <div class="SC-Header_inner_center">
      <!--  Logo for handheld devices -->
      <div class="sc-hide-medium-and-up">
        <a href="{{ current_store.home_path }}">
          <img src="{{ current_store.logo.url }}" class="SC-Logo_image" />
        </a>
      </div>
      <div class="sc-grow sc-hide-up-to-medium">
        <form action="/search/products" accept-charset="UTF-8" method="get">
          <div id="SC-GlobalSearch" class="SC-Field SC-Field-special SC-Field-icon sc-m-none">
            <input type="search" name="q" id="q" class="SC-Field_input sc-one-whole" placeholder="Search for products, categories or  content ...">
            <!-- Search icon -->
              <svg class="" 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>
          </div>
        </form>
      </div>
    </div>

    <div class="SC-Header_inner_right">
      <ul class="SC-Menu tier1 end sc-justify-end" id="SC-HeaderMenuSecondary">
        <li class="SC-Menu_item dropdown sc-hide-up-to-large">
          {% if current_customer %}
          <a href="{{ current_store.profile_path }}" class="SC-Menu_link" data-nav-trigger="account">Account</a>
          <ul class="SC-Menu dropdown" data-nav="account">
            <li><h4>Hi there, {{ current_customer.firstname }}</h4></li>
            <li class="SC-Menu_item">
              <a class="SC-Menu_link" href="{{ current_store.profile_path }}">
                Account info
              </a>
            </li>
            <li class="SC-Menu_item">
              <a class="SC-Menu_link" href="{{ current_store.shipping_details_path }}">
                Shipping Information
              </a>
            </li>
            <li class="SC-Menu_item">
              <a class="SC-Menu_link" href="{{ current_store.orders_path }}">
                Orders
              </a>
            </li>
            <li class="SC-Menu_item">
              <a class="SC-Menu_link" href="{{ current_store.logout_path }}" data-method='delete'>
                Log out
              </a>
            </li>
          </ul>
          {% else %}
          <a href="{{ current_store.login_path}}" class="SC-Menu_link" data-nav-trigger="account">Log in</a>
          {% endif %}
        </li>
        <li class="SC-Menu_item dropdown" data-root-nav>
          <a href="{{ current_store.cart_path }}" class="SC-Menu_link sc-hide-up-to-large" data-nav-trigger="cart">
            <span class="sc-hide-up-to-medium u-pointer-events-none">Cart</span>
            {% if current_cart.item_count > 0 %}
              <div class="SC-Count u-s-ml-tiny" data-cart-nav-count>
                {{ current_cart.item_count }}
              </div>
            {% endif %}
          </a>

          <!-- responsive cart -->
          <a href="{{ current_store.cart_path }}" class="SC-Icon SC-Icon-button SC-Icon-large sc-hide-large-and-up">
            <svg class="" viewBox="0 0 100 100">
              <g transform="translate(9.000000, 4.000000)">
                <path d="M41.499805,-4 C51.6046887,-4 59.8173402,4.10160887 59.9966178,14.1636848 L59.99961,14.499805 L59.99961,28.703125 C59.99961,30.912264 58.208749,32.703125 55.99961,32.703125 C53.8574146,32.703125 52.1085311,31.0191565 52.0045053,28.9027653 L51.99961,28.703125 L51.99961,14.499805 C51.99961,8.70092282 47.2986872,4 41.499805,4 C35.7959865,4 31.1544237,8.54805755 31.0037742,14.2155151 L31,14.499805 L31,28.703125 C31,30.912264 29.209139,32.703125 27,32.703125 C24.8578046,32.703125 23.1089211,31.0191565 23.0048953,28.9027653 L23,28.703125 L23,14.499805 C23,4.28264482 31.2826448,-4 41.499805,-4 Z"></path>
                <path d="M73.3155652,14 L9.6844348,14 C4.37131621,14 -0.0142109815,18.1548739 -0.300987928,23.4602474 L-3.65233928,85.4602474 C-3.66205569,85.6400009 -3.66691655,85.8199841 -3.66691655,86 C-3.66691655,91.5228475 0.810235955,96 6.33308345,96 L76.6669165,96 C76.8469325,96 77.0269156,95.9951391 77.2066691,95.9854227 C82.7214658,95.6873256 86.9504364,90.9750441 86.6523393,85.4602474 L83.3009879,23.4602474 C83.014211,18.1548739 78.6286838,14 73.3155652,14 Z M9.6844348,22 L73.3155652,22 C74.3781889,22 75.2552944,22.8309748 75.3126497,23.8920495 L78.6640011,85.8920495 C78.7236205,86.9950088 77.8778264,87.9374651 76.7748671,87.9970845 L76.6669165,88 L6.33308345,88 C5.27872166,88 4.41491833,87.1841222 4.33856919,86.1492623 L4.33381245,85.9460051 L7.68735026,23.8920495 C7.74470565,22.8309748 8.62181109,22 9.6844348,22 Z"></path>
              </g>
            </svg>
            {% if current_cart.item_count > 0 %}
              <div class="SC-Count u-s-ml-tiny" data-cart-nav-count>
                {{ current_cart.item_count }}
              </div>
            {% endif %}
          </a>

          {% if current_cart.item_count > 0 %}
          <form class="SC-Cart Menu dropdown" data-nav="cart" data-sc_cart>
            <button class="SC-Menu_button sc-hide-large-and-up sc-font-bold sc-mb-small" data-nav-close="root" type="button">
              Close
            </button>
            <div class="SC-CartProducts sc-grow u-overflow-y-auto">
              {% assign TotalPricesWithoutDeposits = 0 %}
              {% for line_item in current_cart.items %}
              {% assign lineItemTotalPrice = line_item.quantity | times: line_item.product.pricing.price %}
              <div class="ProductItem" data-sc-cart-booking data-product-item-id="{{ line_item.product.id }}">
                <a class="SC-ProductItem_image" href="{{ line_item.product.path }}">
                  {% if line_item.product.image %}
                  <img src="{{ line_item.product.image.thumb_url }}">
                  {% elsif line_item.product.master.image %}
                  <img src="{{ line_item.product.master.image.thumb_url }}">
                  {% endif %}
                </a>
                <div class="SC-ProductItem_summary">
                  <div class="sc-grow sc-mr-base">
                    <a class="SC-ProductItem_heading" href="{{ line_item.product.path }}">
                      {{ line_item.product.name }}
                    </a>
                    {% if line_item.product.subscription? %}
                      <span class="SC-ProductItem_subheadline">
                        <div class="sc-mb-micro">{{ line_item.product.pricing.subscription_term }}</div>
                      </span>
                    {% endif %}
                    <span  class="SC-ProductItem_qty"  data-spec-line-item-quantity>
                      Qty {{ line_item.quantity }}
                    </span>
                  </div>
                  <div class="SC-ProductItem_total">
                    {% if line_item.product.pricing.deposit_required? %}
                    {% assign TotalDepositAmount = line_item.product.pricing.deposit_amount | times: line_item.quantity %}
                    {% assign TotalWithDepositReduced = lineItemTotalPrice | minus: TotalDepositAmount %}
                    {% assign TotalPricesWithoutDeposits = TotalPricesWithoutDeposits | plus: TotalWithDepositReduced %}
                      <div class="sc-mb-tiny sc-font-small" data-spec-line-item-total-primary>
                       Deposit ${{ TotalDepositAmount }}
                      <div class="sc-shade-neutral sc-font-tiny">Total due ${{ lineItemTotalPrice }}</div>
                    </div>
                    {% else %}
                      <div class="sc-mb-tiny sc-font-small" data-spec-line-item-total-primary>${{ lineItemTotalPrice }}</div>
                    <ul>
                    </ul>
                    {% endif %}
                  </div>
                </div>
              </div>
              {% endfor %}
              <div class="sc-mb-small" data-cart-nav-summary>
                <div class="SC-OrderTotal">
                  <div class="SC-OrderTotal_line">
                    <div class="SC-OrderTotal_line_label">Total tax</div>
                    <div class="SC-OrderTotal_line_label" data-spec-tax-total>${{ current_cart.total_tax }}</div>
                  </div>
                  <div class="SC-OrderTotal_line">
                    <div class="SC-OrderTotal_line_label">Total payment due</div>
                    <div class="SC-OrderTotal_line_label" data-spec-cart-total>${{ current_cart.total }}</div>
                  </div>
                  <div class="SC-OrderTotal_line sc-font-base sc-mt-small sc-shade-darkest">
                    <div class="SC-OrderTotal_line_label">Payment due now</div>
                    {% assign PaymentDueNowWithoutDeposits = current_cart.total | minus: TotalPricesWithoutDeposits %}
                    <div class="SC-OrderTotal_line_label" data-spec-cart-due>
                      ${{ PaymentDueNowWithoutDeposits }}</div>
                  </div>
                </div>
              </div>
              <a class="SC-Button SC-Button-primary SC-Button-expanded" href="{{ current_store.checkout_path }}" data-sc-checkout-btn>
                Checkout
              </a>
            </div>
           </form>
          {% endif %}
        </li>
      </ul>
    </div>

  </div> <!-- #end of Header_inner -->
  <div class="SC-Navbar">
    <div class="SC-Navbar_inner">
      <!-- the 'header' parameter should be changed according to your
           custom header identifier using the menu builder (see important notes) -->
      {{ 'header' | menu }}
      <!-- StoreConnect 10.5.0 and up use: -->
      {{ all_menus['header'].render }}
    </div>
  </div>

</header>

Important Notes

We have currently updated our liquid methods documentation so you can achieve more complex functionalities on your header. Our liquid methods will help you to render those elements that you want to display on your header without being limited by our core header.

References:

 

 
Back to Documentation