Customize your store header

There are four ways to customize your store header. Pick the one that matches how much of the header you need to change.

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 Design site navigation for products help article.

2. Using the menu builder to customize 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. Replacing the header menu HTML entirely, and optionally using the Menu Builder to control the navigation menu from Salesforce. This article covers this method.

4. Customizing the header snippet template in your theme. This is the best option if you already use a custom theme.

Replace the header with a content block

Use this method to replace the site header completely from Salesforce, without editing theme files. You need to be comfortable with HTML and Liquid.

1. Open the Store record and go to the CMS tab.

2. Click Header Content Block and create a new Content Block.

3. Select No added styling in the Content Template field.

4. Enter a Name for the content block.

5. Paste your header markup into the Content field. The boilerplate below reproduces a header close to the default one, and you can modify it from there.

6. Click Save.

7. Save the Store record.

The new header takes a few minutes to appear. Reload your storefront and confirm your header renders in place of the default one.

Header HTML and Liquid boilerplate

```liquid

{%- 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 }}
  </ul> {%- 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 %}
  </div> </div>
  {%- render "header/search" %}

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

  {%- render "header/menu" %}

  {%- endif %}
  </header> ``` ## Customize the header theme snippet This is the most reliable method. It lets you reuse the other theme snippets, write custom Liquid and JavaScript, and reach any out-of-the-box feature. It also keeps the snippets directory usable, so you are not maintaining a large block of HTML in a single field. Start from the base theme's header snippet: [header.liquid in the base theme](https://github.com/getstoreconnect/base-theme/blob/main/templates/snippets/header.liquid). For the Liquid tags, filters, and objects available inside the snippet, see [working with Liquid](working-with-liquid). - theme-reference - [Menu builder](menu-builder)