Product cards

A product card shows one product in a list: a Collection list, a search & discovery grid, a slider or a list of best sellers. In Smootify every card is the same element as the product page, smootify-product, holding a smaller design. This page covers what a card needs, what it can show, and how to add to the cart from it.

What a card needs

• A smootify-product element with the product’s id. In a Collection list, add it inside the Collection item and take data-id from the Shopify ID field. In the lists Smootify fills itself (search & discovery, the search page, best sellers and the other product lists), you design one card and Smootify gives each copy its product.
• Everything else is optional. Every attribute of the product page works inside a card: title, prices, conditions, metafields, even a gallery or an add-to-cart form. A card usually needs fewer of them.

In purple, the CMS bindings. In a Collection list, link both links to Current Product in their link settings, and bind the Image to Image and its Alt text to Image Alt. The card works before Smootify loads, and search engines read it; Smootify then writes the live values from Shopify.

A few things work differently on a card:

• it ignores ?variant= in the address, which is only for the page’s own product;
• it starts on the first variant that can be bought, or on the first variant when none can;
• when Shopify does not return the product (it is unpublished, or not sold in the visitor’s market), the Collection item gets the class w-dyn-bind-empty.

What a card can show

Link and image

Four attributes fill the link and the pictures of a card. The outline shows what each one fills:

Images Smootify writes accept size attributes such as max-width, so the card does not download a full-size photo: see image size.

Prices

smootify-price shows the price of the card’s variant, as on the product page. variant="unit-price" adds its price per unit, such as €1.50/ 100 g (Price per unit). For the range of the product’s variants, use these attributes on text. Here on a shirt in four sizes, with S on sale and sold out:

Every value is in product values. With the minimum prices, condition="variable-price" gives “From $29 $39”:

Option values

product="option-values" shows the values of one option, such as the colour dots under a card. Smootify makes one copy of the element per value.

• Pick the option with data-option-name="Color,Colour" (the first of those names the product has, written as in Shopify) or data-option="2" (the second option; the default is the first).
• Inside the element, option="bg-color" or option="color" paints the value’s colour as a background or as the text colour, option="image" shows its image and option="title" its name. A copy without any of these shows the value’s name as text.
• The colours and images come from Shopify: see Swatch colours and images.
• The element is removed when the product does not have that option.
• A link with product="link" inside a copy opens the product with that value already chosen (the first available variant with it).
• More in option values.

Option values only show. To let the visitor pick a value on the card, use a picker such as variant-swatches inside the card: it changes the card’s variant, its image and its price.

Badges and labels

• States. condition="on-sale" (and its opposite not-on-sale), in-stock, out-of-stock, low-stock and the other product conditions work on cards. condition="is-new" shows a “New” badge while the product was published less than 30 days ago; data-new-days="14" on smootify-product changes the days.
• Discount. variant="discount-percentage" shows the discount of the card’s variant. Put it inside an element with condition="on-sale", since it shows 0% otherwise.
• Tags. An element with tagged="bestseller" stays only when the product has that tag, and not-tagged does the opposite: see tag conditions.
• Collections and vendor. product="collections" makes one copy per collection, with its link on a Text link; exclude="Home, Sale" leaves some out. product="first-collection" shows one. product="vendor" on a Text link links to the vendor page.

Hide a card that is already in the cart. Add hide-if-product-in-cart to smootify-product. The card (its Collection item) is hidden while a cart line holds the product. It is useful for “You may also like” lists. The value false turns it off, in any case, so a component can drive it with a boolean property. In a Webflow Slider, the card’s whole slide is hidden.

While it loads. Add skeleton="text", "image" or another loading value to the elements that should shimmer until the product loads.

Add to cart from a card

There are two ways:

The direct button is a Custom element with the tag button and the attribute data-is="direct-add-to-cart":

• The elements with data-state="default" and data-state="loading" swap while the product is added. Both are optional.
• With a picker on the card, the button adds the variant the visitor picked.

The full form is built as in step 6 of Build the product page. Use it when the card needs a quantity field, options inside the form or extra fields.

A Webflow Button cannot add to the cart: it publishes a link. Use a Custom element with the tag button.

Cards in a slider

To show the cards of a Collection list in a Webflow Slider, wrap both in a Custom element with the tag product-slider:

Design one empty slide. When the page loads, each Collection item moves into a copy of that slide, and the Collection list is removed. The slide’s own classes and settings stay. For lists that do not come from the CMS, such as related products, see Product lists without the CMS.

Placeholder cards

A smootify-product with data-id="loader" is a placeholder card: it loads nothing by itself and is never removed. It is part of the design:

• in search & discovery and on the search page, the first results replace the placeholder cards;
• in a Webflow Slider, a product list such as best sellers fills them in order, one per slide.

Placeholder cards hold the layout while the products load, so the page does not jump. In a Collection list, they also give search engines real content. Where nothing fills them, they stay as designed. More in smootify-product[data-id="loader"].

Before you publish