Docs

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 list below you can find all the available Shopyflow Components.

ComPONENT REFERENCE

Buy Module

Unit Price

Product unit price displayer.
Attribute Name
sf-show-unit-price
Attribute Value
True or 1

Option unavailable state (add to cart button)

Customise the option unavailable state of the Add to Cart Button
Attribute Name
sf-option-unavailable
Attribute Value
True or 1

Out of stock variant option state

Customise the unavailable state of Custom Option Value
Attribute Name
sf-out-of-stock
Attribute Value
True or 1

File Uploader

File upload module for product customization
Attribute Name
sf-file-uploader
Attribute Value
True or 1

Drop Zone

Drag and drop area for file uploads
Attribute Name
sf-drop-zone
Attribute Value
True or 1

Cart Module

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

Product Listing Module

Product List Container

Product listing module wrapping element.
Attribute Name
sf-collection
Attribute Value
True or 1

Taxonomy Filter Wrapper

Taxonomy filters container
Attribute Name
sf-filter
Attribute Value
True or 1
collections
product-type
vendor
tag

Taxonomy Filter Value

Filter changing button
Attribute Name
sf-filter-value
Attribute Value
True or 1
{Taxonomy Value}

Product List

The product list that is effected by filter and sort components
Attribute Name
sf-list
Attribute Value
True or 1

Product Listing Module

Attribute Name
Attribute Value
True or 1

Customer Accounts

Login Form

Attribute Name
Attribute Value
True or 1

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

Other Components

Currency Selector Module

Currency switcher as a Webflow Dropdown element.
Attribute Name
Attribute Value
True or 1

Currency Selector

Store currency selector input.
Attribute Name
sf-change-currency
Attribute Value
True or 1

Currency Selector Value

Store currency selector button.
Attribute Name
sf-currency-value
Attribute Value
True or 1
{Currency Value}

Currency Selector Wrapper

Store currency selector container.
Attribute Name
sf-change-currency
Attribute Value
True or 1

Currency Displayer

Store currency displayer
Attribute Name
sf-show-currency-selection
Attribute Value
True or 1