The Subcollections section in the Be Yours theme allows you to display child collections on a collection page. This is useful when you want to create a collection hierarchy, such as a main collection with several related subcollections.
For example:
Women
- Dresses
- Tops
- Bottoms
- Accessories
When customers view the Women collection page, the Subcollections section can display links to Dresses, Tops, Bottoms, and Accessories. You can check a Demo here.
How to Create Subcollections in Be Yours
STEPS:
1. Understanding How Subcollections Work
Shopify does not have a native “subcollection” structure by default. In Be Yours, subcollections are created using a Shopify menu.
The theme checks the selected menu and looks for the current collection inside that menu. If the current collection has child menu items, those child menu items are displayed as subcollections.
Example menu structure:
Shop
- Clothing
- Tops
- Bottoms
- Dresses
- Accessories
- Bags
- Hats
- Jewelry
If the customer is viewing the Clothing collection page, the Subcollections section can display:
Tops
Bottoms
Dresses
Important:
Every menu item used for the subcollection structure must be linked to a collection.
2. Create a Menu for Subcollections
First, create a menu that contains your collection hierarchy.
-
From your Shopify admin, go to Content > Menus.
-
Click Create menu.
-
Add a menu title.
Example:
Subcollections -
Add your parent collection links.
-
Add child collection links under the parent collection.
-
Click Save.
Example structure:
Shop
- The Endless Summer
- Bay Top
- Seneca Bra Top
- Sinchseamless Bra Top
In our demo, the menu structure is set up like this:
3. Link Every Menu Item to a Collection
Each menu item in the subcollection menu must link to a collection.
To add or edit a menu item:
- Open the menu you created.
- Click Add menu item or edit an existing item.
- In the Link field, choose Collections.
- Select the collection you want to link.
- Click Add or Apply changes.
- Click Save.
Example:
| Menu item | Link type |
|---|---|
| The Endless Summer | Collection |
| Bay Top | Collection |
| Seneca Bra Top | Collection |
| Sinchseamless Bra Top | Collection |
Please note that every menu item in this menu must be linked to a collection:
If a menu item is linked to a page, product, custom URL, or blog, it will not work correctly as a subcollection item.
4. Enable the Subcollections Section on the Collection Template
After creating the menu, select it in the Subcollections section.
- From your Shopify admin, go to Online Store > Themes.
- Find the Be Yours theme and click Customize.
- Open a collection page in the Theme Editor.
- Find the Subcollections section.
- If the section is hidden, enable it.
- In the Menu setting, select the menu you created.
- Click Save.
After saving, the subcollections should display on the matching collection page.
5. Configure the Subcollections Section Layout
The Subcollections section includes layout and image settings.
Common settings include:
| Setting | Description |
|---|---|
| Menu | Selects the menu used to create the subcollection structure. |
| Collections per row | Controls how many subcollection cards appear per row on desktop. |
| Mobile columns | Controls whether mobile displays one or two columns. |
| Horizontal on mobile | Displays subcollections in a horizontal scroll layout on mobile. |
| Grid image | Choose whether the cards use collection images or product images. |
| Image ratio | Controls the image ratio of subcollection cards. |
| Image focal point | Adjusts the visible focus area of the image. |
| Apply overlay on image | Adds an overlay to improve text readability. |
| Padding top | Adds spacing above the section. |
| Padding bottom | Adds spacing below the section. |
Recommended setup:
| Goal | Recommended setting |
|---|---|
| Show visual category tiles | Use collection images |
| Show product preview style | Use product images |
| Improve mobile navigation | Enable horizontal on mobile |
| Display many subcollections | Use 4 or 5 collections per row |
| Improve text readability on images | Enable overlay |
6. Recommended Menu Structure
For best results, keep your menu structure clear and simple.
Recommended structure:
Main collection
- Subcollection 1
- Subcollection 2
- Subcollection 3
Example for a fashion store:
Women
- Dresses
- Tops
- Bottoms
- Accessories
Example for a beauty store:
Skincare
- Cleansers
- Toners
- Serums
- Moisturizers
Example for a furniture store:
Living Room
- Sofas
- Coffee Tables
- TV Units
- Shelving
The current collection page must match a parent collection link in the selected menu. The child collection links under that parent item will be displayed as subcollections.
7. Notes and Limitations
Please note the following behavior:
- Shopify does not create subcollections automatically.
- Be Yours displays subcollections based on a Shopify menu structure.
- Every menu item in the selected menu must link to a collection.
- The current collection must exist as a menu item in the selected menu.
- The subcollections displayed are the child menu items under the current collection menu item.
- If the current collection does not have child collection links in the selected menu, the section may not display any subcollections.
- The section displays collection links, not product links or page links.
- Collection images should be added in Shopify admin if you want visual collection cards.
Troubleshooting
If the subcollections do not display, please check the following:
- Make sure the Subcollections section is enabled on the collection template.
- Make sure the correct menu is selected in the Menu setting.
- Make sure the current collection is included in the selected menu.
- Make sure the current collection has child menu items under it.
- Make sure every child menu item links to a collection.
- Make sure the menu items are not linked to pages, products, blogs, or custom URLs.
- Make sure the collection pages are active and available on the Online Store sales channel.
- If images do not appear, make sure the collections have collection images.
- If the layout does not look correct on mobile, adjust Mobile columns or enable Horizontal on mobile.
- Clear your browser cache and refresh the storefront.
- Make sure you are using the latest version of the Be Yours theme.
Need Further Assistance
If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
Setting up for Option table section
How to set up color swatches in Be Yours 7.1.0 or later