What are Collection pages?
A Collection page displays the products that you have assigned to a particular Collection on your store. Grouping your products into Collections makes it easier for customers to find them by category. Here are a few examples of collections that you might create:
- clothes for men, women, or children
- items of a certain type, such as lamps, cushions, or rugs
- items on sale
- items in a certain size or color
- seasonal products, such as holiday cards and decorations
The above layout shows Heading layout > Card in grid. This shows the collection image and description within the first card of the grid. As well as being visually appealing, it is a great way to get your products as high up on the page as possible, maximising the real estate.
The above layout shows what can be done to create a unique or special collection page. Here we have hidden the collection title and description Heading layout > No title and used sections instead to create an Image with text overlay to act as a hero banner.
How to set up your Collection pages
To set up your Collection page, simply navigate to any collection on your storefront from within the Theme Editor, or, you can select Collections from the dropdown option at the top of the Editor window. Once there, you will be presented with a fantastic range of intuitive settings and options, giving you a huge amount of control over the look and layout of your Collection pages.
Layout
Desktop version
Effortlessly showcase your products with our theme's customizable layout options. Shopify enables you to display up to 50 products on a single collection page, with the possibility of multiple pages. Our themes offer a versatile layout choice, allowing you to display 2 to 5 products per row on each page, with easy-to-use pagination for clear navigation. Enhance your store's product presentation with our themes.
Mobile version
Ensure a seamless shopping experience for your customers, no matter their device. Our themes allow for the same number of products to be displayed on a single page as on desktop, with the added flexibility of showing 1 or 2 products per row on mobile devices for optimal viewing. Provide the best possible experience for your customers, with our themes.
Filter and sort collections without loading a new page
When applying filters to collections, products will load in seamlessly and do not require a page refresh to display those relevant to the filtering parameters.
Enable/disable vendor
You can enable/disable the product vendor name (sometimes called 'brand') from being displayed on collection pages. You can enable/disable the vendor name on all product pages under a setting that can be accessed via the theme editor on any product page.
Or, if you use multiple product templates, you can set this to be enabled or disabled based on each template.
Full-width layout
This powerful layout option is present in some of our themes and allows you to maximise screen space for your store's Collection pages. This is based on the design and UX approaches taken with each theme.
Steps
- From the Admin, go to Online store > Themes > Customize for the applicable theme.
- Select Collections > Theme settings Enable ‘Use full-width layout on collection pages’.
Product and Collection cards
The layout of product cards on your store's collection page, featured collection section, and other sections like related products can be customized in the Theme Settings. You can adjust the image shape, alignment, and cropping of the product images to ensure consistency. To do this, navigate to Theme Settings > Product Cards. Using the collection card theme settings, you can also customize the collection images that appear on collection lists and pages. You can also choose a background color for all cards by going to Theme Settings > Colors.
Promotional cards
Promotional cards are a great way to get creative with your theme. You can show important (and timely) information like a new product drop, shipping offers, sale promotions or adverts driving interest to your social media presence right within your collection page grid. The options are endless!
Example from our Mode horizon demo
Example from our Mode orbit demo
How to set up a Promotional card
Steps
- Open your Theme editor and navigate to your Collection page
- Click Collection pages in your menu on the left, and Add promotional cards.
- Within the block settings you can now add an Image, Icon, Heading, Text and Button.
- Style your promotion with Text overlay position and Overlay style
- Finally choose the Card size, Color scheme and the Position in grid
Tip
Can't find what you're looking for?
Our support staff are here to answer your queries, so don't hesitate to write to us!
Contact us
