Shopify Sub-Collections on Collection Pages: Your Guide to Displaying Nested Categories

Hey store owners!

One of the most common questions I hear, especially from folks looking to create a really organized and intuitive shopping experience, is about displaying sub-collections on their main collection pages. You know, like having a 'Women's Clothing' collection, and then right there on that page, you see cards for 'Dresses,' 'Tops,' and 'Bottoms' before diving into the products themselves. It’s a fantastic way to guide your customers deeper into your catalog.

Recently, a thread popped up in the Shopify community, initiated by Habib_Rayan, asking exactly this: "How to Show Sub-Collections on a Collection Page?" Habib had used Shopify's new conditional logic in the Admin to set up these 'sub-collections' and was looking for the Liquid object to display them. This is a topic that often causes a bit of head-scratching, so let's dive into what the community experts had to say and the most reliable ways to get this done.

The Current Reality: Native Sub-Collections Aren't Quite Storefront-Ready (Yet!)

The first thing to understand, as keenly pointed out by several experts in the thread like Ploqo and Maximus3, is that what Shopify calls 'sub-collections' in the new Admin feature (specifically, the 'CollectionSubCollectionSource' in the API) isn't yet fully exposed to Liquid on the storefront. Ploqo did some thorough testing, checking collection | json, collection.sources, collection.sub_collections, and even the Storefront API, and confirmed: "There is no Liquid object for it yet."

Maximus3 went a step further, explaining that this new feature is more about a "product selection process" – essentially, a way for a collection to inherit products from other collections. It's not, as we traditionally understand it, a nested hierarchical collection structure with a direct Liquid object for display on the front end. This is a crucial distinction that often trips people up.

Habib's core concern was client usability – a solution fully connected to Shopify’s native functionality without extra manual setup. While we hope Shopify exposes a native Liquid object for this soon, the community came up with a robust workaround that's pretty clean and maintainable.

The Best Solution: Harnessing Metafields for Dynamic Sub-Collection Display

The overwhelming consensus from experts like Ploqo and devcoders is that using Shopify metafields is the cleanest and most dynamic way to display sub-collections right now. It gives you control and is relatively easy for clients to manage once set up.

Step-by-Step Guide to Using Metafields for Sub-Collections

Here’s how you can implement this, drawing directly from Ploqo's excellent detailed instructions:

1. Create a Metafield Definition:
   • Go to your Shopify Admin: Settings > Custom data > Collections.
   • Click Add definition.
   • Name it something clear, like "Sub collections" (Ploqo used custom.sub_collections).
   • Set the type to List of collections.
   • Ensure Storefront API access is turned on.

   

2. Populate the Metafield on Parent Collections:
   • Open the parent collection (e.g., 'Furnishing') in your Shopify Admin.
   • Scroll down to the Metafields section.
   • You'll see your new "Sub collections" metafield. Click on it and pick the sub-collections you want to display (e.g., 'Chairs,' 'Tables,' 'Lamps').

   

3. Add a Custom Liquid Section to Your Theme:
   • Go to Online Store > Themes > Customize.
   • Navigate to a collection page template.
   • Click Add section and choose Custom Liquid.

   

4. Paste the Liquid Code:
   • In the Custom Liquid box, paste the following code provided by Ploqo (with a little CSS magic included for styling!):

   {%- assign subs = collection.metafields.custom.sub_collections.value -%}
   {%- if subs != blank -%}
   
     {%- for sub in subs -%}
       
         
           {%- if sub.featured_image -%}
             
           {%- endif -%}
         
         {{ sub.title }}
         {{ sub.all_products_count }} products
       
     {%- endfor -%}
   
   
   {%- endif -%}
   

   This code loops through the collections you selected in the metafield, displaying their featured image, title, and product count. Remember to adjust repeat(4,1fr) in the CSS for the number of columns you want, and max-width if your theme's page width differs from 1200px.

   

5. Save and See Your Sub-Collections!

   Once saved, these sub-collection cards will render beautifully on your collection page, typically above the product grid.

   

Other Approaches & Considerations

While metafields offer the most flexible and maintainable solution for now, the community also discussed a few other options:

• Theme's Built-in Sections: As Joshua827 and sadik_ShopiDevs mentioned, some themes (like Dawn) have a "Collection list" section you can add directly via the theme editor. This is a no-code option, but you'll still have to manually select the sub-collections. It might not be as dynamic as using metafields, but it's great for quick setups.
• Menu-Based Navigation: Mustafa_Ali suggested the classic method of creating a menu handle (e.g., collection-yourhandle) and looping through linklists['collection-yourhandle'].links. While functional, Habib rightly pointed out this isn't ideal for client usability if they expect to manage sub-collections directly from the collection editor.
• Shopify Apps: For zero coding and potentially more advanced features, sadik_ShopiDevs also suggested using apps like "Breadcrumbs & Categories" or "Collection Tree: Discover." These can handle the heavy lifting for you.

Looking Ahead

It's clear from Habib's original query and the community's responses that there's a strong desire for Shopify to expose the new native sub-collection feature directly to Liquid. This would streamline management significantly.

For now, the metafield approach provides an excellent balance of client-friendliness (once the metafield is defined) and powerful customization for your storefront. And for the more technically inclined, Ploqo even offered an advanced tip to mirror the native collection sources into your metafields via an app, using Admin GraphQL and webhooks. This way, your client only interacts with the native Shopify Admin, and your theme still reads the reliable metafield data.

So, if you're looking to create those neat, nested collection displays, dive into metafields! It's a powerful tool in your Shopify arsenal that can really elevate your store's navigation and customer experience.