Different menu reflected to a collection page than homepage

Shopify Discussion
1

I’m looking into creating a “special” collection for my store and I would like this collection to have a different menu than the rest of the pages. The problem is that the menu headers are global to all pages on Shopify by default. I’m using a custom theme, and the dev support said it is only possible with a custom code.

As for example:

MAIN MENU (shows on homepage): SHOP | BESTSELLERS | LIMITED EDITIONS

and when they click the Limited Editions it will go to a collection with a different menu header

LIMITED EDITIONS MENU: FLAVORS | COLORS | MERCH | BESTSELLERS

Something like that. I hope you can help me with this. Thank you in advance.

2

Hello @Bekind24 ,

Yes it’s only possible with custom code.
If you are looking for an idea and o custom code then follow:
Care for an alternative menu for special collection.
Now find the existing menu code and make it conditional.

like

{% if collection.handle == ‘special’ %}

// Call you new menu
{% else %}

// leave existing code as it is.

{%endif %}

Thanks

3

Hey Bekind24,

To create a collection with a different menu on Shopify, you’ll need to use custom code because Shopify’s navigation is global by default.

The process involves conditionally rendering the different menus based on the page or collection the customer is viewing. Here’s a step-by-step guide on how to achieve this:

Steps to Set Up Different Menus for Different Collections on Shopify

Create the Menus in Shopify Admin:

Go to your Shopify admin and create two menus:

Main Menu: This will be your default menu for most pages (e.g., SHOP | BESTSELLERS | LIMITED EDITIONS).

Limited Editions Menu: This will be the special menu for your “Limited Editions” collection (e.g., FLAVORS | COLORS | MERCH | BESTSELLERS).

Identify the Handle for the Special Collection:

Find the handle of the collection where you want the special menu to appear. The handle is usually part of the URL of the collection page (e.g., if your collection URL is example.com/collections/limited-editions, the handle is limited-editions).

Edit the Header File in Your Theme:

Go to Online Store > Themes in your Shopify admin.

Click Actions > Edit code for your custom theme.

Find and open the header.liquid file, or whichever file contains your menu code (it may vary depending on your theme).

Add Conditional Logic to Display the Correct Menu:

Inside the header.liquid file, you’ll need to add some Liquid code to check if the user is on the “Limited Editions” collection and render the special menu for that collection.

Here’s an example of the code you can use:

{% if collection.handle == ‘limited-editions’ %}

{% else %} {% endif %}

Test the Changes:

After saving the file, visit your store and check that the menus update correctly when you navigate to the “Limited Editions” collection. The custom menu should now show only on the “Limited Editions” collection, and the main menu will show on all other pages.

If you want to add more customization or make sure the menu changes are applied across different templates (like product pages within the collection), you might need to add similar conditional code in other template files such as collection.liquid or product.liquid.

By implementing this custom code, you can conditionally display different menus for different collections/pages in your Shopify store, enhancing the navigation experience for users.

Let me know if you need help with any specific part of this process or theme adjustments!

1 Like