Collection Item Elements

These are all the elements that you can add inside the collection item of a Shop Collection List Wrapper.

Title

The Title of the product can be added either to text elements or to link elements, if you use the latter it will also automatically link to the product page.

Add the attribute:

Featured Image

The featured Image is the main image attached to a product, 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 product 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

Link

The link is simply the url to the current product page. Just add the attribute on a link element of any type:

Description

The description of the product, can be added on any text element just adding the attribute:

Tags

This is the list of tags of the product add it on a link/text element, this element will be repeated once for every category that is attached to the product. To use it use the attribute:

Optionally you can also add the following attribute to limit the number of categories to show:

For example to show only first 3 tags add:

Collections

This is the list of collections of the product add it on a link/text element, this element will be repeated once for every category that is attached to the product. To use it use the attribute:

Optionally you can also add the following attribute to limit the number of categories to show:

For example to show only first 3 tags add:

Price

This is the product price, can be inserted on any text element using the attribute:

Compare Price

It shows up only if the product is on sale, and is the original price, usually should have a line-through. You can add it on any text using the attribute:

Variable Price

This element will show only if the product has a variable price and will show a text like: "$50 - $150", you can use it on texts using the attribute:

Vendor

This is the vendor name and can be added on any text element using the attribute:

Type

This is the type of the product and can be added on any text element using the attribute:

On Sale

Any element with the attribute:

Will be showed only if the current product is on sale. So it's usefull to show on sale badges.

Sold Out

Any element with the attribute:

Will be showed only if the current product is sold out. So it's usefull to show sold out badges.

Product Image

On shopify you can add multiple product images, if you want to select another specific image add this attribute on a div or an img element:

N.B: indexing of the arrays always starts at 0.

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

Add to Cart

You can use the default add to cart of webflow without adding any attribute

This add to cart will work with all products and if the product is variable it will add the first available variation to the cart.

Add to Cart with Dropdowns

The Option List that you see in Webflow add to cart is not exported in html so basically you can't use it. Inside the add to cart unfortunately you can't even add another select to recreate the missing html pieces. So the work around is to use "dropdowns" as fake selects. To make this work, add inside the Default State of the add to cart a div with the attribute:

Inside this div add a Label and a Dropdown.