Attributes

The attributes Smootify fills in an element, and their values.

v2.0 beta

Put an attribute on a Webflow element inside the right Smootify element, and Smootify writes the value into it. A value Smootify does not know leaves the element as designed, empty: nothing warns.

Group	Attribute name	Works inside
Product	`product`	`smootify-product`, `smootify-variant`, `box-item`
Gallery parts	`gallery`	`smootify-product [product="gallery"]`
Selected variant	`variant`	`smootify-product`, `smootify-variant`, `box-item`
Bundle component	`component`	`[variant="components"]`
Variant swatch	`swatch`	`smootify-variant [variant="swatch1"]`, `smootify-variant [variant="swatch2"]`, `smootify-variant [variant="swatch3"]`
Option buttons	`option`	`variant-swatches`, `variant-dropdown`, `variant-popover`, `addon-swatches`, `smootify-product [product="option-values"]`
Each value	`option`	`smootify-product`
Selected value	`selected-option`	`variant-swatches`, `variant-dropdown`, `variant-popover`, `variant-selector`
Add to cart	`bundle`	`smootify-add-to-cart`
Quantity	`data-action`	`quantity-input`
Price	`data-prop`	`smootify-price`
Selling plans	`subscription-group`	`subscription-swatches`
Cart	`cart`	`smootify-cart`
Discount	`discount`	`smootify-cart [cart="discount"]`, `cart-item [cart-item="discount"]`
Gift card	`gift-card`	`smootify-cart [cart="gift-card"]`
Cart form and buttons	`data-name`	`smootify-cart`
Cart line	`cart-item`	`cart-item`
Line option	`option`	`cart-item [cart-item="options"]`, `line-item [line-item="option"]`
Bundle line	`bundle-item`	`bundle-item`
Box item	`box-item`	`box-item`
Image size	`max-width`	`smootify-product`, `smootify-variant`, `cart-item`, `bundle-item`, `box-item`, `smootify-metaobject`
Loading	`skeleton`	`smootify-product`, `smootify-variant`, `smootify-cart`, `customer-orders`, `order-page`, `store-credit`, `subscription-swatches`, `smootify-metaobjects`, `smootify-price`, `smootify-metaobject`, `smootify-search-discovery`, `smootify-search-page`, `customer-subscriptions`, `subscription-page`
When the value is missing	`data-fallback`	anywhere
Form field	`data-required`	anywhere
Form values in the page	`form-value`	`smootify-product`
Product metafield	`metafield`	`smootify-product`, `cart-item`
Reference parts	`reference`	`[metafield]`, `[variant-metafield]`, `[metaobject]`, `[customer-metafield]`, `[company-metafield]`
Variant metafield	`variant-metafield`	`smootify-product`, `smootify-variant`
Option metafield	`option-metafield`	`variant-swatches`, `variant-dropdown`, `variant-popover`, `addon-swatches`, `smootify-product [product="option-values"]`
Metaobject field	`metaobject`	`smootify-metaobject`, `[metafield]`, `[variant-metafield]`, `[customer-metafield]`, `[company-metafield]`
Metaobject list	`data-action`	`smootify-metaobjects`
Metaobject form buttons	`data-action`	`metaobject-creator`, `metaobject-editor`
Quantities of a metaobject’s products	`metaobject-quantity`	`smootify-product[data-requested]`, `smootify-product[data-fulfilled]`
Customer	`customer`	anywhere
Customer metafield	`customer-metafield`	anywhere
Order	`order`	`customer-order`, `order-page`
Account list pages	`data-action`	`customer-orders`, `customer-subscriptions`
Order line	`line-item`	`line-item`
Subscription line	`line-item`	`subscription-line-item`
Fulfillment	`fulfillment`	`order-fulfillment`
Subscription	`subscription`	`customer-subscription`, `subscription-page`
Address	`address`	`customer-addresses customer-address`
Store credit	`store-credit`	`store-credit`
Search and filters	`filter`	`smootify-search-discovery`
Price filter	`filter-price`	`filter-price`
Filter swatch	`swatch`	`filter-swatches`
Search page	`search`	`smootify-search-page`
Predictive search	`search`	`smootify-search`
Wishlist	`wishlist`	anywhere
Shop policy	`policy`	anywhere
Store	`location`	`store-locator store-location`, `store-locator store-popup`
Booking	`booking`	`booking-calendar`
Booking days	`data-action`	`booking-calendar`
Booking form fields	`name`	`booking-form`
Pickup location	`location`	`store-availability store-location`, `store-availability`
Country switcher	`data-prop`	`country-switcher`
Market suggestion	`market-dialog`	`[data-is="market-dialog"]`
Location switcher	`location`	`location-switcher`
Free shipping bar	`data-prop`	`free-shipping-bar`
Cart countdown	`data-prop`	`urgent-cart-countdown`
Magic box	`data-prop`	`smootify-magic-box-cart`
Cookie consent	`data-action`	`smootify-consent`
File upload	`upload`	`file-uploader`, `file-input`, `configurator-file-input`
Toasts	`toast`	`smootify-toasts`
Toast content	`toast-item`	`smootify-toasts [toast]`
Toast buttons	`data-action`	`smootify-toasts [toast]`
Off-canvas panel	`data-action`	anywhere