Collection list page

Visit our demo to see all available previews: Click here.

How to set up sections for Collection list page?

  1. From your Shopify admin, go to Online Store -> Themes.

  2. Find the theme that you want to edit, and then click Customize.

  3. Choose Collection list from the dropdown window.

  4. From the side menu, select Collection list page. Configure the collection list page in the setting on the side with the following settings.

Setting
Description

Layout style

Select the layout style for the section:

  • Classic

  • Masonry

Section width

Select the section width from the dropdown menu:

  • Full width

  • Page width

  • Customized width

Customize width

Determines the width of the section when you choose "Customized width" option. Can be from 1200px to 1800px, increasing arithmetically of 50px (pixel)

Show breadcrumb?

Select this checkbox to show/hide breadcrumb

Breadcrumb: size

Font size of text:

  • Default

  • XX-Small

  • X-Small

  • Small

  • Medium

  • Large

  • X-Large

  • XX-Large

  • XXX-Large

Breadcrumb: alignment

Set horizontal alignment for content inside section containers.

  • Left

  • Center

  • Right

Breadcrumb: padding top

Determines the height of the top inner space of the breadcrumb. Can be from 0px to 100px, increasing arithmetically of 1px (pixel)

Breadcrumb: padding bottom

Determines the height of the bottom inner space of the breadcrumb. Can be from 0px to 100px, increasing arithmetically of 1px (pixel)

Heading

Add text to display as a section heading. (Leave the field blank to hide the heading)

Heading size

Font size of text:

  • Default

  • XX-Small

  • X-Small

  • Small

  • Medium

  • Large

  • X-Large

  • XX-Large

  • XXX-Large

Heading alignment

Set horizontal alignment for content inside section containers.

  • Left

  • Center

  • Right

Heading top margin

Determines the height of the top outside space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel)

Heading bottom margin

Determines the height of the bottom outside space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel)

Collection list

Setting
Description

Collection type

Select the collection type for the section:

  • All collection

  • Custom collection

Sort collections by

Select the sort order of the collection, which is set in the collection pages of the Admin from the dropdown menu:

  • Alphabetically, A-Z.

  • Alphabetically, Z-A.

  • Date, new to old.

  • Date, old to new.

  • Product count, high to low.

  • Product count, low to high.

Number of columns on desktop

The number of products from the products to display on desktop. Must be an even number. Minimum: 1. Maximum: 5 (Not For Layout 'Masonry')

Number of columns on mobile

Select the number of columns to display on mobile devices from the dropdown menu:

  • 1 column

  • 2 columns

(Not For Layout 'Masonry')

Grid between

Determines the grid spacing between on desktop devices. Can be from 10px to 50px, increasing arithmetically of 1px (pixel).

Grid between tablet

Determines the grid spacing between on tablet devices. Can be from 10px to 50px, increasing arithmetically of 1px (pixel).

Image ratio

Select the ratio of image from the dropdown menu:

  • Adapt to image

  • Portrait.

  • Square.

(Add images by editing your collections. Learn more)

Collection content

Setting
Description

Hide collection title

Enable/disable checkbox

Show collection product count

Enable/disable checkbox

Button

Setting
Description

Button label

Add text to display as a button on the section (Leave the field blank to hide the link)

Section padding

Setting
Description

Top padding

Determines the height of the top inner space of the main section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).

Bottom padding

Determines the height of the bottom inner space of the main section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).


Block Collection

Setting
Description

Choose collection

Select a collection to add all its products to the block

Upload image

Set up an image

Last updated