How to Create Collection and Sub-Collection Flow in Shopify Online Store 2.0 (Dawn Theme)

Creating Collections and Sub-Collections

For this tutorial, I will assume that we have at least three product pages built out (three Dell products). The process involves creating a page template that follows the collection style. Here’s how to do it:

Step 1: Create a Page Template

Go to Pages:

Navigate to the ‘Pages’ section in your Shopify admin.

Set the title as our first collection, ‘Laptop’.

Choose a Theme Template:

On the right side of the Theme template section, you will see options like ‘default page’, ‘about’, and ‘contact’.

Step 2: Add a New Template

Open the Code Editor:

Pause the process and open a new tab on ‘Online Store’, then click on ‘Edit Code’. We are using the default Online Store 2.0 theme, ‘Dawn’.

Create a New Template:

Under ‘Templates’, click on ‘Add a new template’.

Select ‘page’ and JSON, then name the file as page.laptop.json.

Edit the New Template:

Remove the default code and copy-paste the code from page.json for now, as this will give us some tips in the theme editor.

Step 3: Customize the Page

Open the Theme Editor:

Click on ‘Customize’, which will bring you to the theme editor.

Select the New Template:

In the top dropdown, select ‘Pages’, and it should show the ‘laptop’ template.

Customize the Page:

Use the sections and blocks in the left panel to customize the page. For this example, I used two sections: ‘Image banner’ and ‘Multicolumn’, making it look like this:

Step 4: Create Collections and Sub-Collections

Create Collections:

Go to ‘Products’ and then click on ‘Collections’.

Enter ‘Dell’ as the Title, select manual selection for now, and choose the three products we have built already (in this case, three Dell products). The collections should look like this:

Step 5: Link Everything Together

Navigate to Navigation:

In the admin panel, go to ‘Online Store’ and click on ‘Navigation’.

Set up two-tiered navigation.

Link the Pages:

On the Laptop link, select the ‘Laptop’ page we created earlier. This is how it should look:

Step 6: Create Additional Collection Pages

To build more Collection pages like Mobile, follow the same process from Step #5, starting by creating another template called page.mobile.json and following the same steps with different data.

Step 7: Create Additional Sub-Collection Pages

For more Sub-Collection pages like Lenovo and HP, follow the same process as for Dell: build the products that go inside that collection first, create a new collection, and link it to the page.laptop.json template via the Theme Editor.

Detailed Steps for Each Process

Creating a Page Template

Creating a page template in Shopify involves using the code editor to define a new JSON template. Here’s a detailed breakdown of how to create a page template for a collection:

Access the Code Editor:

Go to ‘Online Store’ > ‘Themes’ > ‘Actions’ > ‘Edit Code’.

Add a New Template:

Under ‘Templates’, click ‘Add a new template’.

Select ‘page’ and then ‘JSON’.

Name the file appropriately, for example, page.laptop.json.

Edit the Template:

Remove any default code and replace it with the content from an existing page JSON template. This provides a foundation that you can build upon.

Customizing the Page in Theme Editor

Once the new template is created, you can customize it using the Theme Editor:

Open Theme Editor:

Navigate to ‘Online Store’ > ‘Themes’ > ‘Customize’.

Select the New Template:

From the top dropdown menu, choose ‘Pages’ and select the newly created template.

Add Sections and Blocks:

Use the left panel to add sections like ‘Image banner’ and ‘Multicolumn’. Customize each section to match your branding and layout preferences.

Building and Linking Collections

Building collections and linking them to your custom pages ensures that products are organized and easily accessible:

Create Collections:

Go to ‘Products’ > ‘Collections’.

Click ‘Create collection’ and enter a title.

Choose the collection type (manual or automated) and add products.

Link Collections in Navigation:

Navigate to ‘Online Store’ > ‘Navigation’.

Add a new menu item for the main collection.

Link the sub-collections under the main collection item.

Example of Linking Sub-Collections

For instance, if you have collections like Dell, Lenovo, and HP under the main Laptop collection:

Create Each Sub-Collection:

Follow the steps to create collections for Dell, Lenovo, and HP.

Populate each collection with the respective products.

Link Sub-Collections in Navigation:

In the Navigation section, add each sub-collection as a submenu item under the main Laptop collection.

Finalizing the Setup

After setting up and linking all collections and sub-collections, ensure everything is correctly configured:

Test Navigation Flow:

Navigate through the site to ensure that all links work as expected and collections display the correct products.

Adjust as Needed:

Make any necessary adjustments in the Theme Editor or Navigation settings to perfect the user experience.

Conclusion

Creating collections and sub-collections in Shopify using the Dawn theme can seem complex at first, but by following these detailed steps, you can achieve a well-organized and efficient product structure. This setup not only improves navigation but also enhances the overall user experience, making it easier for customers to find what they are looking for. By leveraging Shopify’s Online Store 2.0 capabilities and the Dawn theme’s flexibility, you can create a robust and visually appealing e-commerce site.