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
          data-menu-init="" should match the menu identifier
      -->
      <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">
      <div class="sc-hide-medium-and-up">
        <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" data-search-input="" class="SC-Field_input sc-one-whole" autocomplete="off" placeholder="Search for products, categories or content">
            <svg class="" viewBox="0 0 100 100">
            <g><path d="M45.84798,4.25 C56.6814614,4.25 66.9349002,8.52068637 74.5550868,16.140873 C82.1752735,23.7610596 86.4459598,34.0144984 86.4459598,44.84798 C86.4459598,53.5329882 83.7072298,61.8702215 78.6163161,68.819503 L78.257,69.301 L95.1025026,86.1476817 C95.8887876,86.9339667 96.4168727,87.9224831 96.6369887,89.0065873 L96.6855728,89.279543 L96.7211521,89.5561113 L96.7430827,89.8494746 L96.75,90.1250921 C96.75,91.6171937 96.1631622,93.041843 95.1025026,94.1025026 C94.041843,95.1631622 92.6171937,95.75 91.1250921,95.75 C89.9366945,95.75 88.7868583,95.3770369 87.8120044,94.6690363 L87.5902064,94.4997215 L87.3603128,94.3039065 L87.1477221,94.1025431 L70.301,77.257 L70.2586798,77.2902473 C63.8692938,82.1063214 56.2441255,84.9127335 48.2231203,85.3773021 L47.6208158,85.4077487 L47.0314955,85.4289697 L46.4377117,85.4417308 L45.84798,85.4459598 C35.0144984,85.4459598 24.7610596,81.1752735 17.140873,73.5550868 C9.52068637,65.9349002 5.25,55.6814614 5.25,44.84798 C5.25,34.0144985 9.52068636,23.7610597 17.140873,16.140873 C24.7610597,8.52068636 35.0144985,4.25 45.84798,4.25 Z M46.0499832,15.65 C38.2026676,15.65 30.7808212,18.741292 25.2610559,24.2610605 C19.7412904,29.780829 16.65,37.2026798 16.65,45.05 C16.65,52.8973202 19.7412904,60.319171 25.2610559,65.8389395 C30.7808212,71.358708 38.2026676,74.45 46.0499832,74.45 C52.1661069,74.45 58.0404559,72.5833694 62.9847923,69.0874531 L63.4316963,68.7651607 L63.8607739,68.4437078 L64.2595609,68.1339626 L64.6565964,67.8145382 L66.91,65.981 L68.8118525,63.6599078 L69.1353278,63.2577526 C72.7963308,58.6253858 74.9553623,53.0583384 75.3741811,47.1836665 L75.4083398,46.6320339 L75.431886,46.0934163 L75.4456162,45.5641325 L75.4500244,45.0559222 L75.4460409,44.5595 C75.321663,36.8928101 72.2400236,29.6621767 66.8389103,24.2610605 C61.319145,18.741292 53.8972986,15.65 46.0499832,15.65 Z"></path></g>
            </svg>
          </div>
        </form>
      </div>
      <!-- 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