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:

Name

data-option

Value

1

Name

data-option

Value

2

Name

data-option

Value

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:

Name

selected-option

Value

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

Caution

Custom properties cannot change up the price of a product. Product price can change only and exclusively based on the variation options.

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

Lightbox images thumbnails

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:

Name

condition

Value

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:

Name

condition

Value

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:

Name

condition

Value

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:

Name

condition

Value

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:

Name

condition

Value

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:

Name

condition

Value

disabled

Subscription

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

Name

condition

Value

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:

Name

condition

Value

no-subscription

Price Varies

To show up an element only when the product has variable pricing (happens with variants that do have different prices) you just have to use the following custom attribute:

Name

condition

Value

variable-price

Fixed Price

To show up an element only when the product has fixed price (happens when variants do all have same price) you just have to use the following custom attribute:

Name

condition

Value

fixed-price

Is Variable

To show up an element only when the product is variable you just have to use the following custom attribute:

Name

condition

Value

is-variable

Is Not Variable

To show up an element only when the product is not variable you just have to use the following custom attribute:

Name

condition

Value

is-not-variable

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 following custom attribute:

Name

product

Value

title

Product Description

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

Name

product

Value

description

Product Url

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

Name

product

Value

url

Caution

If you changed up the Product CMS collection slug, you have to follow the JS configuration to inform Smootify about the correct one!

Vendor Url

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

Name

product

Value

vendor

Caution

If you changed up the Vendor CMS collection slug, you have to follow the JS configuration to inform Smootify about the correct one!

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:

Name

product

Value

specific-image

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

Name

index

Value

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:

Name

variation

Value

image

Variation Sku

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

Name

variation

Value

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:

Name

variation

Value

discount-percentage

Caution

You should use it in combination wit the conditional on sale visibility, this element will show up 0% when the variant is not on sale!

Product Min Price

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

Name

product

Value

min-price

Product Max Price

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

Name

product

Value

max-price

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

Name

max-width

Value

5700

Height

Height can be any number within 0 and 5700

Name

max-height

Value

5700

Crop

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

Name

crop

Value

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 #)

Name

padding-color

Value

ffffff