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:

or creating an alternative template using:

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:

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

Product Images

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

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

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:

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:

That will act as thumbnails to change the slide

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:

• A Div element with attribute:

Inside this div add 2 label with respectively the attributes:

and

On both this label you can stylize using the combo classes selected, 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

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.

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:

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:

to obtain as code:

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

Recommended

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:

Inside the collection list item you can add 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:

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

Link

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

Price

This is the product price, can be inserted on any text element 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: