How to add custom header for specific pages?

Store Design
, , ,

Topic summary

A user needed to display different menu bars on different pages—specifically, one menu for product pages and another for all other pages. They created two separate menu JSON files and located where the menu is called in theme.liquid, but their conditional logic using page.handle wasn’t working correctly.

Solution provided:
Another user suggested using template.name == "product" instead of page.handle to target product pages:

{%- if template.name == "product" -%}
   {% sections 'header-group-2' %}
{% else %}
   {% sections 'header-group' %}
{%- endif -%}

Outcome:
The original poster confirmed this solution worked. Since they run a single-product store, having the second menu on all product pages meets their needs.

Follow-up questions:

  • One user asked where to place the code (unfamiliar with CSS)
  • Another user requested help adding a custom header to a specific page, referencing an external example site for the desired design
Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
2

Hey @youngjack777 ,

Do you want that menu on a one product page or all the product pages?

If you need that in all product pages then do this.

{%- if template.name == "product" -%}
   {% sections 'header-group-2' %}
{% else %}
   {% sections 'header-group' %}
{%- endif -%}
2 Likes