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

Quantity Changer

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

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 Module

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

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

Order Payment Status

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

Order Detail Module

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

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