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:

itemtitle

Copy Title

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

itemfeatured-image

Copy Featured Image

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:

dimensiondimension of the image

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

dimension300x500
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:

cropcrop position

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:

scalescale factor

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:

formatformat type

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

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

itemlink

Copy Read More Button

Description

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

itemdescription

Copy Description

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:

itemtags

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

limitnumber of tags

For example to show only first 3 tags add:

limit3

Copy Product Tags

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:

itemcollections

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

limitnumber of collections

For example to show only first 3 tags add:

limit3

Copy Product Collections

Price

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

itemprice

Copy Price

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:

itemcompare-price

Copy Compare Price

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:

itemvariable-price

Copy Variable Price

Vendor

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

itemvendor

Copy Vendor

Type

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

itemtype

Copy Type

On Sale

Any element with the attribute:

itemon-sale

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:

itemsold-out

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:

itemproduct-image
indexindex of the image

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:

dimensiondimension of the image

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

dimension300x500
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:

cropcrop position

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:

scalescale factor

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:

formatformat type

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

Copy Simple Add to Cart

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:

itemoption-select

Inside this div add a Label and a Dropdown.

Copy Add to Cart with Dropdowns