Products Template
The Dynamic Products Template page that you will find in your Webflow project, should show up all the details of the current Product. Naturally you can add more custom fields to the Products CMS collection in order to further style up this page according to your needs.
The most important element in this page is the Product Wrapper, is the context of all the dynamic features of the product
Product Wrapper
The product wrapper basically defines the context of your design and connects it to a Shopify product. Every elements need that is connected to a product must be inside this DOM element.
This element defines the context and loads the data of a specific product that is selected using a Custom Attribute. Which name is data-id and the value should be connected to the Shopify ID of your CMS product collection.
Do never forget to add this element and connect the data-id attribute, otherwise all dynamic functions will not work!
Product Wrapper
Copy Webflow element
If you don’t want to start from an empty wrapper, you can also paste inside the wrapper our pre-made product page example
Product Page Example
Copy Webflow element
Upsells Products
Usually inside the Product template page you should usually also show up upsells products. You have different several ways to show up the different products.
Related Products
Shopify has a built-in relation system for products, they are automatically selected based on collection and sales data, to show up related products is very very simple.
You have to use the Related Product wrapper
Related Product Wrapper
Copy Webflow element
This element should not go inside a collection list, this wrapper will be automatically duplicated once for each related product of the current product.
The connection is done in this case with 2 custom attributes:
The data-id one, must be left as related.
While the data-parent-id must be connected to the Shopify ID custom CMS field.
You have to read these 2 attributes as: Load related products of the Product that is defined on the attribute data-parent-id.
Inside the wrapper naturally you can add all products elements or you can also start up from our pre built element.
Product Card
Copy Webflow element
Show up elements only if the product has related products
Naturally it can happen that new products not always have already related ones, you can show up Webflow elements (E.g: an heading -> Frequently Bought Together) conditionally by adding the following custom attribute:
conditionhas-relatedComplementary Products
Shopify has a built-in complementary system for products, these products are manually selected using the app Search & Discovery of Shopify.
How to add complementary products.
To show up complementary products, you have to use the Complementary Product wrapper
Complementary Product Wrapper
Copy Webflow element
This element should not go inside a collection list, this wrapper will be automatically duplicated once for each complementary product of the current product.
The connection is done in this case with 2 custom attributes:
The data-id one, must be left as complementary.
While the data-parent-id must be connected to the Shopify ID custom CMS field.
You have to read these 2 attributes as: Load complementary products of the Product that is defined on the attribute data-parent-id.
Inside the wrapper naturally you can add all products elements or you can also start up from our pre built element.
Product Card
Copy Webflow element
Show up elements only if the product has complementary products
Naturally it can happen that new products not always have already complementary products, you can show up Webflow elements (E.g: an heading -> Frequently Bought Together) conditionally by adding the following custom attribute:
conditionhas-complementaryMetafields Products
Shopify has a Metafields system that you can use to manually select “related” products.
how to add metafields definitions
To show up metafields selected products, you have to use the Metafields Product wrapper
Metafield Product Wrapper
Copy Webflow element
This element should not go inside a collection list, this wrapper will be automatically duplicated once for each complementary product of the current product.
The connection is done in this case with 2 custom attributes:
The data-parent-id must be connected to the Shopify ID custom CMS field.
The data-id one, must be modified according to your effective metafield definition. (Be sure to create a metafield definition of type Product or List of Products)
data-idmetafields.custom.metafield_keyWhere you have to modify custom with your metafield namespace (custom is the default one of Shopify) and metafield_key with the effective key of your metafield definition
You have to read these 2 attributes as: Load products defined by the metafield that is defined on the attribute data-id of the Product that is defined on the attribute data-parent-id.
Inside the wrapper naturally you can add all products elements or you can also start up from our pre built element.
Product Card
Copy Webflow element