Collection list page

How to add a Collection list page section?

Steps

  1. In the theme editor (Customize), open the template selector.

  2. Select Collection list.

  3. On the left-sidebar, add Collection list page.

  4. Make necessary changes > Save.

How to customize your Collection list page section?

General Settings

SettingDescription

Section width

3 options for container

  • Stretch width: span the section width regardless of screen size.

  • Fix width: depends on your page content width in Theme settings -> Layout.

  • Expand full width: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.

Color scheme

Select colors from Theme settings -> Colors

Heading

The title of the section

Description

The description of the section

Alignment

The position of the heading and description.

  • Left

  • Center

  • Right

Collection settings

SettingDescription

Collection to show

2 options for collection to show

  • Selected: Display only the collections added by the block.

  • All: Display all collections currently available in the store

Sort collections by

Apply sorting when the option in the setting 'Collection to show' is set to 'All'.

6 options for container

  • Alphabetically, A-Z

  • Alphabetically, Z-A

  • Date, new to old

  • Date, old to new

  • Product count, high to low

  • Product count, low to high

Image ratio

4 options for image ratio

  • Adapt to image

  • Square (1:1)

  • Portrait (3:4)

  • Landscape (4:3)

Alignment

The position of the content's display.

3 options for alignment

  • Left

  • Center

  • Right

Information position

2 options for information position

  • Overlay image: text overlay on an image

  • Bellow image: text beneath the image

Show product count

Display the product count for the collection.

Collections per page

Limit the display of the number of collections. Minimum: 1. Maximum: 20

Columns per row on desktop

Number of columns to display on desktop computers. Minimum: 2. Maximum: 5.

Column gap

4 options for column gap

  • Small

  • No gap

  • Medium

  • Large

Section padding

  • Top padding: Customize the top margin of the section

  • Bottom padding: Customize the bottom margin of the section

Last updated