Shopify Guides

Mastering Shopify: How to Display Sub-Collections on Your Collection Pages

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, improving both user experience and potentially boosting conversions.

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. As a Shopify migration expert at Shopping Cart Mover, I know 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.

Shopify admin creating a 'List of collections' metafield definition
Shopify admin creating a 'List of collections' metafield definition

The Current Reality: Shopify's 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, 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."

This new feature is more about a "product selection process" – essentially, a way for a collection to automatically include products from other collections based on conditional logic. It's a powerful tool for managing product inventory within collections, but it doesn't, as we traditionally understand it, create a nested hierarchical collection structure with a direct Liquid object you can loop through to display on your storefront.

Why You Can't Rely on product.collections for Sub-Collections

Another tempting but unreliable approach mentioned in the thread is to loop through collection.products and then read product.collections. Ploqo explicitly warned against this, stating: "Deriving it by looping collection.products and reading product.collections looks tempting but is not safe." The reason? This method will return *every* collection those products happen to sit in, not just the specific sub-collections you intend to display. This can lead to irrelevant or duplicate collection links, confusing your customers.

The Robust Solution: Leveraging Shopify Metafields and Custom Liquid

Given the current limitations, the most reliable and flexible method to display sub-collections on your collection pages involves using Shopify's powerful metafields in conjunction with a custom Liquid section. This approach gives you full control over which sub-collections appear and how they are presented.

Step 1: Define Your "Sub-Collections" Metafield

First, you need to create a custom metafield definition for your collections to store the links to your sub-collections.

  • Go to your Shopify Admin: Settings > Custom data > Collections.
  • Click Add definition.
  • Name it something clear, like "Sub collections".
  • Set the Type to List of collections. This is crucial as it allows you to select multiple collections.
  • Ensure Storefront API access is checked.
  • Click Save.

Step 2: Populate Your Parent Collection's Metafield

Now, you'll assign the actual sub-collections to your parent collection using the metafield you just created.

  • Navigate to Products > Collections in your Shopify Admin.
  • Open the parent collection (e.g., "Women's Clothing") where you want to display sub-collections.
  • Scroll down to the Metafields section (usually at the bottom).
  • Find your newly created "Sub collections" metafield and click on it.
  • Pick the sub-collections (e.g., "Dresses", "Tops", "Bottoms") that you want to display on this parent collection page.
  • Click Save.

Step 3: Add a Custom Liquid Section to Your Collection Template

Next, you'll add a section to your theme's collection template where the sub-collections will be rendered.

  • Go to Online Store > Themes.
  • Find your current theme and click Customize.
  • In the theme editor, navigate to a Collection page (you might need to select it from the dropdown at the top).
  • In the left sidebar, under "Sections", click Add section.
  • Search for and select Custom Liquid.

Step 4: Implement the Liquid Code for Display

Paste the following Liquid and CSS code into the Custom Liquid box. This code will fetch the sub-collections from your metafield and display them as visually appealing cards.

{%- assign subs = collection.metafields.custom.sub_collections.value -%}
{%- if subs != blank -%}


  {%- for sub in subs -%}
    
      
        {%- if sub.featured_image -%}
          {{ sub.title | escape }}
        {%- endif -%}
      
      {{ sub.title }}
      {{ sub.all_products_count }} products
    
  {%- endfor -%}



{%- endif -%}