Several people have asked about showing the subcategories in Categories page. This is about the Modern Category + Group Boxes component, but since it doesn’t have a topic of its own (right?) I’ll share my findings here:
This works:
/* Displays subcategories */
.custom-category-boxes:not(.above-discovery-categories-outlet) .subcategories {
display: inline-flex;
flex-flow: wrap;
}
.custom-category-boxes:not(.above-discovery-categories-outlet) .subcategory {
display: inline-flex;
align-items: baseline;
margin-right: .3em;
}
/* Removes the category images from the list */
.custom-category-boxes:not(.above-discovery-categories-outlet) .subcategories .subcategory .subcategory-image-placeholder {
display: none;
}
Also, if you have many subcategories, perhaps you want to show one category per row.
/* One category per row */
.custom-category-boxes:not(.above-discovery-categories-outlet) {
grid-template-columns: 1fr;
}
The result looks like this:
I think the boxes have a height limit but I haven’t found the way to remove it. We don’t have enough subcategories yet to see the problem on desktop, but we are hitting the limit on mobile:
Any ideas to solve this problem?