Subcollection inside collection and product grid

[swarique]

Hi Guys,

I am facing an issue which looks simple but is tricking me a lot. I wanted to create the subcollection page inside the collection page and then the product page on the subcollection page. Along with this I want to show related/ recommended products on all pages.

To do this, I created the separate templates in collections and then added relevant collections inside the collection page. Example - When open Women Jewellery the subcollections will show Necklace, Bracelets etc as separate collections. I created the women jewellery template and assigned Necklace, Bracelets to women jewellery. However, When clicking inside the Necklace, It is again showing me the same menu (Collection sub-list) instead of only showing the products tagged to Necklace.

Do I need to create separate templates for each product category as well? If this is so it will be very cumbersome and inconvenient.

Please let me know if there is simpler solution to this.

Thanks.

[Maximus3]

Can’t speak for the scenario where you are being taken to the parent collection because there is no store link or screenshots to see.

But yes in general, duplicating the Collection List template and putting your collections in each template is the best way until Shopify makes sub-collections a native feature. But I’ve noticed on some of my major competitors that they actually use Page instead of Collection List. So a hypothetical would be /pages/womens-jewelry → /collections/necklaces. Either way, you’re still creating a template to house the collections.

[swarique]

Thanks for the reply. I will try to explain. I have a Mega Menu as below:

Now, When I click on Everyday Elegance - It takes me to the page as you see below which has four subcollections. This is fine. I have created a Template as Women Jewellery and Then collections Everyday Elegance, Party Glmour, Bridal and gift are Tagged with same template.

Further I have collections as Daily wear Necklace tagged to Everyday Elegance template and so on. So Everyday collection page is sorted. But Now when I click on the Party Glamour link - I land on page of Party Glamour. The header banner image is OK as its connected to dynamic source in metafield. But the collectios are same as of Everyday elegance page. If I change, the same are getting changed in the Everyday Elegance as well:

How do I sort this out? Any easy way to keep both separate and only show collection relevant to this category?

Hope I could explain.

[tim_tairli]

Yes, this is normal behaviour if you’re not using dynamic sources and entities use the same template. This is why dynamic sources were created in the first place.

Either you create a separate template for each page where you need different settings on some of your sections, or use a dynamic source for this setting.

Be aware that total number of templates is limited.

So, the way to solve this is to create a collection metafield of type List of Collection(s) and for each collection which has sub-collections to add those to the metafield.

Then you’d need to have a section to pull data from the metafield and display it the way you want.
Use the “Collection list/links: XXX” section – it is be able to use this type of MFs as a dynamic source.
Or use custom (or AI-generated) section…

The only problem with those sections is that they will display placeholders if metafield is not set.
So either create a special template for those collections which have metafield set, or hide the “collection links” section if metafield is not set.

For this you can add a “Custom liquid” section right above the “Collection links” one and use code like this:

{% # my metafield is set up  with this namesapace and key -- amend for yours %}
{% if collection.metafields.custom.sub_collecitions 
   and collection.metafields.custom.sub_collecitions.value.size > 0 
%} 
  <!-- mf present and non-empty -->
{% else %}
<style>
  /* CSS to hide section right after this Custom liquid section */
 #shopify-section-{{ section.id }} + .shopify-section {
   display: none;
}
</style>
{% endif %}

[emilyjhonsan98]

You don’t need to create separate templates for every single category. The reason you’re seeing the “menu” again inside the Necklace collection is that the Necklace collection is likely still using your custom Subcollection template instead of the Default Collection template.

1. Check Your Template Assignments: Go to Products > Collections and click on Necklace. On the right-hand sidebar, ensure the Theme template is set to Default Collection. Your Women’s Jewelry parent page is the only one that should be assigned to your custom Sub-list template.

2. Use a Navigation Menu (The Pro Way): Instead of hard-coding collections into templates, create a Menu (Online Store > Navigation) with the same name as your parent collection. In your custom template, use Liquid code to look up that menu. This way, the page automatically pulls in the right sub-categories based on the menu structure.

3. Related Products: You don’t need custom templates for this either. In the Theme Editor (Customize), simply add the Related Products or Product Recommendations section to your Default Product and Default Collection templates. Shopify handles the logic automatically based on product tags and types.

[swarique]

Hi Tim, Thanks for doing your best. But I think I am novice in this. I tried doing it. I created the template as subcollection and in the collection metafield of women Rings - I tagged with For Her and Women Rings. However, during linking, I dont have that metafield popping up.

I am not sure what wrong I am doing. Can you please give me more detailed guide? It will be really helpful for me.

Thanks.

[tim_tairli]

That may be the wrong section/setting; this setting seem to expect single collection as input, not a list. Editor lists only metafields compatible with current setting.

My screenshot is from Savor/Horizon.
It is possible that other themes may not be as compatible with my approach.

Try one of these themes to see if it works there – it’d be good if you can recreate my solution in one of those themes and see how it fits your goal.

If it does, but not in your current theme, then you may need to create a custom section/ ask AI.