Shopify themes, liquid, logos, and UX
Hi! On my collection page I want to have a collections list with 6 items and dynamically connect them to a metafield. This so I can have sub collections and on each collection I can set sub collection 1, sub collection 2 and so on. The only problem is that now it always show 6 no matter if they are set or not. I want to hide the collection of it's not set. So if I have sub collection 1 and 2 set on that collection it should hide collection 3-6.
And a sort of related question. If I add more than 6 collections it turns into two rows, but on mobile it's still one row and I can swipe. Can I have it the same way on desktop?
Do you know? @ThePrimeWeb
Do you know
No one?
I need help with this too - have try a few of the suggestions but nothing has worked yet.
To hide Collection Blocks that are empty, pasted this CSS into the Custom CSS box of the Collection list Block:
.collection-list__item--no-media {
display: none;
}
I made this CSS by just inspecting the Collections list in my browser. I saw that empty Collection Blocks had the class "collection-list__item--no-media", so this CSS code just makes any elements with that class not display.
For me, this made navigating using "sub-collections" super easy. I only needed to make (1) template, no matter how many sub-collections there were under the parent Collection. I needed up to (9) sub-collections, and with this code, I can use (9) Blocks but only have ones being used show up.
Here's a site I found that explains how to make sub-collections: How To Add Sub-Collections in Shopify: A Beginner-Friendly Guide - Ecommerce Launcher
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025