Collections List Page

This is the page where all collections of your shop are listed. This page can be defined using the following attribute on the Body element of your page:

Inside this page you should show a list of your collections

Collections

This is the list of all the collections of your Shop. Note that this element can be added also inside other pages, but it can be paginated only in the collections list page.

To create a collections list, on a Collection List Wrapper just add the attribute:

To enable pagination, just press on paginate items inside Webflow, but remember that limit will be set on Shopify by following the path Online Store > Themes > Customize

Inside the Collection Item you can add any of the following elements:

Title

This is the collection title, can be added on texts or links using the attribute:

Description

This is the collection description, can be added on texts using the attribute:

Products Count

This is the number of products presents inside the collection, can be added on texts using the attribute:

Featured Image

The featured Image is the main image attached to the collection, you can use the featured image on Images or any element as Background Image (don't forget to add a placeholder image and stylize it, the archive image will follow that image style). If you add the attribute to a link, it will also directly link to the article page.

To create a futured image just use the attribute

Shopify automatically compress the photo, and optimizes the photo, you can add the following optional attributes to change shopify parameters

Dimension

you can change the size of the featured image, you can add the following optional attribute:

As for valid dimension you can use these prefixed values below, ordered by largest to smallest:

master,grande, large, medium, compact, small, thumb, icon, pico

or you can set a fixed width x height (or just one of the parameters):

{width}x{height}, {width}x, x{height}

For example to set a fixed size image of 300x500 add the attribute

Crop

You can specify a crop parameter to make sure that the resulting image's dimensions match the requested dimensions. If the entire image won't fit in your requested dimensions, the crop parameter specifies what part of the image to show.

You can specify crop using the attribute:

Valid options are:

top, center, bottom, left and right

Scale

The scale parameter lets you specify the pixel density of the image. You can add it using the attribute:

Valid options are:

2 and 3

Format

The format parameter lets you specify what file format to use for the displayed image.

You can specify it adding the attribute:

Valid options are:

jpg and pjpg

pjpg is progressive JPEG. A browser loads a full-sized progressive JPEG with gradually increasing quality, instead of loading the full-quality image from top to bottom like a traditional JPEG.

Note that Shopify can do the only the following format conversions for you:

• PNG to JPG
• PNG to PJPG
• JPG to PJPG

Tips

If you want to exclude a collection from the collection list, you can use the liquid elements. For example if you want to exclude the collection named "frontpage", you can add this attribute on the Collection List Item element: