How to Show Sub-Collections on a Collection Page?

[Habib_Rayan]

Hi everyone,

I’ve added sub-collections to a collection using Shopify’s conditional logic in the Shopify Admin, and everything is working properly on the admin side.

However, I’m not sure how to display these sub-collections on the collection page using Liquid.

Could someone please let me know:

• What Liquid object/property should I use to access the sub-collections?
• Is there a Liquid code example for displaying them on the collection page?
• I checked the Shopify Liquid objects documentation, but I couldn’t find a specific object for this new sub-collection feature.

Any guidance or code example would be greatly appreciated.

Thank you!

[Mustafa_Ali]

Hi @Habib_Rayan Welcome To Shopify Community So I Couldn’t find a confirmed Liquid object for this specific native feature, looks like a newer admin capability that may not be exposed to Liquid yet. Try checking collection.metafields.shopify.sub_collections or collection.metafields.shopify broadly first, that’s where newer Shopify-managed features usually surface. If that comes back empty, fall back to the classic method: create a menu handle prefixed collection- matching your parent collection, add sub-collections to it, then loop through linklists['collection-yourhandle'].links in your collection template.

[Habib_Rayan]

Thanks for your reply!

I’ve already tried both approaches you suggested, but unfortunately, neither of them worked for this new native sub-collection feature.

The main reason I’m looking for the proper Liquid object is client usability. This feature is intended to make it easier for clients to manage sub-collections directly from the Shopify Admin, so we can’t really use the menu-based workaround as a permanent solution.

We’re looking for a solution that is fully connected to Shopify’s native sub-collection functionality and can be maintained easily by the client without requiring additional manual setup.

Hopefully Shopify will expose a Liquid object for this soon, if it isn’t available yet.

Thanks again for taking the time to help!

[sadik_ShopiDevs]

Hello @Habib_Rayan

Here are a few ways to show sub-collections on a collection page:

Option 1: Use a Built-in Section (No Code) Some themes like Dawn have a “Collection list” section you can add directly to your collection page template via the Online Store Editor. Just add the section and manually select your sub-collections — no coding needed!

Option 2: Use Metafields (Dynamic & Clean)

1. Go to Settings > Custom data > Collections and create a metafield definition with type “Collection” or “List of Collections”
2. On each parent collection, fill in that metafield with your sub-collections
3. Reference it in your theme with collection.metafields.custom.your_field_name

Option 3: Custom Liquid Section If you’re comfortable with code, create a custom section that loops through a collection list and outputs them on the collection template. Full flexibility this way!

Option 4: Use an App Want zero coding? Apps like Collection Filter & Search or similar tools can handle sub-collection relationships for you.

[Maximus3]

Those aren’t “subcollections” yet, it appears that the Shopify team behind the new collection 2026/27 upgrades either doesn’t know what a subcollection is or they just haven’t implemented it yet beyond API. What I see is essentially a sort feature only so you can select all the products in specific collections. the url is /collections/collection-name… So it’s just a normal collection, not a “subcollection”.

Here is a thread on the subject in the dev board.

Introducing the New Collections API (2026-07) — Developer Preview

Read specifically what they are saying: CollectionSubCollectionSource — membership inherited from another collection. That tells me it’s a “product selection process”. I have men’s, I have women’s. If i want a collection of all the products in both men’s and women’s, I would simply select men’s and then select women’s. This is not the same as having a Collection/Subcollection relationship. Maybe it’s a slow rollout, but right now it’s just any other collection of products.

And trying to change the url at the bottom to have a subcollection url structure doesn’t work either. Nested navigation, as they are claiming, is not a thing that I can see, at least not yet.

Also, if you are looking to have a Collection with collection cards, not product cards, then the “collection list” template would be the way to go for that.

[devcoders]

Hi @Habib_Rayan

I would recommend using a collection metafield of type Collection reference (list) instead.

For example:

custom.sub_collections

Then in Liquid:

{% assign sub_collections = collection.metafields.custom.sub_collections.value %}

{% if sub_collections != blank %}
  <div class="sub-collections">
    {% for sub_collection in sub_collections %}
      <a href="{{ sub_collection.url }}">
        {% if sub_collection.image %}
          {{ sub_collection.image
            | image_url: width: 500
            | image_tag: loading: 'lazy', alt: sub_collection.title
          }}
        {% endif %}

        <span>{{ sub_collection.title }}</span>
      </a>
    {% endfor %}
  </div>
{% endif %}

This is currently the cleanest theme-only solution because the collection references are directly accessible through Liquid.

So for a theme-only implementation Collection reference metafield is what I would recommend.

Best regards,
Devcoder

[Ploqo]

There is no Liquid object for it yet.

I set the same thing up on a test store and checked every route.

What Liquid returns on a collection built from Collection sources:

{{ collection | json }}

{"id":359138394289,"handle":"furnishing","updated_at":"...","published_at":"...","sort_order":"most-relevant","template_suffix":null,"published_scope":"global","title":"Furnishing","body_html":null}

• collection.sources, collection.sub_collections, collection.children all return nothing.
• collection.metafields.shopify is empty.
• The Storefront API Collection object has no sources field either.
• Admin GraphQL 2026-07 is the only place the list exists: collection.sources then ... on CollectionSubCollectionsSource { collections }.

So nothing on the storefront can read it today.

Deriving it by looping collection.products and reading product.collections looks tempting but is not safe.

On my test it returned the 3 real sub-collections plus 2 unrelated ones, because it picks up every collection those products happen to sit in.

What works today : one list-of-collections metafield.

1. Settings > Custom data > Collections > Add definition. Name it “Sub collections”, set the type to List of collections, leave Storefront API access on.

2. Open the parent collection > Metafields, and pick the same sub-collections.

3. Online Store > Themes > Customize, open your Collection template, then Add section > Custom Liquid.

4. Paste this in the Custom liquid box and Save.

{%- assign subs = collection.metafields.custom.sub_collections.value -%}
{%- if subs != blank -%}
<div class="subcol-grid">
  {%- for sub in subs -%}
    <a class="subcol-card" href="{{ sub.url }}">
      <span class="subcol-card__img">
        {%- if sub.featured_image -%}
          <img src="{{ sub.featured_image | image_url: width: 600 }}" alt="{{ sub.title | escape }}" width="600" height="600" loading="lazy">
        {%- endif -%}
      </span>
      <span class="subcol-card__title">{{ sub.title }}</span>
      <span class="subcol-card__count">{{ sub.all_products_count }} products</span>
    </a>
  {%- endfor -%}
</div>
<style>
  .subcol-grid{display:grid;gap:1.6rem;grid-template-columns:repeat(2,1fr);max-width:var(--page-width,120rem);margin:0 auto;padding:0 1.5rem}
  @media (min-width:750px){.subcol-grid{grid-template-columns:repeat(4,1fr);padding:0 5rem}}
  .subcol-card{display:block;text-decoration:none;color:inherit}
  .subcol-card__img{display:block;aspect-ratio:1/1;overflow:hidden;border-radius:.8rem;background:rgba(var(--color-foreground),.05)}
  .subcol-card__img img{width:100%;height:100%;object-fit:cover;display:block}
  .subcol-card__title{display:block;margin-top:.8rem;font-weight:600}
  .subcol-card__count{display:block;font-size:1.3rem;opacity:.7}
</style>
{%- endif -%}

5. The cards render above the product grid and each one links to that collection.

To stop the client filling it in twice, mirror the native sources into that metafield from your app. Read them with:

{
  collection(id: "gid://shopify/Collection/1234567890") {
    sources {
      ... on CollectionSubCollectionsSource {
        collections { id title handle }
      }
    }
  }
}

Then write the same ids back with metafieldsSet on the collections/update webhook. Your client only ever touches the native Collection card, and the theme reads the metafield.

Notes: change repeat(4,1fr) for the number of columns, and max-width if your theme is not 1200px wide.

Available apps: Breadcrumbs & Categories, Collection Tree: Discover, Subcollections Tree.

Regards,
Ploqo

[Joshua827]

hmm usually you gotta add a collection list section on that collection template and pick the sub collections yourself. some themes have a nested collections block that does it too. kinda depends on your theme tho

[Zanye]

Hi Habib, since this is a newer Shopify Admin feature, I’d first confirm whether the sub-collections created through that conditional logic are actually exposed to Liquid as a collection property. If they aren’t exposed yet, there may not be a Liquid object you can use directly.

If you can share the exact Admin setup you used for the sub-collections and the Liquid code from your collection template, we can narrow down whether there’s an available object to loop through or whether this currently requires another approach.