Different Header Templates for Collections

Store Design
, , , , , ,
1

Hi All

We are just starting out with Shopify. Coming from WooCommerce / Elementor Pro.

We work with different brands, so each brand is a collection in Shopify. Each collection has their own unique products. No product is assigned to two collections.

We need a way to show a unique header (logo plus a menu) for each collection. So, for example Collection A will have its own logo, a set of menu that points to collections>products/tag. Moving a step forward, if you click on a product - it shows the same header for the collection it belongs to. So, Product X belongs to Collection A. It should show Collection A header. But if they are on Product Y which belongs to Collection B - show Collection B header.

Is there an app or theme that allows this?

Second, hide the search icon on top so one end user cannot see the other products from other brands.

2

hello there

Yes, there are several Shopify apps and themes that can help you achieve your requirements for unique headers for each collection. Here are some options:

  1. Collection Header by Plobal Apps - This app allows you to customize the header for each collection by adding a unique logo, menu, and more.

  2. Debutify Theme - This theme includes a collection-specific header feature that allows you to customize the header for each collection.

  3. Turbo Theme by Out of the Sandbox - This theme includes a feature called “Dynamic Sections” that allows you to create custom sections for each collection, including the header.

To hide the search icon on the top of your Shopify store, you can use CSS code to hide it based on the collection or page being viewed. Here’s an example of how to do this:

  1. Go to your Shopify Admin and click on “Online Store” > “Themes”

  2. Click “Actions” > “Edit code” for the theme you are using

  3. In the left-hand sidebar, click on “Assets” and then click on “theme.scss.liquid”

  4. Scroll to the bottom of the file and add the following code:

    /* Hide search icon on specific collection page */ .template-collection .search-toggle { display: none; }

    /* Hide search icon on specific product page */ .template-product .search-toggle { display: none; }

  5. Save the file and refresh your website to see the changes.

Note: Replace “.template-collection” or “.template-product” with the actual class for the collection or product page in which you want to hide the search icon.

I hope this helps!

3

I am looking to do a very similar thing with collections. I cannot find the ‘Collection Header by Plobal Apps’ app you are talking about. Any link you can provide for that?

Thanks.