Docs

Installation

Shopyflow installation takes place in 2 simple steps.

  1. Configuring Shopify
  2. Connecting to Webflow

Configure Shopify

Shopyflow requires a Storefront API access token to securely connect your Shopify Store to your Webflow site. To generate your Store API access token;

  1. Head to your Shopify Admin > Settings > Apps and Sales Channels section and click Develop apps link..

What’s a Rich Text element? What’s a Rich Text What’s a Rich Text element? What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

What’s a Rich Text element? What’s a Rich What’s a Rich Text element? What’s a Rich Text ejklkjököbömnlement?What’s a Rich Text element? What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Shopyflow requires a Storefront API access token to securely connect your Shopify Store to your Webflow site. To generate your Store API access token;

1. Head to your Shopify Admin > Settings > Apps and Sales Channels section and click Develop apps link.

What’s a Rich Text element? What’s a Rich What’s a Rich Text element? What’s a  element?What’s a Rich Text element? What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Free ON WEBFLOW.IO DOMAINS

Order Detail Item

Order Detail Item

Component
Container
Order detail item container for a single Order Item

Shopify Storefront data and cart logic is bound to your Webflow elements through Shopyflow attributes. Connecting your Webflow site to Shopify is done by adding custom attributes to your Webflow elements.

Yet, you are not required to type or edit attributes manually. Shopyflow provides you with the pre-configured components needed to create your store, as copyable Webflow elements right in Webflow designer.

All the copyable Shopyflow Components are native editable Webflow elements. There is no layout or styling limitation on any element.

In the below image hover your mouse on the hotspots to see all the required Shopyflow attributes to build a product page like this in Webflow

Webflow designer
Custom Attributes
sf-add-to-cart="1"
Custom Attributes
sf-change-quantity="1"
Custom Attributes
sf-change-option="{Option Name}"
Custom Attributes
sf-cart-count="1"
Custom Attributes
sf-change-option="{Option Name}"
Custom Attributes
sf-product="{Product ID}"
Custom Attributes
sf-show-image="1"
Class name
sf-order-detail
Target elements
Can be placed anywhere in the site
Order Detail List
Attribute Name
sf-order-detail
Attribute Value
True or 1
Nesting Rule
Can be placed anywhere in the site
Order Detail List
>
Order Detail Item

Contains the detailed order information. Order Detail is a Div Block with the attribute sf-order-detail.

Webflow app usage

Webflow app settings

Component contents

Available methods

Order Line Items List

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

Contains the list of the Order Line Items included in the order. Order Line Items List is a Div Block with the sf-order-line-list attribute.

Contains the list of the Order Line Items included in the order. Order Line Items List is a Div Block with the sf-order-line-list attribute.

Read more →

Order Detail No

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

Displays the order number assigned by Shopify. Order No is a Text Block with the sf-order-no attribute.

Displays the order number assigned by Shopify. Order No is a Text Block with the sf-order-no attribute.

Read more →

Order Detail Date

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

Displays the order date when the order was processed. Order Date is a Text Block with the sf-order-date attribute.

Displays the order date when the order was processed. Order Date is a Text Block with the sf-order-date attribute.

Read more →

Order Total

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

Displays the order subtotal price. Order Subtotal is a Text Block with the sf-order-subtotal attribute.

Displays the order subtotal price. Order Subtotal is a Text Block with the sf-order-subtotal attribute.

Read more →

Order Sub Total

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

Displays the order subtotal price. Order Subtotal is a Text Block with the sf-order-subtotal attribute.

Displays the order subtotal price. Order Subtotal is a Text Block with the sf-order-subtotal attribute.

Read more →

Order Payment Status

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

Displays the payment status of the current Order Item. Order Payment Status is a Text Block with the sf-order-payment-status attribute.

Displays the payment status of the current Order Item. Order Payment Status is a Text Block with the sf-order-payment-status attribute.

Read more →

Order Fulfilment Status

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

Displays the fulfilment status of the current Order Item. Order Fulfilment Status is a Text Block with the sf-order-fulfilment-status attribute.

Displays the fulfilment status of the current Order Item. Order Fulfilment Status is a Text Block with the sf-order-fulfilment-status attribute.

Read more →

Order Customer Address

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

Contains the customer address information used in the current order. Customer Address Item is a Div Block with the attribute sf-address-item. It's possible to specify the address to be displayed by using the attribute values shipping or billing

Contains the customer address information used in the current order. Customer Address Item is a Div Block with the attribute sf-address-item. It's possible to specify the address to be displayed by using the attribute values shipping or billing

Read more →

Component

contents

Order Line Items List

Looping Container
Looping container for order line items.
Attribute Name
sf-order-line-list
Attribute Value
True or 1
1 or True
Nesting Rule
Can be placed anywhere in the site
Order Detail List
>
Order Detail Item
>
Order Line Items List

Contains the list of the Order Line Items included in the order. Order Line Items List is a Div Block with the sf-order-line-list attribute.

Read more →

Webflow app usage

Webflow app settings

Order Detail No

Displayer
Order no displayer
Attribute Name
sf-order-no
Attribute Value
True or 1
Nesting Rule
Can be placed anywhere in the site
Order Detail List
>
Order Detail Item
>
Order Detail No

Displays the order number assigned by Shopify. Order No is a Text Block with the sf-order-no attribute.

Read more →

Webflow app usage

Webflow app settings

Order Detail Date

Displayer
Order date displayer
Attribute Name
sf-order-date
Attribute Value
True or 1
Nesting Rule
Can be placed anywhere in the site
Order Detail List
>
Order Detail Item
>
Order Detail Date

Displays the order date when the order was processed. Order Date is a Text Block with the sf-order-date attribute.

Read more →

Webflow app usage

Webflow app settings

Order Total

Displayer
Order total price displayer.
Attribute Name
sf-order-total
Attribute Value
True or 1
Nesting Rule
Can be placed anywhere in the site
Order Detail List
>
Order Detail Item
>
Order Total

Displays the order subtotal price. Order Subtotal is a Text Block with the sf-order-subtotal attribute.

Read more →

Webflow app usage

Webflow app settings

Order Sub Total

Displayer
Order subtotal price displayer.
Attribute Name
sf-order-subtotal
Attribute Value
True or 1
Nesting Rule
Can be placed anywhere in the site
Order Detail List
>
Order Detail Item
>
Order Sub Total

Displays the order subtotal price. Order Subtotal is a Text Block with the sf-order-subtotal attribute.

Read more →

Webflow app usage

Webflow app settings

Order Payment Status

Displayer
Order payment status displayer
Attribute Name
sf-order-payment-status
Attribute Value
True or 1
Nesting Rule
Can be placed anywhere in the site
Order List
>
Order Item
>
Order Payment Status

Displays the payment status of the current Order Item. Order Payment Status is a Text Block with the sf-order-payment-status attribute.

Read more →

Webflow app usage

Webflow app settings

Order Fulfilment Status

Displayer
Order fulfilment status displayer
Attribute Name
sf-order-fulfilment-status
Attribute Value
True or 1
Nesting Rule
Can be placed anywhere in the site
Order List
>
Order Item
>
Order Fulfilment Status

Displays the fulfilment status of the current Order Item. Order Fulfilment Status is a Text Block with the sf-order-fulfilment-status attribute.

Read more →

Webflow app usage

Webflow app settings

Order Customer Address

Container
Order specific address displayer
Attribute Name
sf-address-item
Attribute Value
True or 1
shipping
billing
Nesting Rule
Can be placed anywhere in the site
Customer Addresses List
>
Order Customer Address

Contains the customer address information used in the current order. Customer Address Item is a Div Block with the attribute sf-address-item. It's possible to specify the address to be displayed by using the attribute values shipping or billing

Read more →

Webflow app usage

Webflow app settings

State management

No items found.

Related Utilities

No items found.
Can't find a solution? Join our Discord server to get an instant reply from our experts and the community.