Change Header and Footer when in specific collection, Dawn Theme

Shopify Discussion
1

Hi I’d like to change the header (to include logo and menu) for a specific collection. I am using Dawn theme. How would I do this?

2

I’ve tried what the video suggests but the changes I make to my new collection template are applied across all pages. How to prevent this?

3

Yes, I did that and the edit was applied to the site homepage.

4

Hi,

You can create separate header groups for different collections and call them based on specific requirements. For example:

{%- if request.page_type != 'password' -%}
	{%- if request.path == "/" -%}
		
		{% sections 'header-group-home' %}
	{%- elsif request.path contains "/collection1" -%}
		
		{% sections 'header-group-collection1' %}
	{%- elsif request.path contains "/collection2" -%}
		
		{% sections 'header-group-collection2' %}
	{%- else -%}
		
		{% sections 'header-group' %}
	{%- endif -%}
{%- endif -%}
5

Where do I go to create the different header group? When I’m in Theme > Customize, I cannot duplicate the Header.

6

For some reason my store theme doesn’t have header groups. Please advise?

7

Sorry @JillKn , it’s not possible to achieve this through the customizer only. You will need some knowledge of Liquid files to add conditions based on your requirements.

If you are using the Dawn theme, there should definitely be a header group in the theme.liquid file.

The header is generated from the sections/header.liquid file, and the footer is generated from the sections/footer.liquid file. You can add the necessary conditions in these files.

I have implemented the same in the demo theme below. Please review.

Home URL: https://deservefirst.myshopify.com/
Collection URL: https://deservefirst.myshopify.com/collections/all
Store Pass: deservefirst

Code We are using:

{%- if request.path == "/" -%}
	
	{% sections 'header-group-home' %}
{%- else -%}
	
	{% sections 'header-group' %}
{%- endif -%}

deservefirst_0-1718079255271.png
deservefirst_0-1718079255271.png3066×1962 329 KB

8

Wow, That is amazing. I thought it would work but I can’t quite get there. I added this to my theme.liquid file:

{%- if request.path == “https://www.bennetttothetrade.com/” -%}

{% sections ‘header-group-home’ %}
{%- else -%}

{% sections ‘header-group’ %}
{%- endif -%}

But, still, when I alter the header for the collection template I named bennett-home, the homepage menu changes also. What I want is all the pages including the homepage to have the exact same header, with the Pewter Collection having a different header.

I really appreciate your help. Please advise!

9

What I want is all the pages including the homepage to have the exact same header, with the Pewter Collection having a different header.

I added this to my theme.liquid file:

{%- if request.path == “https://www.bennetttothetrade.com/” -%}

{% sections ‘header-group-home’ %}
{%- else -%}

{% sections ‘header-group’ %}
{%- endif -%}

When I alter the header for the collection template I named bennett-home, the homepage menu changes also.

10

@JillKn Try following steps.

  • Navigate to Theme Code Editor:

    • Go to your Online Store dashboard.
    • Select Theme.
    • Click on Edit code.

  • Create a New JSON Section:

    • In the left-hand sidebar, under Sections, create a new JSON file named header-group-pewter.json.

  • Add Code to JSON Section:

    • Copy and paste the following code into header-group-pewter.json:
{
  "type": "header",
  "name": "Header Group Pewter",
  "sections": {
    "header": {
      "type": "header",
      "settings": {
        "logo_position": "top-center",
        "menu": "main-menu-collections-pages",
        "menu_type_desktop": "dropdown",
        "sticky_header_type": "on-scroll-up",
        "show_line_separator": true,
        "color_scheme": "scheme-2",
        "menu_color_scheme": "scheme-1",
        "enable_country_selector": true,
        "enable_language_selector": true,
        "mobile_logo_position": "center",
        "margin_bottom": 0,
        "padding_top": 20,
        "padding_bottom": 20
      }
    }
  },
  "order": [
    "header"
  ]
}

  • Create a Custom Template:

    • Create a new template named collection.pewter.

  • Assign the Template to Pewter Collection:

    • Assign the newly created collection.pewter template to your pewter collection.

  • Edit theme.liquid:

    • Open theme.liquid.

    • Search for the line {% sections ‘header-group’ %} and replace it with the following code:

{%- if template == "collection.pewter" -%}
  
  {% sections 'header-group-pewter' %}
{%- else -%}
  
  {% sections 'header-group' %}
{%- endif -%}

  • Customize Your Header:

    • Go to Online Store → Theme → Customize.
    • Select the newly created template and customize your header as needed.
1 Like
11

Amazing, @deservefirst thank you thank you! Perfectly explained.