User Guide

Search limit to:






Collection list page

by Admin on Oct 06, 2025

1. What is a Collection list page?

A Collection list page displays all active collections (or a curated subset) in a grid or list. It serves as a central hub for shoppers to browse the store’s collections.

2. Location & Setup

  1. Go to Online Store > Themes > Customize.
  2. Click on the Homepage dropdown menu.
  3. Search for the Collections list.
  4. Click on it to navigate.
  5. From here, you can customize the page template as you want.

3. Page Components

Section

Displays a grid or list of all collections.

Section

Displays a banner at the top of the collections list page.

4. Common Use Cases

🤔 How to set up a Collection list page?

Want to set up a Collection list page? Here's how:

STEP 1: Add a section

Add the Collection list page section.

STEP 2: Customize the overall look

Click the Collection list page section to open its settings panel and:

  • Add a Heading to the section (default: empty).
  • Choose which collections to display: All or Selected.
  • Set Sort collections by: Alphabetically (A–Z / Z–A), Date (new–old / old–new), Product count (high–low / low–high).

STEP 3: Configure collection cards

In Collection card settings:

  • Select Image style (Square (1:1), Rectangle (2:3), Standard (3:4), Round, Natural).
  • Choose Heading size (Small, Medium, Large).
  • Enable text overlay to show text of Collection card into Collection Image.
  • Adjust Content alignment (Left, Center, Right)
  • Adjust Content position (Top, Center, Bottom)
  • Adjust Overlay opacity (adjust percentage). This configure will work if Enable text overlay is turned on.
  • Toggle Show item count to display product quantities.

STEP 4: Add images to collections

Edit individual collections in Shopify admin to add images.

⚠️ Note: Optimize images for your chosen aspect ratio.

STEP 5:  Click Save when done.

 

🤔 How to set up a Collection banner for the Collection list page?

Want to set up a Collection banner? Here's how:

STEP 1: Add a section

Add the Collection banner section.

STEP 2: Customize the overall look

Click the Collection banner section to open its settings panel, and:

  • Upload an image: Click Select to choose from your files or explore free images.
  • Adjust overlay: Set Image overlay opacity for better text readability.
  • Add a Heading (default: empty).
  • Choose Collection title position, Heading size, and Heading tag (H2 recommended for SEO).
  • Enable navigation: Toggle Show breadcrumbs to display page hierarchy.

STEP 3: Adjust the image look

In Section layout, configure dimensions and spacing:

  • On desktop 🖥️: set Desktop height.
  • On mobile 📱: set Mobile height for optimal mobile display.

STEP 4: Click Save when done.

 

🤔 What customization options can you give your Collection list page?

For the whole Collection list page section

✨ Change color scheme:

Click on the Collection list page section, and choose the overall scheme you want to use in both light and dark mode in the Color scheme.

✨ Change the section width, add padding, or add a divider

Click on the Collection list page section, and scroll down to the Section layout group, and you will be able to change those settings.

For the whole Collection banner section

✨ Change the Heading tag (for SEO purposes)

Click on the Collection banner section, find and choose the Heading tag from the list.

✨ Change the height of images

Click on the Collection banner section, scroll down to Section layout, and choose your preferred image height in Desktop height (for desktop 🖥️) and Mobile height (for mobile 📱).

Need help? Contact our support team at Omni Themes Support.