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

Product Image Gallery

Attribute Name
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

Cart Module

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

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