Customize your store header

StoreConnect allows you to customize your store header in 4 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.

4. Customising the header snippet template in your Theme (recommended option if using a theme).

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 Content Block field on your store record and creating a Content Block using the “No added styling” template.

A full featured example of a custom header is detailed in the Header HTML and Liquid Boilerplate section. 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. Feel free to modify it to suit your needs.

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

In addition to customising your header, you can leverage it using Liquid methods to make your header content block dynamic. You will need to be familiar with Liquid and HTML as it is essential to implement new features.

Header HTML and Liquid boilerplate

          {%- render "shared/icons/hamburger" %}
















        {%- render "header/search" %}






          {%- if current_customer != blank %}

            {{ "header.dropdowns.account.heading" | t }}


            {%- if current_customer.account != blank and current_customer.account.name != blank and current_customer.account.name != current_customer.name %}
              {{ current_customer.account.name }}
            {%- endif %}


                {{ "header.dropdowns.account.profile" | t }}




                {{ "header.dropdowns.account.orders" | t }}



                {{ "header.dropdowns.account.subscriptions" | t }}


            {%- if current_account.account_credits.size > 0 and current_customer.can_use_account_credit? %}


                  {{ "header.dropdowns.account.account_credits" | t }}


            {%- endif %}
            {%- if current_store.display_points? and current_customer.can_use_account_points? %}


                  {{ "header.dropdowns.account.account_points" | t }}


            {%- endif %}
            {%- if current_account.product_approvals.size > 0 %}


                  {{ "header.dropdowns.account.product_approvals" | t }}


            {%- endif %}


                {{ "header.dropdowns.account.logout" | t }}



          {%- else %}

              {{ "header.dropdowns.account.login" | t }}

          {%- endif %}



        {%- capture item_count %}
          {%- if current_cart != blank and current_cart.item_count > 0 %}

            {{ current_cart.item_count }}

          {%- endif %}
        {%- endcapture %}



              {{ "header.dropdowns.cart.heading" | t }}

            {{ item_count }}


            {%- render "shared/icons/cart" %}
            {{ item_count }}

          {%- comment %} Dropdown {% endcomment %}
          {%- if current_cart != blank and current_cart.items.size > 0 %}


                {{ "header.dropdowns.cart.close" | t }}

              {%- comment %} Line items {% endcomment %}

                {%- render "shared/cart/items", source: current_cart, compact: true, width: "70px" %}

              {%- comment %} Cart total {% endcomment %}

                {%- render "shared/order_total", source: current_cart, compact: true %}

              {%- comment %} Checkout button {% endcomment %}
              {%- render "shared/cart/checkout_button", class: "SC-Button SC-Button-primary SC-Button-expanded" %}

          {%- endif %}







        {%- render "header/search" %}

      {%- if current_store.header_menu != blank %}
        {{ current_store.header_menu.render }}
      {%- else %}

          {%- render "header/menu" %}

      {%- endif %}

Header theme snippet

This option is the most reliable way to customise and enhance your headers, it allows you to use the other theme snippets, implement highly custom liquid and JS code to improve the user experience and access to any out-of-the-box features.

It will also allow you to keep using the snippets directory in a more efficient and organised way meaning that you don’t need to keep a large number of HTML lines in one single file.

Header snippet

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:

• liquid-reference

• theme-reference

• menu-builder