Product Elements

Inside the product wrapper you can add several dynamic elements to empower your static design with Shopify datas and functionalities.

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. You must use this element if you want dynamic price that changes up with currency changes

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

Product Video

This is a video player connected to the first product video of the product

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 First Collection

You can mark any text element to be replaced with the product first collection name (and url if you apply it on a link element) just using the following custom attribute:

Name

product

Value

first-collection

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!

Variation Discounted Amount

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

Name

product

Value

discounted-amount

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

Tag visibility

If you want to show elements based on the tags of your product you can use the attribute

Name

tagged

Value

My tag

Note that tags are case sensitive, and you can check by multiple tags by diving them by comma, e.g:

Name

tagged

Value

My tag 1,My tag 2

By default the check is done by checking that ALL tags are present. If you want instead to show the element if ANY of the tag is present, also add the custom attribute

Name

any

Value

true

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