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
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.
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:
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:
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
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
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
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)
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
Media Slider
This is a slider that contains all the media of the product (including video and 3d models)
3d Models
This is a 3d model viewer component that will show the 3d models associated to the current product
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:
Product Description
You can mark any richtext element to be replaced with the product description just using the following custom attribute:
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:
Product Url
You can mark any link element to be dynamically replaced with the product url just using the following custom attribute:
Vendor Url
You can mark any link element to be dynamically replaced with the vendor url just using the following custom attribute:
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:
by default the image select is the second one, you can change it by adding an additional Custom Attribute
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 Sku
You can mark any text element to be dynamically replaced with the current variation sku just using the following custom attribute:
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 Discounted Amount
You can mark any text element to be dynamically replaced with the current variation discounted amount just using the following custom attribute:
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:
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:
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
Height
Height can be any number within 0 and 5700
Crop
Crop can have any of these values: center, top, bottom, left, right
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 #)