13. Vantage Theme: Setting up a Top-Level Collections Page
Top-level collection pages are just regular old collections in Shopify, but now with new custom templates in the Vantage theme (v6.5+) you can create collections that serve as larger top-level collections. This wonderful theme feature is pushing the bounds of Shopify and giving you the ability to organize your content better, in-turn making it easier for your customers to find products faster eventually leading to conversions.
Here is an example of a normal Vantage theme collection page…
Now here is an example of the same collection page, but using a custom template to create a Top-Level collection…
By customizing the theme settings of this collection we have created the effect that New Arrivals is a top-level collection housing medium size collections like seating and outdoor, and smaller collections like accessories, lighting, and storage. This helps to organize the long list of products in the collection for a more precise organization.
So let's go through the steps to set up a Top-Level collection page.
Step 1: Choosing the Custom Template
From your Shopify Admin go to Products > Collections > select the collection you want to use. Look on the right-hand side for Theme Templates from the Collection template select menu choose collection.custom-one and save the collection settings. ***Now before you continue there is a very important fact you must know about custom templates, once you use collection.custom-one on a collection, you do not want to use it again or it will create a duplicate collection. You can only use this template once! If you want to create another custom collection use the template collection.custom-two and so on up to four. The Vantage theme includes four custom templates if you need more than four, follow our tutorial on adding more custom templates here.
If you have a different theme or older version of Vantage theme published and you are working on this new version as a draft, you will find out real quick there is no collection.custom-one (two, three or four) to choose from the select menu. This is because your current theme does not have these templates. To override this you will need to create these custom templates on your current theme, this won't affect your live shop at all. Follow the steps in our tutorial here .
Step 2: Choose the collection blocks to show
Each "Section" on the Top-Level collection page is technically a Shopify section block. On the custom collection templates, you have the following blocks to choose from…
- Image With Text Overlay
- Featured Collection
- Collection List
In our example here we have used Image w/Text Overlay, Featured Collection, Featured Collection, and Collection List. You can add up to 12 blocks, in any combination.
Image with Text Overlay
The Image with Text Overlay block is very similar to the section on the homepage. It works great as a header on collections. You add a full-width background image then you can add a heading and subheading, the subheading shows when you hover the section. In our example, we used a simple narrow image with a texture, but you could use any image and control the height in the block settings.
The Featured Collection block will allow you to choose a collection and it will show the collection image (or you can override the collection image and upload a different one) and the collection name and description (from the collection admin). To the right or left of the image, it will show the first 2-12 products in the selected collection.
The Collection List block will allow you to feature small thumbnails with collection image and collection name of up to 12 collections.
Shop All Button
All custom collection templates will show the Shop All button at the bottom of the page, which links to the normal view of the collection (as shown at the very beginning of this article). If you want to change the words on this button you can do this with translations. From the theme editor go to > theme actions > Edit languages > Collections tab > under general edit Shop All.
Be sure to save your settings and now take a look at your new Top-Level collection! Remember once you use this template (collection.custom-one) it belongs to this collection and should not be used again.