Product lists without the CMS

Some lists cannot come from the Webflow CMS: best sellers need Shopify’s sales history, and related products are computed by Shopify. For these, a smootify-product fills itself from Shopify. You design one card, give it a data-id value, and Smootify repeats it once per product. There is no Collection list and no sync.

How it works

1. Add a Div block for the grid, or a Webflow Slider.
2. Inside it, add a smootify-product and design it as a product card.
3. Give it the custom attribute data-id with one of the values below, and limit for the number of products.

When the products arrive, the card takes the first one, and Smootify places a copy of the card after it for each of the others. In a Webflow Slider, each product gets its own slide (see below).

How many. Without limit, a list shows 3 products. Related and complementary products are the exception: without limit they show all the products Shopify returns. A metafield list always shows all the products picked in it.

When the list is empty. If Shopify returns no product, the card is removed. The heading you put next to it stays, unless you hide it: see “Hide a section when its list is empty” below.

The lists

Each data-id fills the card from a different place:

Best sellers, newest, available

best-seller, created-at and purchasable need nothing else. The first two use data Webflow never receives: the store’s sales history, and the date each product was created in Shopify (not in Webflow).

A custom query

data-id="custom-query" lists the products that match data-query, written in Shopify’s product search syntax:

• tag:gift for a tag;
• vendor:Acme for a vendor;
• product_type:Shoes for a product type;
• variants.price:<50 for a price range.

data-sort sets the order with one of Shopify’s product sort keys, such as TITLE, PRICE or CREATED_AT. The order runs one way only: PRICE is the lowest price first.

One collection

data-id="specific-collection" with data-collection-handle="summer" lists the products of that collection, in the order set in Shopify. It is useful where the page is not the collection’s own page, such as the home page.

Inside a Collection list of your Collections, bind data-collection-handle to the Slug field: each collection item then shows its own products. A Webflow Collection list cannot do this with a nested list of products.

Related and complementary products

On the product page, data-id="related" or data-id="complementary" lists products for the product in data-parent-id. Bind data-parent-id to the Shopify ID field of the page.

• Shopify computes related products by itself.
• Complementary products are the ones you pick for each product in Shopify’s Search & Discovery app. If none are set there, the list stays empty.
• Without data-parent-id, the element is removed.

For the same lists in the cart, based on what the visitor added, see Cart upsells.

Products picked in a metafield

data-id="metafields.custom.pairs_with" lists the products of the product metafield custom.pairs_with of the product in data-parent-id. Write the namespace and the key of your own metafield after metafields..

• The metafield must be of type product reference, or a list of product references. Any other type gives no products.
• Its definition in Shopify needs Storefront access.
• data-repeat="2" repeats the list twice, which helps a slider that has only a few products.

The merchant then picks the products for each product in Shopify, such as “Complete the look”. To show the referenced products without prices or add to cart, the metafield attribute is lighter: see Metafields on the page.

Alternatives when a variant is sold out

Instead of a dead end, the product page can offer other products while the chosen variant cannot be bought. It takes only attributes on the page’s smootify-product: nothing goes into the Webflow CMS.

1. In Shopify, create a variant metafield of type List of products, such as custom.alternatives, with Storefront access. On each variant that needs them, pick its alternatives: a sold-out size can point to similar products.
2. Inside the page’s smootify-product, add a Div block with condition="out-of-stock". It shows only while the chosen variant cannot be bought.
3. Inside it, add a Div block with if-variant-metafield="alternatives" and put your heading in it. It shows only when the chosen variant has alternatives.
4. Inside that Div block, add a Link block with variant-metafield="alternatives", holding an Image with reference="image" and a Text block with reference="title". It repeats once per alternative.

Everything follows the chosen variant: the block shows for a sold-out size that has alternatives, changes with the size, and hides when the visitor picks a size in stock. More about references and if-variant-metafield: Metafields on the page.

These links show the image and the title of each alternative. For cards with a price and an add-to-cart button, use a product metafield with a smootify-product list, as above, inside the same condition="out-of-stock" block: the alternatives are then the same for every variant, and if-metafield="alternatives" on the Div block around the heading hides it when the product has none.

Products picked for each customer

With data-parent-id="customer", the same data-id="metafields.<namespace>.<key>" lists the products of a metafield of the logged-in customer: a list the merchant curates for each customer, such as their usual order or the catalog of a wholesale buyer.

• The metafield is a customer metafield, of type product reference or a list of product references. Create it in Shopify under Settings › Custom data › Customers, with its Customer accounts access set to Read, then pick the products on each customer.
• Customer accounts must be set up on the site: see Customer accounts.
• For a visitor who is not logged in, or a customer with no products in the metafield, the element is removed.
• data-repeat works as for a product metafield. While the list has products, the page’s body gets the class has-customer- followed by the namespace and key, such as has-customer-custom-my_products.

Lists in a slider

Put the smootify-product in the first slide of a Webflow Slider. Each product after the first goes into its own slide.

Placeholder slides. In the slides after the first, you can design smootify-product elements with data-id="loader", as in the example above. The list fills them in order, one per product, so the slider has its final shape before the products load. When there are more products than placeholders, Smootify adds copies of the first slide. Placeholders the list does not reach stay as designed: they are part of the layout, not leftovers. See placeholder cards.

The slider follows the products. Smootify redraws the Webflow Slider once the slides are filled, and again when they change. A card that hides, such as one with hide-if-product-in-cart whose product is in the cart, hides its whole slide, so the slider leaves no gap. When every card fits in view, with one page, both arrows get the class is-disabled and aria-disabled="true": style is-disabled as a combo class on the arrows, for example with lower opacity. At the ends of a slider that is not infinite, Webflow’s own Hide arrows setting hides them.

Hide a section when its list is empty

While a list has products, the page’s body gets the class has- followed by the list’s value: has-best-seller, has-related, and so on. For a metafield list, the class is has- with the namespace and key, such as has-custom-pairs_with.

For related and complementary products, two conditions do the work in the Designer: an element with condition="has-related" or condition="has-complementary" shows only while that list has products. Put it on the section around the heading and the list, as in the example above. For the other lists, the body class can be used in custom CSS: see CSS.

Other lists

• The visitor’s wishlist: see Wishlist.
• Recently viewed products: see Recently viewed.
• Filtered lists the visitor can change: see Filters, sorting and pagination.

Before you publish