Product Page

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

pageproduct

or creating an alternative template using:

pageproduct-template

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

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

Product Images

In WooCommerce you can associate multiple images to your product and you can show them on your theme just using the attribute:

itemproduct-images

This attribute is very very flexible and can be used in a lot of ways.

You can add it to:

  • A Slider: in this case each image will create a new slide;

  • A Div: in this case for each image of the product the div will be duplicated and will get as background image the respective image;

  • An Image: in this case for each image of the product the image will be duplicated and will get as image the right image;

  • A Lightbox Link: in this case the image in the lightbox link will not be modified, but the lightbox will be linked to all the product images;

  • A Lightbox Link that is placed inside a Collection List Wrapper: in this case you will have multiple images with lightboxes that are linked together;

Product gallery is simply an example combination of Product Images, as you have read before, Product Images attribute is pretty flexible and can be used on different type of elements with different behaviours. It is composed by a slider that has attribute:

itemproduct-images

Inside the slide there is a lightbox link without attributes ("Remember to link the lightbox to a media to make it work). And below the slider there is an image with attribute:

itemproduct-images

That will act as thumbnails to change the slide

Copy Product Gallery

Add To Cart

The Option List that you see in Webflow add to cart is not exported in html so basically you can't use it. You have to select one of the following mode to create your add to cart

Add to Cart with Variation Swatches

You don't need anymore to use apps to create variation swatches, just add the default Add to cart of Webflow and inside the default state add the following elements:

  • A text element with attribute:
itemoption-title
  • A Div element with attribute:
itemoption

Inside this div add 2 label with respectively the attributes:

itemcolor

and

itemoption

On both this label you can stylize using the combo classes selected and soldout, to create very modern looking selectors!

Note that in order to make the color works, the name of the variation must be a valid css color name

Copy Add to Cart with Variation Swatches

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

Form Modifier

For some third party plugins you have to modify the output of the Adapter code for the Add to Cart, you can add an optional attribute on the add to cart button:

form-modifieryour code

The adapter usually just wraps the add to cart button inside the code:

{% form 'product', product %}

if you add this attribute instead, "your code" will be outputted like this:

{% form 'product', product, your code %}

So if you use an app like ReCharge, that needs to modify this form you can add the attribute:

form-modifierdata-productid: product.id, class: productClasses

to obtain as code:

{% form 'product', product, data-productid: product.id, class: productClasses %}

The product recommendations are based on products that are commonly purchased together or products in related collections. Product recommendations become more accurate over time as more order and product information becomes available.

The algorithm that identifies recommended products is based on data about products that were purchased together and products with similar descriptions. It uses this data to provide a mix of those related products as recommendations for a given product.

In cases where purchase or product description data aren't available for a given product, products from a related collection are shown. The algorithm uses the collection in the URL from which the request to the API endpoint originated, and pulls other products from that collection. If the product doesn't have a collection URL, then the recommendation algorithm finds collections that include the product and pulls other products from those instead (excluding collections with handles “all” and “frontpage”).

Requirements and limitations

The types of product recommendations that appear are determined by your online store and your Shopify plan:

  • Purchase history and product descriptions: Plus plan and having <7000 products published in your Online Store, with an English storefront

  • Purchase history only: Plus plan and having <7000 products published in your Online Store, with a non-English storefront

  • Purchase history only: Non-Plus plan and having <7000 products published in your Online Store

  • Collections: Any plan with >7000 products published in your Online Store

  • You can't customize the recommendation algorithm to exclude specific products (but you can write custom JavaScript code where the recommendations are being displayed to exclude specific products).

  • The recommendation algorithm doesn't use orders that have been imported from another store or ecommerce platform to generate product recommendations.

  • Products that are out of stock, set to a price of 0, or gift cards aren't included in recommendations.

For these requirements data are loaded by Javascript and not served by shopify, so you can't use a lot of items inside them but only the ones listed below!

Insert a Collection List Wrapper and add the attribute:

shoprecommended

Inside the collection list item you can add the following elements:

Copy Recommended

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

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

Price

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

itemprice

Copy 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