User Guide

Search limit to:






Collection list page

by Admin on Jun 17, 2024

1. What is a collection list page?

A Collection List Page is a type of page that displays all active collections or specifically chosen collections. It serves as a central hub where customers can browse through various collections of products offered by the store.

2. How to add a heading at the top of my collection list page?

Step 1:

Open the Collection list page in Theme Editor.

Step 2:

Under Template, click “Add section” to add a new Collection banner section

Step 3:

On the new panel that appears on the right side, make changes to the following sections to customize your Heading:


Section

Function

Enter the content to add a heading for the collection list page

Slide left/right or enter the specific number to the box to change the font size of your heading

Change the text alignment of your heading 

Select the tag of your heading (for SEO purposes)


Step 4:

Click Save to save your changes.

3. How to add a banner at the top of my collection list page?

Step 1:

Open the Collection list page in Theme Editor.

Step 2:

Under Template, click “Add section” to add a new Collection banner section

 

Step 3:

On the new panel that appears on the right side, make changes to the following settings:

Section

Function

Add the image that you want to make the banner

If you want to add a heading text above your image, this will place a layer over your background image. So, your heading will be easier to read. Slide right or left to adjust the opacity of the overlay 

Change the DESKTOP layout for the banner

  • Adjust the background image height
  • Make the whole banner full-width
  • Adjust top padding
  • Adjust bottom padding

Change the MOBILE layout for the banner

  • Adjust the background image height
  • Make the whole banner full-width
  • Adjust top padding
  • Adjust bottom padding

Step 4:

Click Save to save your changes.

4. How to add breadcrumbs to my collection list page?

Step 1:

Open the Collection list page in Theme Editor.

Step 2:

Under Template, below the Collection banner,  select “Add breadcrumbs

 

Step 3:

Change the setting to make the breadcrumbs appear the way you want.

Step 4:

Click “Save

5. How to set up the collection list page?

To set up the collection list page, follow these grouped configuration steps:

  • Enter the heading for this page
  • Set the heading tag (e.g., H1) for the page title.

Collections

  • By default, all active collections are displayed on this page. To show selected collections, you need to configure "Show collections" to "Selected" and add a block for each collection.

In case you choose to show only selected collections, follow these steps:

  • Go to the section settings of your collection list page, configure "Show collections" to "Selected"
  • Add a block for each selected collection.
  • Choose the specific collection you want to display.
  • Upload or select images for the collection if the collection itself does not have a featured image.
  • Set the number of columns/rows the collection spans (e.g., 1).

  • Sort collections alphabetically or by other options (Only applied when all collections are shown)

Collection Card

  • Choose the image style to display among [style], [style 2] and [style 3]...
  • To add an image to the collection on this page, edit it from the admin.
  • Adjust the title size (e.g., 80%).
  • Enable Text Overlay
  • Choose content alignment (Left, Center, Right) & Choose content position (Top, Center, Bottom).
  • Adjust the overlay opacity (e.g., 5%).

Color Settings: Set the title & text color for dark/light backgrounds.

Layout

  • Set the number of columns on the desktop/mobile (e.g., 5).
  • Adjust spacing between blocks (e.g., 28 px).
  • Set top/bottom padding (e.g., 36 px).

By following these steps and configurations, you can effectively set up and customize your collection list page to display all or selected collections, enhancing user navigation and engagement on your site.

6. How to display only specific collections on a page?

Step 1:

Open the Collection list page in Theme Editor.

Step 2:

Select the Collection list page section.

Step 3:

On the new panel popup, under Show Collections, click on “Selected”.

Step 4:

Add a new Collection block and change the setting to:

  • Assign a collection to the block
  • Add a cover image for the collection
  • Change the width and height of the collection.

The final look!

 

7. How to change the sort order of the collections?

There are two main ways to change the order of collections displayed on your collection list page:

a) Method 1: Automatic Sorting (All Collections):

This automatic sorting can only apply if you're showing All collections: 

Click on the Collection list page section, under Sort collections by, and choose the way you want your collection to be displayed:

b) Method 2:  Manual Sorting (Selected Collections):

You can only give your collection list a custom order if you choose to show only Selected collections.



Following the guide on How to display only specific collections on a page

After choosing all the collections you want to appear on your collection list page, hold and drag the Collection block into your desired order.

8. Show customized collection images with metafield

✍️ Why would you need to use metafield for collection images?

  • You want to show a designed image for the collection on the menu, without changing the featured images of that collection.
  • You want to show higher-resolution images on the menu.

✍️ How to do it?

Step 1: Create a collection metafield: 

  • In Shopify admin, go to Settings> Custom data > Collection > Add definition.
  • Give your metafield a name.
  • Choose type as File.
  • Click Save.

Step 2: Assign a value for the collection metafield:

  • Go back to Shopify admin, and click on the Products > Collection tab.
  • Choose a collection.
  • Scroll down to Metafields.
  • Upload an image in the newly created collection metafield.
  • Click Save.

👉 Refer to this guidance about “How to create Product metafields” for a detailed explanation.

Step 3: Set up in Theme Editor: 

  • In Theme Editor (Visit it by clicking on Online store > Themes > Customize)
  • Click on the Collection list page (from the dropdown menu on top)
  • Tap on the Collection list section.
  • A new panel will appear, scroll down to find Auto-fill collection images with metafield.
  • Copy the text after “custom.” of the metafield’s Namespace and key. → Paste to this “Auto-fill collection images with metafield” field. (See the image below)
  • Click Save.

9. How to customize the look of my collection cards?

All customizations for your collection cards can be made directly in your theme editor. Here's how:

Step 1:

Go to your Shopify admin, navigate to Online Store > Themes, and click Customize next to your active theme.

Step 2: 

In the theme editor dropdown menu, within Template, find and select the Collection list page.

Step 3: 

On the new panel shown, locate the section called Collection card. This is where you'll make all your changes.

🔍 To change the aspect ratio of your collection card…

Choose your favorite Image style option 

🔍 To change the title size of your collection card…

Slide left or right, or enter a specific number to the Title size 

🔍To make the title shown on your collection card…

Click the box to Enable Text overlay

You can also adjust the transparency of the overlay using the Overlay opacity setting

🔍 To change the title alignment of your collection card…

Select your preferred Content Alignment.

🔍To change the title position on your collection card…

Select your preferred Content position:

Note: This is only applicable when the Text overlay setting is enabled.