How to configure products in Webflow
Smootify leverages custom DOM elements in order to create dynamic parts of your Website that are automatically empowered by our powerfull scripts.
The most important one is the Product Wrapper, that is used to load data from Shopify and dynamize static Webflow elements like buttons, texts and images.
Product Wrapper
The product wrapper basically defines the context of your design and connects it to a Shopify product. To load dynamically Shopify functionalities, like Prices, Stock state, add to carts, this element is fundamental and mandatory. Every dynamic part of your product must be inside this Custom element, otherwise it will be just static.
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.
You have to add this element inside Collection List Items to create lists of products, and you have to use this element in the Product page template. 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
Dynamic Products
There are some use-cases where you need to load up products directly from Shopify using Storefront APIs.
Best Sellers
Sales data cannot be imported into Webflow CMS, so to create a list of products that are sorted by the sales numbers, you need to use a static Product Wrapper not connected to Webflow CMS.
To achieve this functionality, you just need to use a special data-id Custom Attribute on the product wrapper.
data-idbest-sellerThe product wrapper will be repeated and duplicated automatically based on the response from Shopify storefront APIs. By default it will fetch latest 3 products, but you can change this limit by adding another Custom Attribute
limit3Latest created
Webflow CMS creation and update Date will not correspond to Shopify Dates, so if you want to show up effectively the correct latest created products you need to use a static Product Wrapper not connected to Webflow CMS.
To achieve this functionality, you just need to use a special data-id Custom Attribute on the product wrapper.
data-idcreated-atThe product wrapper will be repeated and duplicated automatically based on the response from Shopify storefront APIs. By default it will fetch latest 3 products, but you can change this limit by adding another Custom Attribute
limit3Custom Query
If you want to show up products based on a custom Storefront query you need to use a static Product Wrapper not connected to Webflow CMS.
To achieve this functionality, you just need to use a special data-id Custom Attribute on the product wrapper.
data-idcustom-queryNaturally you have to construct the query you need by following up Shopify documentation and add the query inside another custom attribute
data-queryyour query hereFor example:
data-querytag:'My Tag'Selects all products with the tag My Tag.
You can also optionally add another Custom Attribute
data-sortSortKeyWhere for the sort key you have to add any of the supported keys
For example
data-sortPRICEwill sort them by price.
The product wrapper will be repeated and duplicated automatically based on the response from Shopify storefront APIs. By default it will fetch latest 3 products, but you can change this limit by adding another Custom Attribute
limit3Specific Collection
If by any case you need to load products of a specific collection (for example in a list of dynamic Shopify Collections), you can use the attributes
data-idspecific-collectiondata-collection-handlecollection-handleNaturally, be sure to set as value the correct collection handle (or connect it to the CMS slug)
The product wrapper will be repeated and duplicated automatically based on the response from Shopify storefront APIs. By default it will fetch latest 3 products, but you can change this limit by adding another Custom Attribute
limit3