Subcollections help merchants display related collections on a collection page, so customers can browse a collection hierarchy more easily.
In Concept, the Subcollections block uses a Shopify menu to display collection links. On desktop, subcollections appear as navigation links. If a collection has a thumbnail metafield, the image can be revealed when customers hover over the collection title. On mobile, the subcollections are displayed as a dropdown selector.
How to Set Up Subcollections
STEPS:
1. Create a Collection Menu
First, create a Shopify menu that contains the collections you want to display as subcollections.
The theme uses this menu to understand the collection hierarchy and decide which subcollections should appear on each collection page.
- From your Shopify admin, go to Content > Menus.
- Click Create menu.
- Enter a menu name.
Example:
Subcollections
- Add your collection links to the menu.
- Arrange the menu items into the structure you want.
Example structure:
Audio
├── Headphones
├── Speakers
└── Accessories
Or, for a deeper structure:
Audio
├── Headphones
│ ├── Wireless Headphones
│ └── Studio Headphones
├── Speakers
└── Accessories
Important:
Every menu item that should appear as a subcollection must be linked to a collection.
Recommended setup:
| Requirement | Description |
|---|---|
| Menu item type | Collection link |
| Menu structure | Parent and child collection links |
| Supported hierarchy | Up to 3 menu levels |
| Non-collection links | Ignored by the subcollections display |
2. Add the Subcollections Block to the Collection Page
After creating the menu, add the Subcollections block to the collection template.
- From your Shopify admin, go to Online Store > Themes.
- Find the Concept theme and click Customize.
- Open the collection template you want to edit, such as Default collection.
- Open Template > Product grid.
- Click Add block.
- Select Subcollections.
- In the Subcollections block, use the Menu setting to select the menu you created earlier.
- Optional: enable Show collection count if you want to display the number of products in each collection.
- Click Save.
After completing the setup, the subcollections should appear on the collection page.
Recommended setup:
| Setting | Value |
|---|---|
| Block | Subcollections |
| Menu | The menu created in Step 1 |
| Show collection count | Enable or disable based on your preference |
3. Optional: Add Subcollections to the Collection Banner
In Concept, you can also display subcollections inside the Collection banner section.
This is useful when you want the subcollection navigation to appear near the collection title, description, or banner image instead of inside the product grid top bar.
- From the theme editor, open your collection template.
- Open Template > Collection banner.
- Click Add block.
- Select Subcollections.
- Choose the same menu you created earlier.
- Optional: enable Show collection count.
- Click Save.
Important:
You can use the Subcollections block in the Product grid or Collection banner section depending on your desired layout.
If you add the block to both places, the subcollections may appear twice on the same collection page.
4. Create the Collection Thumbnail Metafield
To show an image when customers hover over a subcollection title, create a collection metafield named Thumbnail.
This metafield stores the image used for the hover preview.
- From your Shopify admin, go to Settings > Metafields and metaobjects.
- Click Collections.
- Click Add definition.
- Enter the metafield name.
Example:
Thumbnail
After you enter the name, Shopify may automatically recommend a Namespace and key.
- Click the suggested Namespace and key value if you want to edit it manually.
- Change the namespace and key to:
theme.thumbnail
- Click Select type.
- Choose File.
- Select One file.
- In Validations, choose Image.
- Click Save.
Recommended setup:
| Field | Value |
|---|---|
| Name | Thumbnail |
| Namespace and key | theme.thumbnail |
| Type | File |
| Value type | One file |
| Validation | Image |
After saving, the new Thumbnail metafield will be available on your collections.
5. Add Thumbnail Images to Collections
After creating the metafield, assign a thumbnail image to each collection that should display a hover image.
For example, you can add a thumbnail image to the Headphones collection.
- From your Shopify admin, go to Products > Collections.
- Open the collection you want to edit.
- Scroll down to the Metafields area.
- Click View all if the metafield is not visible.
- Click the Thumbnail metafield.
- Choose or upload an image.
- Click Save.
- Repeat the same process for each collection that needs a hover image.
Important:
The thumbnail should be added to the collection that appears as a subcollection menu item.
If a collection does not have a Thumbnail metafield value, the collection link can still appear, but no hover image will be shown for that item.
6. How the Subcollections Display Works
The Subcollections block reads the selected Shopify menu and displays collection links based on the current collection page.
Concept checks the menu structure and displays relevant child or sibling collections.
Example behavior:
| Current collection page | Menu structure | What appears |
|---|---|---|
| Parent collection | Parent collection has child collections | Child collection links appear |
| Child collection | Child collection is inside a parent collection | Sibling collection links can appear with an All parent collection link |
| Deeper child collection | Menu uses deeper levels | Relevant links can be displayed up to 3 menu levels |
Display behavior:
| Device | Behavior |
|---|---|
| Desktop | Subcollections appear as inline navigation links |
| Desktop with thumbnail | Hovering over a collection title reveals the theme.thumbnail image |
| Mobile | Subcollections appear inside a dropdown selector |
| Mobile with thumbnail | Thumbnail hover images are not shown in the dropdown |
Important:
Only menu items linked to collections are displayed by the subcollections feature.
7. Preview the Subcollections
After completing the setup, open a collection page on your storefront and check the result.
Check the following:
- The Subcollections block appears on the collection page.
- The selected menu is correct.
- The current collection exists inside the selected menu structure.
- Each displayed item links to the correct collection.
- Collection counts display correctly if Show collection count is enabled.
- Thumbnail images appear when hovering over collection titles on desktop.
- On mobile, the subcollections display as a dropdown selector.
8. Notes and Limitations
Please note the following behavior:
- The Subcollections block does not automatically create collections.
- The block uses the selected Shopify menu to display collection links.
- Every menu item that should appear must be linked to a collection.
- Non-collection menu items are ignored.
- The current collection must be part of the selected menu structure for related subcollections to display.
- The theme can detect subcollection relationships up to 3 menu levels deep.
- The hover image uses the collection metafield
theme.thumbnail. - Thumbnail hover images are designed for desktop display.
- On mobile, subcollections are shown as a dropdown selector.
- If the Subcollections block is added to both the Product grid and Collection banner, it may appear twice.
Troubleshooting
If the subcollections do not display correctly, please check the following:
- Make sure the Subcollections block has been added to the collection template.
- Make sure a menu has been selected in the Subcollections block.
- Make sure the current collection is included in the selected menu.
- Make sure the menu items are linked to collections, not pages, blogs, products, or custom URLs.
- Make sure the collections are arranged as parent and child menu items.
- If collection counts do not appear, make sure Show collection count is enabled.
- If the hover image does not appear, make sure the collection has a value for the
theme.thumbnailmetafield. - Make sure the
theme.thumbnailmetafield is created for Collections, not Products. - Make sure the metafield type is File and the validation is Image.
- If the subcollections appear twice, check whether the block has been added to both Product grid and Collection banner.
- Clear your browser cache and refresh the storefront.
- Make sure you are using the latest version of the Concept theme.
Need Further Assistance
If you encounter any issues or need additional help with your Concept theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
How to create a mega menu?
How to enable size chart on product pages?