Product ID
Div Block
Shopyflow Component
class-name
Attribute Value
sf-attribute
sf-attribute
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Sub Product
Sub-product identifying container.
Attribute Name
sf-product + sf-sub-product
Attribute Value
True or 1
1 or True
required
Product Container
Product identifying container
Attribute Name
sf-product
Attribute Value
True or 1
{Shopify Product ID}
Add to Cart Button
Add to cart button
Attribute Name
sf-add-to-cart
Attribute Value
True or 1
Option Selector(Select input)
Variant option selector input.
Attribute Name
sf-change-option
Attribute Value
True or 1
{Variant Option Name}
Custom Option Wrapper
Variant option selector container.
Attribute Name
sf-change-option
Attribute Value
True or 1
{Variant Option Name}
Custom Option Value
Variant option selector button.
Attribute Name
sf-option-value
Attribute Value
True or 1
{Option Value}
Option Displayer
Selected variant option displayer for the specified option group.
Attribute Name
sf-show-option
Attribute Value
True or 1
{Variant Option Name}
Options Displayer
Selected variant options combination displayer.
Attribute Name
sf-show-options
Attribute Value
True or 1
Quantity Changer (Input)
Quantity changer input
Attribute Name
sf-change-quantity
Attribute Value
True or 1
Quantity Increaser
Quantity increaser button
Attribute Name
sf-change-quantity-inc
Attribute Value
True or 1
Quantity Decreaser
Quantity decreaser button
Attribute Name
sf-change-quantity-dec
Attribute Value
True or 1
Quantity Displayer
Selected quantity displayer
Attribute Name
sf-show-quantity
Attribute Value
True or 1
Product Image
Dynamic Product Image displayer.
Attribute Name
sf-show-image
Attribute Value
True or 1
Thumbnails
Clickable product Image changing thumnails.
Attribute Name
sf-change-image
Attribute Value
True or 1
Price
Dynamic price displayer
Attribute Name
sf-show-price
Attribute Value
True or 1
True or 1
with-quantity
with-sub-product
all
Compare Price
Dynamic compare price displayer
Attribute Name
sf-show-compare-price
Attribute Value
True or 1
True or 1
with-quantity
with-sub-product
all
SKU
Dynamic SKU displayer
Attribute Name
sf-show-sku
Attribute Value
True or 1
Vendor
Vendor displayer
Attribute Name
sf-show-vendor
Attribute Value
True or 1
Stock
Dynamic Stock Displayer
Attribute Name
sf-show-stock
Attribute Value
True or 1
Product Title
Product Title Displayer
Attribute Name
sf-show-title
Attribute Value
True or 1
Product Note Input
Product note changer input
Attribute Name
sf-change-product-note
Attribute Value
True or 1
Note Title
1
True
Product Description
Product description displayer
Attribute Name
sf-show-desc
Attribute Value
True or 1
Unavailable variant option state
Customise the unavailable state of Custom Option Value
Attribute Name
sf-option-unavailable
Attribute Value
True or 1
Active Variant Option State
How to customise the selected state of Custom Option Value
Attribute Name
sf-active
Attribute Value
True or 1
Out of stock state
Customise the out of stock state of the Add to Cart Button
Attribute Name
sf-out-of-stock
Attribute Value
True or 1
Stock exceeded state
Customise the exceeding stock state of the Add to Cart Button
Attribute Name
sf-stock-exceeded
Attribute Value
True or 1
Sub Product Added State
Customise the Sub-product components look when it’s staged.
Attribute Name
sf-sub-product-added
Attribute Value
True or 1
Async visibility
Hide the component until Shopyflow finishes loading.
Attribute Name
sf-await
Attribute Value
True or 1
Active Thumbnail state
Customise the look of the active Thumbnail
Attribute Name
sf-active-thumbnail
Attribute Value
True or 1
Sale Value
Displays the sale value of the current variant. Sale value is a Text Block with the sf-sale-value attribute.
Attribute Name
sf-sale-value
Attribute Value
True or 1
percentage
amount
Sale Tag
Displays the sale tag of the current variant. Sale value is a container element with the sf-show-sale attribute.
Attribute Name
sf-show-sale
Attribute Value
True or 1
1
true
Product Type
Dynamic Product Type Displayer
Attribute Name
sf-show-product-type
Attribute Value
True or 1
Loading state
Customise the loading state of the Add to Cart Button
Attribute Name
sf-loading
Attribute Value
True or 1
Active Filter Value State
How to customise the selected state of Filter Value
Attribute Name
sf-active
Attribute Value
True or 1
Product Metafield Displayer
Product metafield displayer
Attribute Name
sf-show-metafield
Attribute Value
True or 1
{Product Metafield Key}
Metafield Wrapper
Metafield wrapper
Attribute Name
sf-metafield-wrapper
Attribute Value
True or 1
Metafield Namespace Changer
Metafield namespace changer for the metafield displayer element
Attribute Name
sf-change-metafield-namespace
Attribute Value
True or 1
{Namespace}
Product Search Input
Product name collecting input
Attribute Name
sf-search-input
Attribute Value
True or 1
Thumbnail Wrapper
Wrapper element for thumnails
Attribute Name
sf-thumbnail-wrapper
Attribute Value
True or 1
Barcode
Dynamic barcode displayer
Attribute Name
sf-show-barcode
Attribute Value
True or 1
Filter Unavailable State
How to customise the unavailable state of the Filter Value and the parent Filter Group
Attribute Name
sf-filter-unavailable
Attribute Value
True or 1
Price Range: Min Price
Dynamic minimum variant price displayer
Attribute Name
sf-show-min-price
Attribute Value
True or 1
True or 1
Price Range: Max Price
Dynamic maximum variant price displayer
Attribute Name
sf-show-max-price
Attribute Value
True or 1
True or 1
Price Range: Min Compare Price
Dynamic minimum variant price displayer
Attribute Name
sf-show-min-compare-price
Attribute Value
True or 1
True or 1
Price Range: Max Compare Price
Dynamic maximum variant price displayer
Attribute Name
sf-show-max-compare-price
Attribute Value
True or 1
True or 1
Unit Price
Product unit price displayer.
Attribute Name
sf-show-unit-price
Attribute Value
True or 1
