Docs
Docs Home
Shopyflow Components
Try Shopyflow
Quickstart Guide
Start here
Shopyflow Demo Project
Starter Themes
Relume Starter Theme
Client-first Starter Theme
Installation
Shopify to CMS Data Sync
CMS Product Page Setup
CMS Product Listing Setup
Migration from Webflow eCommerce
Buy Module
Overview
Displaying Product Information
Variant Option Selector
Subscription Module
Metafields
Related Products
Sub-product
Cart Module
Overview
Cart Items List
Cart Summary
Discount Codes
Cart Note
Store Module
Currency Selector
Product Search
Localization
Javascript API
Methods
Events
Integrations
Install the App
Create account
Free ON WEBFLOW.IO DOMAINS

Shopyflow components

Shopify Storefront API data and cart logic is bound to your Webflow elements through Shopyflow attributes. Any Webflow element that has a Shopyflow attribute is called a Shopyflow Component in the below list you can find all the available Shopyflow components.

When you are using a Shopyflow component from one of our starter themes or the Shopyflow Webflow App, the Shopyflow components are using classes that are prefixed with a double dash "--" such as; --Product Container, --Metafield Displayer.

In this section of the documentation you can find the reference to every single Shopyflow Component.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
ComPONENT REFERENCE

Buy Module

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
ComPONENT REFERENCE

Cart Module

Cart Container

Cart wrapping container.
Attribute Name
sf-cart
Attribute Value
True or 1

Cart Items List

Looping container for Cart Items.
Attribute Name
sf-cart-list
Attribute Value
True or 1

Cart Item

Cart item container.
Attribute Name
sf-cart-item
Attribute Value
True or 1

Cart Item Title

Cart item product title displayer.
Attribute Name
sf-show-title
Attribute Value
True or 1

Cart Item Image

Cart item product image displayer.
Attribute Name
sf-show-image
Attribute Value
True or 1

Cart Item Pre-discount Price

Cart item product pre-discount price displayer.
Attribute Name
sf-show-prediscount-price
Attribute Value
True or 1

Cart Item Variant Option Displayer

Cart item product variant options displayer.
Attribute Name
sf-show-options
Attribute Value
True or 1

Cart Item Total

Cart item product line total price displayer
Attribute Name
sf-show-price
Attribute Value
True or 1

Cart Item Quantity Changer

Cart item quantity changer input.
Attribute Name
sf-change-quantity
Attribute Value
True or 1

Cart Item Remover

Cart item remover button.
Attribute Name
sf-cart-item-remove
Attribute Value
True or 1

Cart Item Unit Price

Cart item product unit price displayer.
Attribute Name
sf-show-unit-price
Attribute Value
True or 1

Cart Item Discount Displayer

Cart item discount displayer element
Attribute Name
sf-show-product-discount-title
Attribute Value
True or 1

Cart Item Discount Code Displayer

Cart Item Discount Code Displayer
Attribute Name
sf-show-discount-code
Attribute Value
True or 1

Cart Subtotal

Cart total displayer
Attribute Name
sf-cart-subtotal
Attribute Value
True or 1

Checkout Button

Checkout Button
Attribute Name
sf-checkout
Attribute Value
True or 1

Cart Discount Code Input

Discount code collecting input.
Attribute Name
sf-change-discount-code
Attribute Value
True or 1

Discount Code Item

Discount code item container.
Attribute Name
sf-discount-code-item
Attribute Value
True or 1

Discount Code List

Iterator wrapper for applied discount code displayers.
Attribute Name
sf-discount-code-list
Attribute Value
True or 1

Discount Code Title

Discount code title displayer.
Attribute Name
sf-show-discount-code
Attribute Value
True or 1

Order Discount Code Amount

Discount code amount displayer.
Attribute Name
sf-show-discount-code-amount
Attribute Value
True or 1

Discount Code Remover

Discount code item remover.
Attribute Name
sf-discount-code-remove
Attribute Value
True or 1
1 or True

Order Discount List

Iterator wrapper for applied product discounts.
Attribute Name
sf-order-discount-list
Attribute Value
True or 1

Order Discount Item

Order discount item container.
Attribute Name
sf-order-discount-item
Attribute Value
True or 1

Order Discount Title

Product discount title displayer.
Attribute Name
sf-show-order-discount-title
Attribute Value
True or 1

Cart Count Displayer

Cart item count displayer.
Attribute Name
sf-cart-count
Attribute Value
True or 1

Order Discount Amount

Order discount item amount displayer.
Attribute Name
sf-show-order-discount-amount
Attribute Value
True or 1

Empty Cart State

Customise the empty state of the cart
Attribute Name
sf-cart-empty
Attribute Value
True or 1

Cart pop-up opened state

Customise the open state of the Cart Popup
Attribute Name
sf-cart-opened
Attribute Value
True or 1

Cart Popup

Dynamic Cart Popup that listens cart events.
Attribute Name
sf-cart-popup
Attribute Value
True or 1

Cart Popup Opener

Turns the Cart Popup visible on click.
Attribute Name
sf-cart-open
Attribute Value
True or 1

Cart Popup Closer

Turns the Cart Popup hidden on click.
Attribute Name
sf-cart-close
Attribute Value
True or 1

Open Cart

Closes the Cart Popup by adding the sf-cart-opened combo class.
Attribute Name
window.Shopyflow.openCart()
Attribute Value
True or 1

Cart Note

Cart note changer input
Attribute Name
sf-cart-note
Attribute Value
True or 1

Cart Tax

Cart tax displayer
Attribute Name
sf-cart-tax
Attribute Value
True or 1

Empty Cart

Empties the content of the cart.
Attribute Name
window.Shopyflow.emptyCart()
Attribute Value
True or 1

Product Note Displayer

Product note displayer
Attribute Name
sf-show-product-note
Attribute Value
True or 1

Cart Item Compare Price

Dynamic compare price displayer for cart item
Attribute Name
sf-show-compare-price
Attribute Value
True or 1
True or 1
ComPONENT REFERENCE

Customer Accounts

Login Form Container

Login form container.
Attribute Name
sf-login-form
Attribute Value
True or 1
1 or True

Logout Link

User log out button.
Attribute Name
sf-logout
Attribute Value
True or 1

Login Email Field

Email collecting field
Attribute Name
sf-email
Attribute Value
True or 1

Login Password Field

Password collecting field
Attribute Name
sf-password
Attribute Value
True or 1

Login Form Submit Button

Form submit button.
Attribute Name
sf-submit
Attribute Value
True or 1

Password Reset Form Opener

Utility button to display password reset form.
Attribute Name
sf-password-forget
Attribute Value
True or 1

Password Reset Form Container

Password reset form container.
Attribute Name
sf-password-reset-form
Attribute Value
True or 1

Password Reset Email Field

Email collecting field
Attribute Name
sf-email
Attribute Value
True or 1

Password Reset Submit Button

Form submit button.
Attribute Name
sf-submit
Attribute Value
True or 1

Forgot Password Form Closer

Utility button to hide Password Reset Form
Attribute Name
sf-cancel
Attribute Value
True or 1

Password Change Password Field

Password collecting field
Attribute Name
sf-password
Attribute Value
True or 1

Confirm Password Field

Password confirmation collecting field
Attribute Name
sf-confirm-password
Attribute Value
True or 1

Password Change Submit Button

Form submit button.
Attribute Name
sf-submit
Attribute Value
True or 1

Customer Address Item

Customer Address Item container
Attribute Name
sf-address-item
Attribute Value
True or 1

Password Change Form Container

Password change form container.
Attribute Name
sf-password-change-form
Attribute Value
True or 1
1 or True

Customer Company

Customer company
Attribute Name
sf-company
Attribute Value
True or 1

Customer Name

Customer name
Attribute Name
sf-name
Attribute Value
True or 1

Customer Addresses List

Iterator container for Customer Address Items.
Attribute Name
sf-address-list
Attribute Value
True or 1
1 or True
default

Customer ZIP Code

Customer ZIP Code
Attribute Name
sf-zip
Attribute Value
True or 1

Customer City

Customer city displayer.
Attribute Name
sf-city
Attribute Value
True or 1

Customer Street Address

Customer street address
Attribute Name
sf-address1
Attribute Value
True or 1

Customer Province

Customer Province
Attribute Name
sf-province
Attribute Value
True or 1

Customer Country

Customer Country
Attribute Name
sf-country
Attribute Value
True or 1

Customer Address Form Container

Customer Address creation form container
Attribute Name
sf-address-form
Attribute Value
True or 1
new
update

Address to update

Selector of the address to be updated.
Attribute Name
sf-address-select
Attribute Value
True or 1

Customer Address Remover

Address remover button
Attribute Name
sf-address-delete
Attribute Value
True or 1

First Name Field

Customer first name capturing field
Attribute Name
sf-firstname
Attribute Value
True or 1

Customer Phone

Customer Phone
Attribute Name
sf-phone
Attribute Value
True or 1

Last Name Field

Customer Last Name collecting field
Attribute Name
sf-lastname
Attribute Value
True or 1

Company Field

Customer company name collecting field
Attribute Name
sf-company
Attribute Value
True or 1

Street Address2 Field

Customer street address2 collecting field
Attribute Name
sf-address2
Attribute Value
True or 1

Street Address Field

Customer street address1 collecting field
Attribute Name
sf-address1
Attribute Value
True or 1

ZIP Code Field

Customer ZIP Code collecting field
Attribute Name
sf-zip
Attribute Value
True or 1

City Field

Customer City collecting field
Attribute Name
sf-city
Attribute Value
True or 1

Province Field

Customer Province collecting field
Attribute Name
sf-province
Attribute Value
True or 1

Phone Field

Customer Phone capturing field
Attribute Name
sf-phone
Attribute Value
True or 1

Set Default Address Field

Set the new address as the default.
Attribute Name
sf-set-default
Attribute Value
True or 1

Address Form Submit Button

Form submit button
Attribute Name
sf-submit
Attribute Value
True or 1

Order List

Iterator wrapper for the order items.
Attribute Name
sf-order-list
Attribute Value
True or 1

Country Field

Customer Country collecting field
Attribute Name
sf-country
Attribute Value
True or 1

Order No

Order no displayer.
Attribute Name
sf-order-no
Attribute Value
True or 1

Order Item

Order item container.
Attribute Name
sf-order-item
Attribute Value
True or 1

Order Date

Order date displayer.
Attribute Name
sf-order-date
Attribute Value
True or 1

Order Fulfilment Status

Order fulfilment status displayer
Attribute Name
sf-order-fulfilment-status
Attribute Value
True or 1

Order Payment Status

Order payment status displayer
Attribute Name
sf-order-payment-status
Attribute Value
True or 1

Order Detail List

Order Detail Item iterator wrapper
Attribute Name
sf-order-detail-wrapper
Attribute Value
True or 1
1 or True

Order Line Item

Order line item container.
Attribute Name
sf-order-line-item
Attribute Value
True or 1

Order Detail Item

Order detail item container for a single Order Item
Attribute Name
sf-order-detail
Attribute Value
True or 1

Order Total

Order total displayer
Attribute Name
sf-order-total
Attribute Value
True or 1

Order Line Item Title

Order line item product title displayer.
Attribute Name
sf-order-product-title
Attribute Value
True or 1

Order Line Item SKU

Order line item product SKU displayer.
Attribute Name
sf-order-sku
Attribute Value
True or 1

Order Line Item Quantity

Order line item quantity displayer
Attribute Name
sf-order-quantity
Attribute Value
True or 1

Order Line Item Total

Cart item product line total price displayer
Attribute Name
sf-order-line-total
Attribute Value
True or 1

Order Detail No

Order no displayer
Attribute Name
sf-order-no
Attribute Value
True or 1

Order Detail Date

Order date displayer
Attribute Name
sf-order-date
Attribute Value
True or 1

Order Sub Total

Order subtotal price displayer.
Attribute Name
sf-order-subtotal
Attribute Value
True or 1

Order Total

Order total price displayer.
Attribute Name
sf-order-total
Attribute Value
True or 1

Order Line Items List

Looping container for order line items.
Attribute Name
sf-order-line-list
Attribute Value
True or 1
1 or True

Order Detail Payment Status

Order payment status displayer
Attribute Name
sf-order-payment-status
Attribute Value
True or 1
1 or True

Order Detail Fulfilment Status

Order fulfilment status displayer
Attribute Name
sf-order-fulfilment-status
Attribute Value
True or 1

Order Customer Address

Order specific address displayer
Attribute Name
sf-address-item
Attribute Value
True or 1
shipping
billing

Signup Form Container

Outer wrapper element for the signup form
Attribute Name
sf-signup-form
Attribute Value
True or 1

Signup Email Field

Email collecting field
Attribute Name
sf-email
Attribute Value
True or 1

Signup Password Field

Password collecting field
Attribute Name
sf-password
Attribute Value
True or 1

Account Activation Form

Activates your Shopify customers' account
Attribute Name
sf-account-activation-form
Attribute Value
True or 1

Account Activation Form Password Field

Password collecting field
Attribute Name
sf-password
Attribute Value
True or 1

Customer Display Name

Customer name displayer
Attribute Name
sf-show-display-name
Attribute Value
True or 1
Can't find a solution? Join our Discord server to get an instant reply from our experts and the community.