Empire now features a trio of subcollections templates, each offering the ability to group selected collections together on a page. Categorize your collections with the Featured collection, Menu list, and Grid subcollection templates by completing the steps in this article.
To get started, locate or create a collection to use as the base for the subcollections page. Then select a subcollections page style and follow the step-by-step instructions to set up a subcollections page with Empire.
Select a subcollections page style
There are three unique styles for the subcollections page.
-
Each style requires a collection for the base page (does not need products) and a navigation menu to connect other collections.Choose a subcollections page style from the tabs above to view setup instructions.
If you're after more than one subcollections page, there's no need to stick with the same style for each. You can feature the Menu list for one collection and Grid for another — just like our demos do!
-
Featured collection subcollections page
The main template provides a subcollections page with a layout similar to the Featured product section available for the home page Step 1: Build a menu to gather collections
To identify which collections belong together, assemble a dedicated menu in the Navigation admin with a handle matching the collection.
Go to Online Store > Navigation and select Add menu.
For this demo store example, the menu is named after the Kitchen collection.
Add collections as menu items
Start adding some menu items by selecting Add menu item.
These menu items will serve as the subcollection links, so in this example, the Kitchen Tools, Organization, Pots & Pans, Cookbooks, Food & Drink, Pantry Items, Bowls & Dishes, and Kitchen Accessories collections have been added as menu items.
Connect handle with the main collection
Confirm the handle for the menu is the same as the collection's URL. In this example, the Kitchen menu has the menu handle kitchen. However, the end of the collection's URL is kitchen-bar, so the handle is adjusted from kitchen to kitchen-bar.
If there are differences, adjust the Handle of the menu to reflect the main collection name to match.
In this example, the Kitchen collection ends with the URL /kitchen-bar and the kitchen-bar handle for the menu matches. The menu and collection titles can be changed, but the end of the URL and menu handle must match.
If multiple menus are created with the same name, the platform will add a number to the handle (e.g. kitchen-1), so keep this in mind if troubleshooting is needed
Step 2: Assign theme template to collection
Now that the navigation menu is built and connected to the main collection, open the collection in the Products admin. Under Theme template in the collection editor, change the default Collection template to collection.subcollections.
Save, then go to the Themes portion of the Online Store for the final step.
Step 3: Customize subcollections page in the theme editor
Open the theme editor for Empire (Customize), then navigate to the collection page (Kitchen in this example). In the left-side settings, open Subcollections.
Layout
Select either Grid or Slideshow from the Layout dropdown.
Products
Use the Number of products slider to control the number of products displayed for each subcollection. Select a value between 1 and 10 by sliding the toggle to the left or right.
Call-to-action
Customize the label text for the Call to action by replacing the placeholder in the provided field.
Click to enable Enable "Shop All" cards to include a call-to-action block at the end of the collection rows.
Adjust the Text and Background colors by clicking the rounded-rectangle swatches.
All settings configured in the theme editor for the Featured product template will apply to each collection assigned to that template. Collections with default or other subcollection templates may have alternate or additional settings to consider.
-
Menu list subcollections page
The Menu list template provides a subcollections page with a layout similar to the Menu list section available for the home page Step 1: Build a menu to gather collections
To identify which collections belong together, assemble a dedicated menu in the Navigation admin with a handle matching the collection.
Go to Online Store > Navigation and select Add menu.
For this demo store example, the menu is named after the Categories collection.
Add collections as menu items
Start adding some menu items by selecting Add menu item. Start with the collections you want to use for the main blocks.
For the demo store example, the Kitchen, Bar, Home Goods, Kids, Garden & Outdoor, and Gifts are added as the first tier of subcollections.
To add the second tier of subcollections, add your next subcollections as menu items to the first-tier items.
In the demo example, this would be the Kitchen Tools, Organization, Pots & Pans, Cookbooks, and Food & Drink collections added to the Kitchen menu item. Repeat for each first-tier item to fill out the listed collections.
Connect handle with the main collection
Confirm the handle for the menu is the same as the collection's URL. In this example, the Categories menu has the menu handle categories.
If there are differences, adjust the Handle of the menu to reflect the main collection name to match.
If multiple menus are created with the same name, the platform will add a number to the handle (e.g. categories-1), so keep this in mind if troubleshooting is needed
Step 2: Assign theme template to collection
Now that the navigation menu is built and connected to the main collection, open the collection in the Products admin. Under Theme template in the collection editor, change the default Collection template to collection.subcollections-menu-list.
Save, then go to the Themes portion of the Online Store for the final step.
Step 3: Customize subcollections page in the theme editor
Open the theme editor for Empire (Customize), then navigate to the collection page (Categories in this example). In the left-side settings, open Subcollections menu list.
Image
Select an option from Thumbnail image to display either a Product image or Collection image to represent each subcollection.
Align the images to the Left or Right by selecting either option from the Image alignment dropdown.
Call-to-action
Customize the label text for the Call to action by replacing the placeholder in the provided field.
Layout
Adjust the Layout of the subcollections page by selecting 2 columns or 3 columns from the provided dropdown.
All settings configured in the theme editor for the Menu list template will apply to each collection assigned to that template. Collections with default or other subcollection templates may have alternate or additional settings to consider.
-
Grid subcollections page
The Grid template provides a subcollections page with a layout similar to the collection page product grid Step 1: Build a menu to gather collections
To identify which collections belong together, assemble a dedicated menu in the Navigation admin with a handle matching the collection.
Go to Online Store > Navigation and select Add menu.
For this demo store example, the menu is named after the New Arrivals collection.
Add collections as menu items
Start adding some menu items by selecting Add menu item. Start with the collections you want to use for the subcollections.
For the demo store example, the Smart Home, Drones, Cameras, Lenses, Turntables, Smartwatches, and Health Monitors.
Connect handle with the main collection
Confirm the handle for the menu is the same as the collection's URL. In this example, the New Arrivals menu has the menu handle new-arrivals.
If there are differences, adjust the Handle of the menu to reflect the main collection name to match.
If multiple menus are created with the same name, the platform will add a number to the handle (e.g. new-arrivals-1), so keep this in mind if troubleshooting is needed
Step 2: Assign theme template to collection
Now that the navigation menu is built and connected to the main collection, open the collection in the Products admin. Under Theme template in the collection editor, change the default Collection template to collection.subcollections-grid.
Save, then go to the Themes portion of the Online Store for the final step.
Step 3: Customize subcollections page in the theme editor
Open the theme editor for Empire (Customize), then navigate to the collection page (New Arrivals in this example). In the left-side settings, open Subcollections grid.
Layout
Use the Columns per row slider to control the number of subcollections blocks contained in a horizontal sequence. Select a value between 3 and 6.
Likewise, with the Columns per row on mobile slider, adjust the number of subcollections blocks displayed for each row on mobile devices. Select a value between 1 and 3.
Image crop
Select an option from Image crop to apply a container shape to the subcollection blocks.
The options are Original, Circle, Square, or Rounded rectangle.
All settings configured in the theme editor for the Grid template will apply to each collection assigned to that template. Collections with default or other subcollection templates may have alternate or additional settings to consider.
Share your experience with Empire
Your feedback is crucial! Help make Empire better by sharing your thoughts.
What to provide:
- Pain points: What's not working for you?
- Missing features: What should we add to Empire?
- General feedback: Any other ideas?
How to provide feedback:
- Fill out our quick and easy form.
- Details help us improve, so the more specific, the better!