Skip to content
Smootify Logo
Design your Product

Product Elements

Inside the product wrapper you can add several elements that help you dynamicize your card. You can add naturally static elements that are connected directly to the CMS of Webflow and you should do that for SEO and design purposes. Let’s see all elements you can add inside the Product Wrapper!

Price

This is the price of the product, is dynamically fetched from Shopify storefront api and automatically changes when you change up the variant

Product Price

Copy Webflow element

Add to Cart

The add to cart element comes out with preconfigured variant options both as button swatches or selects.

Shopify allows you to add up to 3 variant options.

Add to Cart

Copy Webflow element

The add to cart comes preconfigured with 1 button swatches and 2 selects, naturally you can mix selects or button swatches for all the 3 options according to the style you need.

Remember just to design all 3 options and change up respectively the attributes to:

data-option
1
data-option
2
data-option
3

Based up on the type of your effective product only the available selectors will show up, so always add 3 option selectors (unless you know for sure that you will never use 3 variant options).

Selected value

Inside Variant Swatches and Variant Selector Dom Element you can add a text element to show up the current selected value name (usefull if your design uses images swatches without labels).

Just add a text element with the following attribute:

selected-option
title

Subscription Swatches

Inside the Add to cart form element you can also add the subscription swatches if you want to support subscriptions inside your theme.

Subscription Swatches are made up with native Webflow tabs.

The first tab of the element is the tab that shows up when the customers wants to buy without subscription (it will not show up if you set the product to be purchasable only and exclusively in subscription).

The second tab will get duplicated once for each subscription group that is purchasable for the selected variant.

Inside the tab you will see a native Webflow radio input that allows your customer to select a subscription from the subscription group

Subscription Swatches

Copy Webflow element

Custom Properties

Shopify supports custom properties for your add to cart buttons. For example a text input for engraving a bracelet. Since the Smootify Add to Cart is a native Webflow form, you can add any custom input you wish to the form and it will automatically be set as property for your Product.

If you want to hide your custom property from the Cart/Mini Cart element, set the name of the input with a starting lower dash character.

E.g: _custom_width

Shop Pay button

You can add a direct Shop Pay checkout button, will directly checkout the current product with Shop pay

Shop Pay Button

Copy Webflow element

Stock Quantity

This element is a dynamic text that changes up based on the selected variant and automatically shows up how many items are left in stock

Stock Quantity

Copy Webflow element

Images Slider

This is a slider that contains all the images of the product (you can show up only current variant images following up the JS configuration)

Images Slider

Copy Webflow element

This is an element that will show up all the images of that contains all the images of the product (you can show up only current variant images following up the JS configuration)

You can use it in combination with the Images slider, it will act as a controller for the slides

Lightbox Thumbnails

Copy Webflow element

Media Slider

This is a slider that contains all the media of the product (including video and 3d models)

Media Slider

Copy Webflow element

3d Models

This is a 3d model viewer component that will show the 3d models associated to the current product

3d Models

Copy Webflow element

Conditional Visibility

You can show/hide native elements based on current variation configuration just by adding some custom attributes!

In Stock

To show up an element only when the selected variant is in stock you just have to use the following custom attribute:

condition
in-stock

Out of Stock

To show up an element only when the selected variant is out of stock you just have to use the following custom attribute:

condition
out-of-stock

Last in Stock

To show up an element only when the selected variant has only one item left in stock you just have to use the following custom attribute:

condition
last-in-stock

Low Stock

To show up an element only when the selected variant has only have less than 5 items in stock you just have to use the following custom attribute:

condition
low-stock

On sales

To show up an element only when the selected variant is on sale you just have to use the following custom attribute:

condition
on-sale

Disabled

To show up an element only when the selected variant cannot be purchased you just have to use the following custom attribute:

condition
disabled

Subscription

To show up an element only when the selected variant is a subscription you just have to use the following custom attribute:

condition
subscription

Not a subscription

To show up an element only when the selected variant is not a subscription you just have to use the following custom attribute:

condition
no-subscription

Dynamic Attributes

For upsells products or dynamic products fetched up directly from Shopify and not using Webflow CMS (like in Search & Discovery App, or Related and Complementary Products), you can use attributes to add a bit of dynamicity to static webflow elements. You can naturally use all the previous elements as well.

Product Title

You can mark any kind of text element to be replaced with the product title just using the to use the following custom attribute:

product
title

Product Title

You can mark any kind of text element to be replaced with the product title just using the following custom attribute:

product
title

Product Description

You can mark any richtext element to be replaced with the product description just using the following custom attribute:

product
description

Product Url

You can mark any link element to be dynamically replaced with the product url just using the following custom attribute:

product
url

Vendor Url

You can mark any link element to be dynamically replaced with the vendor url just using the following custom attribute:

product
vendor

Product Specific Image

You can mark any image element (or a div with background) to be dynamically replaced with a specific product image just using the following custom attribute:

product
specific-image

by default the image select is the second one, you can change it by adding an additional Custom Attribute

index
1

Not that arrays in any programming language do start at 0. So 1 is the second image.

Variation Image

You can mark any image element (or a div with background) to be dynamically replaced with the current variation image just using the following custom attribute:

variation
image

Variation Sku

You can mark any text element to be dynamically replaced with the current variation sku just using the following custom attribute:

variation
sku

Variation Discount Percentage

You can mark any text element to be dynamically replaced with the current variation discount percentage just using the following custom attribute:

variation
discount-percentage

Dynamic Image Size

Shopify CDN supports dynamic image creation and compression. You can leverage this feature for dynamic images using Smootify as well! (For dynamic images is intended images not connected to the Webflow CMS but fetched using attributes like the variation image, the specific image and the product images).

You can use 4 attributes to control the image CDN properties:

Width

Width can be any number within 0 and 5700

max-width
5700

Height

Height can be any number within 0 and 5700

max-height
5700

Crop

Crop can have any of these values: center, top, bottom, left, right

crop
center

Padding Color

The padding color, is a background color that is added to the image if the original size is lower than the request size. The color must be expressed as hex value (without the #)

padding-color
ffffff