Skip to content
Smootify Logo
Components
Design your products

How to configure products in Webflow

Webflow Project > Products
> 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.

product wrapper

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.

custom attribute

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-id
best-seller

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

limit
3

Latest 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-id
created-at

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

limit
3

Custom 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-id
custom-query

Naturally you have to construct the query you need by following up Shopify documentation and add the query inside another custom attribute

data-query
your query here

For example:

data-query
tag:'My Tag'

Selects all products with the tag My Tag.

You can also optionally add another Custom Attribute

data-sort
SortKey

Where for the sort key you have to add any of the supported keys

For example

data-sort
PRICE

will 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

limit
3