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