The Collection Page Layout is made up of different configuration areas that allow you to control how your collections are displayed in the app. You can preview your collection, customize its appearance, and add content blocks to create a more engaging shopping experience.
First, go to your dashboard and click on "Page Manager" and then select Collection Pages.
From there, you can either:
Change your default layout by clicking on the existing layout, or
Create a new layout by clicking Create Page > Collection, then enter a name for the new page.
Collection Preview and Header
The collection preview in the middle part of your screen allows you to see how your collection page will appear to customers while making adjustments to the layout.
To choose the collection you want to customize, go to the left sidebar and select the desired collection from the list (previously added in Shopify).
Once selected, the collection will open in the editor, allowing you to preview and customize its layout, header, and components.
You can customize the collection header and add blocks to enhance the page with additional content and visual elements.
Template Settings
The Template area controls how products are displayed within the collection. It includes a fixed component that cannot be removed or edited, but you can customize the way products are arranged.
You can choose between two display formats:
Grid – Displays products in a traditional product grid layout. Allows customers to choose to show one, two, or four items per column.
Final result of a 1 column Grid Layout:
Editorial – Creates a more flexible and visual layout, allowing you to create different product arrangements and patterns.
Within the template settings, you can define how many products are displayed per row. This flexibility allows you to create unique layouts by combining different row sizes.
Example: You can display one product in the first row, two products in the next row, and continue with different patterns. The selected pattern will automatically repeat throughout the collection.
You can configure up to 5 rows in your product display pattern.
Final result of an Editorial Layout as per example above:
Product Image Selection
The Template area also allows you to choose which product image is displayed for each row. You can select between:
First product image
Second product image
Last product image
This gives you more control over the visual presentation of your collection and allows you to create different styles depending on your products.
Filter and Sorting
The Filter and Sorting settings help customers navigate your collection more easily. You can enable a quick filter bar and empower your customers to find exactly what they’re looking for. They can sort products by attributes like color, size, or availability.
Disabled Quick Filter Bar:
Enable Quick Filter Bar:
Final Result of Quick Filter Bar - Color
Final Result of Quick Filter Bar - Collections
By combining these settings, you can create collection pages that are visually engaging, easy to navigate, and tailored to your brand’s shopping experience.
If you want to learn more about this component, see our Collection View Article.
Header Blocks
Product Carousel and Image Banner
To know more about these blocks, check this article.
The Product Carousel allows you to highlight specific products within a collection, such as best sellers, new arrivals, recommended items, or promotional products.
By placing products in a dynamic and easy-to-browse format, customers can discover more items without leaving the collection page.
This helps increase product visibility, encourage exploration, and create more opportunities for customers to find products they are interested in.
The Image Banner helps you communicate important messages and capture customer attention through visual content.
By adding an Image Banner to your collection page, you can create stronger visual impact, guide customers through your store, and connect your products with specific campaigns or themes.
Announcement Bar
The Announcement Bar is an important component for communicating timely information to customers while they browse your collections.
It allows you to highlight important messages such as promotions, discounts, shipping updates, limited-time offers, or store announcements.
By using it on your collection pages, you can keep customers informed, create a sense of urgency, and encourage them to take action while exploring your products.
Sub Collections Carousel
The Sub Collections Carousel helps customers navigate through related categories within a collection by displaying smaller groups of products in an easy-to-browse format.
It is especially useful for collections with multiple product categories, allowing you to highlight different sections and guide customers toward the products they are most interested in.
Example: a Summer Collection could include sub collections such as Swimwear, Sandals, and Accessories.
Final Result (Aspect Ratio - Portrait 4:5)
Text Block
Final Result of a Text Block - Promo Link.
