Custom Header
StoreConnect allows you to customize your store header in 4 ways.
-
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.
-
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.
-
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.
-
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
<header class="SC-Header" id="SC-Header">
<div class="SC-Header_inner">
<div class="SC-Header_inner_left">
<button data-menu-init="{% if current_store.header_menu != blank %}{{ current_store.header_menu.identifier }}{% else %}header{% endif %}" class="SC-Icon SC-Icon-button SC-Icon-large sc-hide-medium-and-up" type="button">
{%- render "shared/icons/hamburger" %}
</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 }}" alt="{{ current_store.logo.alt_text }}" 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 }}" alt="{{ current_store.logo.alt_text }}" class="SC-Logo_image" />
</a>
</div>
<div class="sc-grow sc-hide-up-to-medium">
{%- render "header/search" %}
</div>
</div>
<div class="SC-Header_inner_right">
<ul class="SC-Menu tier1 end sc-justify-end" id="SC-HeaderMenuSecondary">
<!-- login dropdown -->
<li class="SC-Menu_item dropdown sc-hide-up-to-medium">
{%- if current_customer != blank %}
<a href="{{ current_store.account_path }}" class="SC-Menu_link" data-nav-trigger="account">
{{ "header.dropdowns.account.heading" | t }}
</a>
<ul class="SC-Menu dropdown" data-nav="account">
{%- if current_customer.account != blank and current_customer.account.name != blank and current_customer.account.name != current_customer.name %}
<li><h3>{{ current_customer.account.name }}</h3></li>
{%- endif %}
<li class="SC-Menu_item">
<a class="SC-Menu_link" href="{{ current_store.account_path }}">
{{ "header.dropdowns.account.profile" | t }}
</a>
</li>
<li class="SC-Menu_item">
<a class="SC-Menu_link" href="{{ current_store.orders_path }}">
{{ "header.dropdowns.account.orders" | t }}
</a>
<li class="SC-Menu_item">
<a class="SC-Menu_link" href="{{ current_store.subscriptions_path }}">
{{ "header.dropdowns.account.subscriptions" | t }}
</a>
</li>
{%- if current_account.account_credits.size > 0 and current_customer.can_use_account_credit? %}
<li class="SC-Menu_item">
<a class="SC-Menu_link" href="{{ current_store.account_credits_path }}">
{{ "header.dropdowns.account.account_credits" | t }}
</a>
</li>
{%- endif %}
{%- if current_store.display_points? and current_customer.can_use_account_points? %}
<li class="SC-Menu_item">
<a class="SC-Menu_link" href="{{ current_store.account_points_path }}">
{{ "header.dropdowns.account.account_points" | t }}
</a>
</li>
{%- endif %}
{%- if current_account.product_approvals.size > 0 %}
<li class="SC-Menu_item">
<a class="SC-Menu_link" href="{{ current_store.product_approvals_path }}">
{{ "header.dropdowns.account.product_approvals" | t }}
</a>
</li>
{%- endif %}
<li class="SC-Menu_item">
<a href="{{ current_store.logout_path }}" data-method-delete class="SC-Menu_link">
{{ "header.dropdowns.account.logout" | t }}
</a>
</li>
</ul>
{%- else %}
<a href="{{ current_store.login_path }}" class="SC-Menu_link">
{{ "header.dropdowns.account.login" | t }}
</a>
{%- endif %}
</li>
<!-- # end of login dropdown -->
<!-- cart dropdown -->
{%- capture item_count %}
{%- if current_cart != blank and current_cart.item_count > 0 %}
<div class="SC-Count sc-ml-tiny" data-cart-nav-count>
{{ current_cart.item_count }}
</div>
{%- endif %}
{%- endcapture %}
<li class="SC-Menu_item dropdown" data-root-nav data-cart-menu>
<a href="{{ current_store.cart_path }}" class="SC-Menu_link sc-hide-up-to-medium" data-nav-trigger="cart">
<span class="sc-hide-up-to-medium sc-pointer-events-none">
{{ "header.dropdowns.cart.heading" | t }}
</span>
{{ item_count }}
</a>
<a href="{{ current_store.cart_path }}" class="SC-Icon SC-Icon-button SC-Icon-large sc-hide-medium-and-up">
{%- render "shared/icons/cart" %}
{{ item_count }}
</a>
{%- comment %} Dropdown {% endcomment %}
{%- if current_cart != blank and current_cart.items.size > 0 %}
<div class="SC-Cart SC-Menu dropdown" data-nav="cart" data-sc-cart>
<button class="SC-Menu_button sc-hide-medium-and-up" data-nav-close="root" type="button">
{{ "header.dropdowns.cart.close" | t }}
</button>
{%- comment %} Line items {% endcomment %}
<div class="SC-CartProducts sc-grow u-overflow-y-auto">
{%- render "shared/cart/items", source: current_cart, compact: true, width: "70px" %}
</div>
{%- comment %} Cart total {% endcomment %}
<div class="sc-mb-small" data-cart-nav-summary>
{%- render "shared/order_total", source: current_cart, compact: true %}
</div>
{%- comment %} Checkout button {% endcomment %}
{%- render "shared/cart/checkout_button", class: "SC-Button SC-Button-primary SC-Button-expanded" %}
</div>
{%- 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">
{%- render "header/search" %}
</div>
{%- if current_store.header_menu != blank %}
{{ current_store.header_menu.render }}
{%- else %}
<ul class="SC-Menu dropdown tier1" id="SC-HeaderMenuPrimary" data-menu="header">
{%- render "header/menu" %}
</ul>
{%- endif %}
</div>
</div>
</header>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
Theme Template Key: snippets/header
{%- cache "header", items: [current_store, current_customer, current_cart] -%}
{%- if current_store.header != blank %}
{{ current_store.header.render }}
{%- else %}
{%- capture store_logo %}
<a href="{{ current_store.home_path }}" class="SC-Logo">
{%- if current_store.logo != blank %}
<img src="{{ current_store.logo.url }}" class="SC-Logo_image">
{%- else %}
<svg class="Placeholder" width="180px" viewBox="0 0 180 40">
<rect width="100%" height="100%" rx="20"></rect>
</svg>
{%- endif %}
</a>
{%- endcapture %}
<header class="SC-Header" id="SC-Header">
{%- render "header/geolocation" %}
<div class="SC-Header_inner">
<div class="SC-Header_inner_left">
<button data-menu-init="header" class="SC-Icon SC-Icon-button SC-Icon-large sc-hide-medium-and-up" type="button">
{%- render "shared/icons/hamburger" %}
</button>
<div class="sc-hide-up-to-medium">
{{ store_logo }}
</div>
</div>
<div class="SC-Header_inner_center">
<div class="sc-hide-medium-and-up">
{{ store_logo }}
</div>
<div class="sc-grow sc-hide-up-to-medium">
{%- render "header/search" %}
</div>
</div>
<div class="SC-Header_inner_right">
<ul class="SC-Menu tier1 end sc-justify-end" id="SC-HeaderMenuSecondary">
{%- render "header/dropdown/account" %}
{%- render "header/dropdown/cart" %}
</ul>
</div>
</div>
<div class="SC-Navbar">
<div class="SC-Navbar_inner">
<div class="sc-hide-medium-and-up">
{%- render "header/search" %}
</div>
{%- if current_store.header_menu != blank %}
{{ current_store.header_menu.render }}
{%- else %}
<ul class="SC-Menu dropdown tier1" id="SC-HeaderMenuPrimary" data-menu="header">
{%- render "header/menu" %}
</ul>
{%- endif %}
</div>
</div>
</header>
{%- endif %}
{%- endcache %}
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