Collection Page

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

or creating an alternative template using:

Inside this page you can add all of the following elements:

Collection Title

This is the name of the current collection, it can be used on any text using the attribute:

Collection Description

This is the description of the current collection, it can be used on any text using the attribute:

Collection 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

Collection Type

This is the type of the current collection, it can be used on any text using the attribute:

Collection Vendor

This is the vendor of the current collection, it can be used on any text using the attribute:

Shop All Tags

This is the list of all tags of your Shop, you can add the following attribute on a Link:

This link will be repeated and populated according to the tags you have created in your blog. This includes tags of articles that are not in the current pagination view.

Shop Tags

Returns all tags in a Shop. Similar to Shop All Tags, but only returns tags of products that are in the filtered view.

You can add the following attribute on a Link:

This link will be repeated and populated according to the tags present in the current filter view.

Shop Types

Returns all types in a Shop.

You can add the following attribute on a Link:

This link will be repeated and populated according to the types of the shop.

Shop Vendors

Returns all vendors in a Shop.

You can add the following attribute on a Link:

This link will be repeated and populated according to the types of the shop.

Archive Products

This is the list of all the products of the current collection. 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 Collection List Item you can add all of the elements that you find in the page:

if you want, you can just copy a sample card and paste it inside the Collection List Item