How to Add a Second Custom Header in Your Shopify Store: A Complete Guide for 2024

Introduction

Adding a second header in Shopify can greatly enhance your store's design and navigation. Whether you're running a campaign, featuring a sale, or simply trying to organize your content better, a second header can help distinguish different sections of your site and improve user experience. In this guide, we will cover the steps to add a second header to your Shopify store.

Why Add a Second Header in Shopify?

A second header allows you to display different navigation menus, branding, and call-to-action (CTA) buttons on various pages of your store. This can help:

• Target different customer segments: You might want to offer a unique shopping experience for your wholesale and retail customers.
• Emphasize specific promotions or campaigns: A custom header can highlight special offers or featured collections on particular pages.
• Improve navigation: Offering different menus can simplify navigation based on the type of products or services displayed on certain pages.

In short, adding a second header can make your Shopify store more organized and user-friendly, thus enhancing overall engagement and conversion rates.

How to Add a Second Header in Shopify for 2024

There are several ways to add a second header in Shopify, depending on the theme you are using and your store’s needs. Let’s dive into how you can add a second header for specific themes like Debut, Dawn, and Venture free themes, as well as general instructions that apply across various themes.

General Steps for Adding a Second Header in Shopify

Step 1: Duplicate Your Theme Files

Before making any changes to your Shopify theme files, always duplicate your theme. This ensures you have a backup in case anything goes wrong during the customization process.

1. Go to your Shopify dashboard.
2. Navigate to Online Store > Themes.
3. In the “Current theme” section, click on Actions > Duplicate.
   

Step 2: Create a New Section for Second Header

Next, we’ll create a custom section for the second header.

1. In the Shopify admin, go to Online Store > Themes.
   
2. Click Actions > Edit code for your active theme.
3. In the left sidebar, click on the Sections folder and then click Add a new section.
   
4. Name the new section toolbar.

Now, copy and paste the following code into the new toolbar.liquid file:

Code Snippet 1

    
  {{ 'component-slideshow.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}

{%- liquid
  assign social_icons = true
  if settings.social_facebook_link == blank and settings.social_instagram_link == blank and settings.social_youtube_link == blank and settings.social_tiktok_link == blank and settings.social_twitter_link == blank and settings.social_pinterest_link == blank and settings.social_snapchat_link == blank and settings.social_tumblr_link == blank and settings.social_vimeo_link == blank
    assign social_icons = false
  endif
  if section.settings.enable_country_selector or section.settings.enable_language_selector
    assign language_country_selector = true
  endif
  if section.blocks.size > 0
    assign announcement_bar = true
  endif
-%}

{% if social_icons %}
  {{ 'component-list-social.css' | asset_url | stylesheet_tag }}
{% endif %}

{% style %}
    .heading__grid{
          display: grid;
      grid-template-columns: 1fr;
      grid-template-areas: "announcements";
    }

    .heading__grid--3-col{
               grid-template-columns: 6fr 2fr 2fr;
      grid-template-areas: "announcements social-icons language-currency";
      grid-gap: 2rem;
    }

    .header__grid__menu{
      grid-area: announcements;
      align-content: center;
    }

    .list_items{
            display: block;
      padding-left: 2.5rem;
    }

    .heading__grid--1-col{
      display: flex;
      align-content: center;
      justify-content: center;
      grid-area: social-icons;
    }

    .header__grid_menu_item{
          text-decoration: none;
      color: inherit;
    }

    .heading-localization{
          grid-area: language-currency;
      align-self: center;
      display: flex;
      justify-content: center;
    }

  .header__grid__bar{
        display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "announcements";
  }

     .list-menu {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .list-menu--inline {
      display: inline-flex;
      flex-wrap: wrap;
    }

     @media screen and (min-width: 750px) {
      .header__grid__bar {
        padding-top: {{ section.settings.padding_top }}px;
        padding-bottom: {{ section.settings.padding_bottom }}px;
      }
    }

  @media screen and (min-width: 750px) {
      .list_items {
        font-size: {{ section.settings.text_size }}%;
      }
    }

  @media screen and (max-width: 750px) {
      .header__grid__bar {
        display:none;
      }
    }

  .header__grid_menu_item_bold{
      font-weight: bold;
  }

  .header__grid_menu_item_normal{
        font-weight: normal;
  }

    summary.list-menu__item {
      padding-right: 2.7rem;
    }


    .list-menu__item {
      display: flex;
      align-items: center;
      line-height: calc(1 + 0.3 / var(--font-body-scale));
    }

    .list-menu__item--link {
      text-decoration: none;
      padding-bottom: 1rem;
      padding-top: 1rem;
      line-height: calc(1 + 0.8 / var(--font-body-scale));
    }

    @media screen and (min-width: 750px) {
      .list-menu__item--link {
        padding-bottom: 0.5rem;
        padding-top: 0.5rem;
      }
    }
{% endstyle %}

<div
  class="header__grid__bar color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator and section.blocks.size > 0 %} utility-bar--bottom-border{% elsif section.settings.show_line_separator and section.settings.show_social and social_icons%} utility-bar--bottom-border-social-only{% endif %}{% if section.settings.enable_country_selector or section.settings.enable_language_selector %} header-localization{% endif %}"
  {{ block.shopify_attributes }}
>
  <div class="utility-bar__grid{% if announcement_bar and language_country_selector or section.settings.show_social and social_icons %} heading__grid--3-col{% elsif language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--2-col{% endif %}">
    <div class="header__grid__menu">
      <ul class="list-menu__item list-menu">
        {%- for block in section.blocks -%}
          <li class="list_items">
            {%- if block.settings.button_label != blank -%}
              <a
                class="header__grid_menu_item {{ section.settings.text_weight }}"
                {% if block.settings.button_link == blank %}
                  role="link" aria-disabled="true"
                {% else %}
                  href="{{ block.settings.button_link }}"
                {% endif %}
              >
                {{- block.settings.button_label | escape -}}
              </a>
            {%- endif -%}
          </li>
        {%- endfor -%}
      </ul>
    </div>

    <div
      class="heading__grid--1-col"
    >
      {%- if section.settings.show_social and social_icons -%}
        {%- render 'social-icons', icon_scale: section.settings.icon_size -%}
      {%- endif -%}
    </div>
    <div class="heading-localization">
      {%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
        <localization-form class="small-hide medium-hide">
          {%- form 'localization', id: 'AnnouncementCountryForm', class: 'localization-form' -%}
            <div>
              <h2 class="visually-hidden" id="AnnouncementCountryLabel">{{ 'localization.country_label' | t }}</h2>
              {%- render 'country-localization', localPosition: 'AnnouncementCountry' -%}
            </div>
          {%- endform -%}
        </localization-form>
      {% endif %}

      {%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
        <localization-form class="small-hide medium-hide">
          {%- form 'localization', id: 'AnnouncementLanguageForm', class: 'localization-form' -%}
            <div>
              <h2 class="visually-hidden" id="AnnouncementLanguageLabel">{{ 'localization.language_label' | t }}</h2>
              {%- render 'language-localization', localPosition: 'AnnouncementLanguage' -%}
            </div>
          {%- endform -%}
        </localization-form>
      {%- endif -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "toolbar",
  "enabled_on": {
    "groups": ["header"]
  },
  "settings": [
     {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-4"
    },
    {
      "type": "checkbox",
      "id": "show_line_separator",
      "default": true,
      "label": "t:sections.header.settings.show_line_separator.label"
    },
    {
      "type": "header",
      "content": "t:sections.announcement-bar.settings.header__1.content",
      "info": "t:sections.announcement-bar.settings.header__1.info"
    },
    {
      "type": "checkbox",
      "id": "show_social",
      "default": false,
      "label": "t:sections.announcement-bar.settings.show_social.label"
    },
    {
      "type": "header",
      "content": "t:sections.announcement-bar.settings.header__3.content",
      "info": "t:sections.announcement-bar.settings.header__3.info"
    },
    {
      "type": "checkbox",
      "id": "enable_country_selector",
      "default": false,
      "label": "t:sections.announcement-bar.settings.enable_country_selector.label"
    },
    {
      "type": "header",
      "content": "t:sections.announcement-bar.settings.header__4.content",
      "info": "t:sections.announcement-bar.settings.header__4.info"
    },
    {
      "type": "checkbox",
      "id": "enable_language_selector",
      "default": false,
      "label": "t:sections.announcement-bar.settings.enable_language_selector.label"
    },
    {
      "type": "header",
      "content": "Toolbar ICON & TEXT Settings",
      "info": "Toolbar ICON & TEXT Settings"
    },
    {
          "type": "select",
          "id": "text_weight",
          "options": [
            {
              "value": "header__grid_menu_item_bold",
              "label": "Bold"
            },
            {
              "value": "header__grid_menu_item_normal",
              "label": "Normal"
            }
          ],
          "default": "header__grid_menu_item_normal",
          "label": "Text Weight"
        },
    {
          "type": "range",
          "id": "text_size",
          "min": 50,
          "max": 150,
          "unit": "%",
          "step": 5,
          "default": 100,
          "label": "Text size"
        },
     {
          "type": "range",
          "id": "icon_size",
          "min": 0.2,
          "max": 3,
          "unit": "%",
          "step": 0.2,
          "default": 1,
          "label": "Icon Size"
        },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 36,
      "step": 2,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 6
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 36,
      "step": 2,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 6
    }
  ],
  "blocks": [
    {
      "name": "Page",
      "type": "column",
      "limit": 8,
      "settings": [
        {
          "type": "text",
          "id": "button_label",
          "default": "t:sections.rich-text.blocks.buttons.settings.button_label_1.default",
          "label": "t:sections.rich-text.blocks.buttons.settings.button_label_1.label",
          "info": "t:sections.rich-text.blocks.buttons.settings.button_label_1.info"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "t:sections.rich-text.blocks.buttons.settings.button_link_1.label"
        }
      ]
    }
  ],
  "presets": [
    {
        "name": "Toolbar",
      "blocks": [
      {
        "type": "column"
      },
        {
        "type": "column"
      },
        {
        "type": "column"
      },
        {
        "type": "column"
      },
        {
        "type": "column"
      }
    ]
    }
  ]
}
{% endschema %}
    
  

Step 3: Update the Section Social-Icons to Customize the Icon Size 

You are successfully add the support of second header section in the previous steps but their are some settings or configuration which are not useable in your current theme so for that you have to update in some of the existing files. In this section you can update the social-icons.liquid file for customizing the size of the icons.

1.  In the Shopify admin, go to Online Store > Themes.
2. Click Actions > Edit code for your active theme.
3. Search for the file social-icons.liquid in snippets folder
4. Add the below styling code on the top of the file.
Code Snippet 2

    
  {% style %}
  @media screen and (min-width: 750px) {
     .header__grid__icon{
       scale: {{icon_scale}};
     }
   }
{% endstyle %}
    
  

5. Now replace the every span tag having svg-wrapper class "<span class="svg-wrapper">"  with  <span class="svg-wrapper header__grid__icon">.

Step 4: Enable the Language Selector in Your Shopify Store

 Next, we’ll enable the language selector for the second header. I am assuming here language selector is disabled on your shopify store.

1. In the Shopify admin, go to Settings>Language.
   
2. Click on the Add Language and Select the language according to your need.
   
3. Click on Add button for adding the language.
4. Now click on 3 dots and Click on Publish to add the language on your shopify store.
   

Step 5: Enable the Country Selector in Your Shopify Store

 Next, we’ll enable the country selector for the second header. I am assuming here country selector is disabled on your shopify store.

1. In the Shopify admin, go to Settings>Markets.
   
2. Click on the Add a Market and Select the market according to your need.
   
3. Add the market name  & Click on Add Market button for adding the market.

Step 6: Customize the Toolbar Section in Shopify Admin

You can now add and customize toolbar directly from the Shopify admin:

1. Go to Online Store > Themes > Customize.
2. In the left-hand menu, find your new toolbar section and add it to your homepage.
   
3. You can now customize second header directly through the theme editor.
   

Step 7: Save and Preview Your Changes

Once you’re satisfied with the changes, save them, and preview your store to see how the second header section looks.

Conclusion

Adding a second header in Shopify can dramatically improve the user experience and help tailor your site to different customer segments. Whether you are using the Debut, Dawn, or Venture themes, the process of adding a second header involves duplicating your theme files, customizing the new header, and applying it to specific pages through conditional logic. With Shopify 2.0 themes like Dawn, this process becomes even more accessible through the use of the theme editor. By creating distinct headers for different pages, you can enhance navigation, promote special offers, and improve the overall design of your Shopify store in 2024.