Collection page

Collection pages are the ideal way to organize and display your products.

What are collection pages?

A collection page displays products in a gallery style format. Grouping and showcasing products into collections can aid product discovery, assist with upselling and potentially increase conversion rates. The Beautify collection page consists of a collection banner to introduce the collection, a related collections navigation to speed up product discovery, a filter and sort drawer and a gallery of product cards. The Beautify theme provides merchants with the tools to create stunning layouts that enhance brand identity.

Tip

Every collection is assigned to the default collection template. If different layouts are needed, alternative collection templates can be used. 

How to create a collection

Collections of products are created in the Shopify admin area, within Products > Collections. Collections can have a description, a featured image and their own metafields. Keep in mind that collections are intended to help customers find products by category or characteristic. Refer to Shopify's collections guide for more.

Tip

Two types of collections can be created; a smart collection which uses selection conditions to automatically manage products, or a manual collection which only includes the products that that have been individually chosen.

How to set up the collection page

Steps

  1. Open the Theme editor and select Collections from the dropdown at the top then select your preferred template (e.g. Default)
  2. Click on the Collection banner or Collection products to edit the settings.

How to set up the collection banner section

The Collection banner section is designed to be placed at the top of the page as a way of introducing the collection to customers. Beautify offers different styling options - make an impact with a supersized heading, create movement and interest with a scrolling text banner or enhance the layout with an image.

Collection-image.png

Steps

  1. Open the Theme editor, select Collections from the dropdown at the top, then select your preferred template (e.g. default)
  2. Click on the Collection banner and choose the Style:
    • Scrolling text - The collection name will scroll. The Scrolling speed can be selected.
      Lipsticks7.gif
    • Text - The collection name is displayed as text.
      Simple-collection.png
    • Text below image - The collection name will be displayed below an image.
    • Text over image - The collection name and description will be shown over an image. Settings can be used to adjust the image tint to ensure that the text remains legible.
  3. Set the Heading size using the dropdown which offers a range from Extra extra small to Super large. On mobile the heading size will be reduced appropriately. The overall Heading text scale can be adjusted in Theme settings > Typography.
  4. Choose the Headings capitalization. This replaces the capitalization choices from Theme Settings > Typography.
  5. Set the Text alignment.
  6. Select a Color scheme for the section. A separate setting, Color scheme overlay, provides control of the color scheme on the overlay. When showing text on top of an image, a transparent overlay background may be preferred. 
  7. Choose whether to Show collection description. This will be displayed under the heading.
  8. If using one of the two image based styles, choose the source for an Image and set a Fixed height for desktop and mobile. The image will be cropped to fit and focal points will be used where these exist. 
  9. Set a Tint color and Tint opacity to ensure that the text is legible if the Text over image style has been chosen.

Note

If a collection description is shown with the Text over image style, then the image height will adapt to ensure that the whole description is displayed.

How to choose a collection banner image

There are several possible sources for the collection banner image:

  • Collection featured image 
    Each collection has a featured image. This is added to the collection in Admin > Products > Collections and can be selected using the dynamic sources picker. It's one of the few images in Shopify that can't currently be edited to have a focal point. Ensure that the most important part of the image is central. To select the collection featured image, click on the dynamic sources picker under Collection banner > Image, and select the collection image. 
  • Image from the image library
    Under Collection banner > Image, click Select to choose an image from your library, or hit Explore free images to browse the stock libraries. Choosing a single image in this way will mean that the same image is used for all collection banners using that collection template. If the image has a focal point, this will be respected.
  • Image from a Collection metafield of type file
    To control the focal point of the image and have a unique image per collection, a collection metafield of type file can be created to hold the banner image. Under Collection banner > Image, click on the dynamic sources picker and select the new metafield. 

How to set up the collection products section

The Beautify Collection products section manages the layout of the product cards in a grid, related collections and the filter and sort drawer.

Collection-page-grid.png

Steps

  1. Open the Theme editor, select Collections from the dropdown at the top, then select your preferred template (e.g. default)
  2. In Collection products set the number of Products per page and Products per row on desktop and mobile.
  3. Choose whether to Show product count above the product cards. This count will show the number of products in the collection and will be updated if filters are applied.
  4. Enable the Show Layout toggle to let customers choose their preferred product grid layout. This user setting takes precedence over the theme editor and allows customers to control how many product cards are displayed per row.
  5. Choose Show cutout cards for a card layout where the product image breaks the top boundary of the card. This setting works best with transparent background png images. It may be advisable to create a separate collection template for products where cutout images are appropriate.

Note

If additional collection templates are needed, refer to Shopify's templates guide for more information.

Filtering

One of the most powerful features of a collection page is allowing customers the ability to filter products within a collection. The Beautify theme has a number of collection page settings which can be used to customize the appearance and functionality of the filters, allowing customers to get the products they need as quickly as possible. 

Steps

  1. Open the Theme editor, select Collections from the dropdown at the top, then select your preferred template (e.g. default)
  2. In Collection products, scroll to the Filtering settings.
  3. To switch on filtering select Enable filtering. The filters shown are set up in the Shopify Search & Discovery app, refer to Shopify's storefront filtering guide for more information about adding or removing filters and controlling the filter order and visibility.
  4. Choose to Hide tag filter if desired. This can be useful when using the quiz section which is based on tags. 
  5. Choose Show active filter counts to show a the number of active filters chosen next to the filter name (e.g. color, size). This can be particularly helpful for the customer when filters are collapsed. 
  6. Set Show filter counts to show a number next to each filter value indicating the number of products to which the filter applies.
  7. Customize the filter layout using the settings Show filter values in two columns and Filters to show as buttons.
  8. Select Expand all filters by default to show the filter values as open tabs and choose the number of Visible options per filter.

Sorting

Beautify allows customers to sort the products in the collection and allow merchants to choose which sort orders are most appropriate for their products.

Steps

  1. Open the Theme editor, select Collections from the dropdown at the top, then select your preferred template (e.g. default).
  2. Click on the Collection products and scroll to the Sorting settings.
  3. Select Enable sorting to show the sorting dropdowns.
  4. Select which sorting orders to show e.g. Alphabetical, Price etc.

Tip

When the page first loads, the collection is displayed in the default sort order set in Shopify Admin under Products > Collections. To edit this order, update the sort setting in the collection in the Shopify Admin. This default sort order will always be applied when the page loads.

Related collections

In the Beautify theme, an additional subcollections navigation can be added under the collection banner. These related collections can be images or text based "pills" and provide a quick way to link to other collections. 

Related-collections-only-image.pngRelated-collections-only-pills.png

Steps

  1. Open the Theme editor, select Collections from the dropdown at the top, then select your preferred template (e.g. default).
  2. Click on the Collection products and scroll to the Related collections settings.
  3. Choose the Collections to show. For the same set of collections, pick the collections from a list. It's also possible to show different related collections for each collection. Create a collection metafield of type collection list which contains the list of related collections for each collection.
  4. Set the Style to be Images or Pills and select the Alignment. A separate option to Show carousel on mobile is available. 
  5. Select a Text color and Background color.
  6. Go to the Images settings and set the Image source.
    • Featured - uses the collection image and will fallback to the first product image. 
    • Metafield - uses a collection metafield of type file called theme.icon to hold the image.
  7. Set the Image aspect ratio. Use the Image fit to determine whether the image is cropped to fit. When Cover is chosen, the Image alignment setting can be used to ensure that the most important parts of the image are shown.

Tip

Use a metafield image for related collections. While the collection featured image might look perfect as a thin wide banner at the top of the collection page, an image used as a small related collections link needs more focus - perhaps showing an example of the product, or a more stylised and graphical representation of the product. Beautify provides flexibility and control of collection images.  

Product cards

Customize product card design, content and layout using the Theme settings for Product cards and Colors.  Beautify offers flexible controls to crop images, add hover effects, and style card content.  Refer to our product card guide for more details about all aspects of product card design.

Follow our swatches guide to show alternative colors on the product card. Add product labels to display additional product information such as when a product is on sale. Refer to the product labels guide for more information. 

Note

Theme settings control the product card colors and layout across the store, not just on the collection page. 

Combined products

Beautify's combined products is a feature that lets you group related products and display them as a single product on the product page. On collection pages, each variant appears as its own card, making it easier for customers to browse and see all available color options. Refer to our combined products guide for more information about setting this up. 

Cutout cards

Show cutout cards allows the product image to overlay the top edge of the card and is available in various sections across the store including the collection template. The aim of cutout cards is to create a more interesting user experience and bring the product image to prominence by breaking out of the card. Refer to our product card guide for more information.

FAQs

How do I control the /collections/all catalog page?

Shopify stores have a page at the URL your-store.com/collections/all that lists all of the visible products in the store. This is the store's catalog page. By default, products on the catalog page are shown in alphabetical order and use the default collection template. To control what is shown or change the collection heading, go to the Shopify admin area and create a new automated collection of all products and give this new collection the handle all. Refer to the Shopify's catalog page guide for more details.

How do I control the number of product cards per row

The number of product cards per row can be controlled by the merchant and the customer. The merchant can set the default in the Collection page settings using the settings Products per row on mobile and Products per row on desktop. The customer/user can then change this if they prefer to see greater or fewer cards per row using the layout toggle. 

How do I use a custom image for the collection banner?

Steps

  1. In the Shopify Admin area, go to Settings > Custom data > Metafields, choose Collections and click on Add definition.
  2. Create a new collection metafield of type file to accept one image.
  3. In the Shopify Admin area, go to Products > Collections and choose a collection to edit.
  4. Edit the collection and scroll down to find the new metafield. Choose an image, set the image focal point and save the results. 
  5. Open the Theme editor, select Collections from the dropdown at the top, then select your preferred template (e.g. default)
  6. In the Collection banner section, use the dynamic source icon to select the metafield image.

How do I use a custom image for related collections?

Steps

  1. In the Shopify Admin area, go to Settings > Custom data > Metafields, choose Collections and click on Add definition.
  2. Create a new related collections icon metafield of type file with the namespace and key theme.icon. By default, Shopify creates new metafields with the namespace 'custom'. To change this to 'theme', before saving, click on the namespace.key text (probably custom.icon) and edit it to be theme.icon. 
  3. In the Shopify Admin area, go to Products > Collections and choose a collection to edit.
  4. Edit the collection and scroll down to find the theme.icon metafield. Choose an image, set the image focal point and save the results. 
  5. Open the Theme editor, select Collections from the dropdown at the top, then select your preferred template (e.g. default)
  6. In the Collection banner section, use the dynamic source icon to select the new theme.icon metafield for the related collection image. 

How do I create a custom list for related collections?

In order to show a different list of related collections or sub collections for each different collection page, we can use a metafield of type list of collections. For example, a bronzer collection might show related collections for blushers, foundation, concealers etc. 

Steps

  1. In the Shopify Admin area, go to Settings > Custom data > Metafields, choose Collections and click on Add definition.
  2. Create a new related collections list metafield of type collections list. The namespace, key, name and description can be whatever is memorable for your store
  3. In the Shopify Admin area, go to Products > Collections and choose a collection to edit.
  4. Edit the collection and scroll down to find the new metafield. Add related collections to the collection list metafield. 
  5. Open the Theme editor, navigate to the Collection where you have added the list of related collections to the collection list metafield. 
  6. Under Collection products, go to Related collections, click on the dynamic source icon and view the metafields for this collection template.
  7. Select the new collection list metafield to pull in the collections held in the new metafield.

What is color blending?

Use the Blend product images setting in Theme settings > Colors to add a light background color behind product images. This can be helpful to achieve a consistent look for all products. Read our color blending guide for more information. 

How do I show review stars on the collection page?

If your store is using a reviews app which links to Shopify's standard rating metafield, review stars can be shown below products on the collection page. Go to Theme settings > Product cards > Show rating.

How do I control which filters are shown?

This is managed using the Shopify Search & Discovery app. Refer to the Search & Discovery guide to filters to learn more.

How can I increase the quality of the images?

When Image fit is set to Crop in Theme Settings > Product cards, check that the Image aspect ratio chosen matches your predominant product image shape. The Beautify theme includes three different image quality settings in Theme settings > Advanced > Image quality. The Lower option will will ensure that the most compressed version of images are served and should be the best option for speed. If greater clarity is required, the Standard and Higher options can be chosen instead.

Can I use infinite scroll?

Yes, Infinite scroll and pagination styles are managed under Theme settings > Design > Pagination.

Bring your business ideas to life with Shopify

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