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

Customer Address Form

Customer Address Form

Component
Sub-module

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
Target elements
Can be placed anywhere in the site
No items found.
Attribute Name
Attribute Value
True or 1
Nesting Rule
Can be placed anywhere in the site
No items found.
Customer Address Form

Customer Address forms are used for editing the existing addresses or the creation of the new addresses for customers.

Webflow app usage

  1. Click anywhere in the Webflow designer
  2. In the Shopyflow app; click Add new
  3. Select New Address Form
  4. Paste New Address Form component

Webflow app settings

Component contents

Available methods

Customer Address Form Container

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

Contains the customer address form elements. Customer Address Form Container is a Div Block with the sf-address-form attribute. Customer Address Form component can be used to both create new and update existing addresses. To specify the function new or update can be used as attribute values.

Contains the customer address form elements. Customer Address Form Container is a Div Block with the sf-address-form attribute. Customer Address Form component can be used to both create new and update existing addresses. To specify the function new or update can be used as attribute values.

Read more →

Address to update

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

Selects the address to be updated by submitting the Customer Address Form. Address to update is a Select Input element with the sf-address-select attribute.

The options of the Address to update are dynamically populated with the saved addresses for the logged in user on the page load.

Selects the address to be updated by submitting the Customer Address Form. Address to update is a Select Input element with the sf-address-select attribute.

The options of the Address to update are dynamically populated with the saved addresses for the logged in user on the page load.

Read more →

First Name Field

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

Captures the first name information for the updated or the newly created address. First Name Field is a Text Field with the sf-firstname attribute

Captures the first name information for the updated or the newly created address. First Name Field is a Text Field with the sf-firstname attribute

Read more →

Last Name Field

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

Captures the last name information for the updated or the newly created address. Last Name Field is a Text Field with the sf-lastname attribute

Captures the last name information for the updated or the newly created address. Last Name Field is a Text Field with the sf-lastname attribute

Read more →

Company Field

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

Captures the company name information for the updated or the newly created address. Company Field is a Text Field with the sf-company attribute

Captures the company name information for the updated or the newly created address. Company Field is a Text Field with the sf-company attribute

Read more →

Street Address Field

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

Captures the street address line 1 information for the updated or the newly created address. Street Address Field is a Text Field with the sf-address1 attribute

Captures the street address line 1 information for the updated or the newly created address. Street Address Field is a Text Field with the sf-address1 attribute

Read more →

Street Address2 Field

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

Captures the street address line 2 information for the updated or the newly created address. Street Address Field2 is a Text Field with the sf-address2 attribute

Captures the street address line 2 information for the updated or the newly created address. Street Address Field2 is a Text Field with the sf-address2 attribute

Read more →

ZIP Code Field

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

Captures the ZIP code information for the updated or the newly created address. ZIP Code Field is a Text Field with the sf-zip attribute

Captures the ZIP code information for the updated or the newly created address. ZIP Code Field is a Text Field with the sf-zip attribute

Read more →

City Field

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

Captures the city information for the updated or the newly created address. City Field is a Text Field with the sf-city attribute

Captures the city information for the updated or the newly created address. City Field is a Text Field with the sf-city attribute

Read more →

Province Field

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

Captures the province information for the updated or the newly created address. Province Field is a Text Field with the sf-province attribute

Captures the province information for the updated or the newly created address. Province Field is a Text Field with the sf-province attribute

Read more →

Set Default Address Field

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

Captures the choice of the user whether to set the updated or the newly created address as default address or not. Set Default Address Field is a Checkbox field with the sf-set-default attribute

Captures the choice of the user whether to set the updated or the newly created address as default address or not. Set Default Address Field is a Checkbox field with the sf-set-default attribute

Read more →

Address Form Submit Button

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

Submits the Address Form with the set values

Submits the Address Form with the set values

Read more →

Component

contents

Customer Address Form Container

Container
Customer Address creation form container
Attribute Name
sf-address-form
Attribute Value
True or 1
new
update
Nesting Rule
Can be placed anywhere in the site
No items found.
Customer Address Form Container

Contains the customer address form elements. Customer Address Form Container is a Div Block with the sf-address-form attribute. Customer Address Form component can be used to both create new and update existing addresses. To specify the function new or update can be used as attribute values.

Read more →

Webflow app usage

Webflow app settings

Address to update

Form Field
Selector of the address to be updated.
Attribute Name
sf-address-select
Attribute Value
True or 1
Nesting Rule
Can be placed anywhere in the site
Customer Address Form Container
>
Address to update

Selects the address to be updated by submitting the Customer Address Form. Address to update is a Select Input element with the sf-address-select attribute.

The options of the Address to update are dynamically populated with the saved addresses for the logged in user on the page load.

Read more →

Webflow app usage

Webflow app settings

First Name Field

Form Field
Customer first name capturing field
Attribute Name
sf-firstname
Attribute Value
True or 1
Nesting Rule
Can be placed anywhere in the site
Customer Address Form Container
>
First Name Field

Captures the first name information for the updated or the newly created address. First Name Field is a Text Field with the sf-firstname attribute

Read more →

Webflow app usage

Webflow app settings

Last Name Field

Form Field
Customer Last Name collecting field
Attribute Name
sf-lastname
Attribute Value
True or 1
Nesting Rule
Can be placed anywhere in the site
Customer Address Form Container
>
Last Name Field

Captures the last name information for the updated or the newly created address. Last Name Field is a Text Field with the sf-lastname attribute

Read more →

Webflow app usage

Webflow app settings

Company Field

Form Field
Customer company name collecting field
Attribute Name
sf-company
Attribute Value
True or 1
Nesting Rule
Can be placed anywhere in the site
Customer Address Form Container
>
Company Field

Captures the company name information for the updated or the newly created address. Company Field is a Text Field with the sf-company attribute

Read more →

Webflow app usage

Webflow app settings

Street Address Field

Form Field
Customer street address1 collecting field
Attribute Name
sf-address1
Attribute Value
True or 1
Nesting Rule
Can be placed anywhere in the site
Customer Address Form Container
>
Street Address Field

Captures the street address line 1 information for the updated or the newly created address. Street Address Field is a Text Field with the sf-address1 attribute

Read more →

Webflow app usage

Webflow app settings

Street Address2 Field

Form Field
Customer street address2 collecting field
Attribute Name
sf-address2
Attribute Value
True or 1
Nesting Rule
Can be placed anywhere in the site
Customer Address Form Container
>
Street Address2 Field

Captures the street address line 2 information for the updated or the newly created address. Street Address Field2 is a Text Field with the sf-address2 attribute

Read more →

Webflow app usage

Webflow app settings

ZIP Code Field

Form Field
Customer ZIP Code collecting field
Attribute Name
sf-zip
Attribute Value
True or 1
Nesting Rule
Can be placed anywhere in the site
Customer Address Form Container
>
ZIP Code Field

Captures the ZIP code information for the updated or the newly created address. ZIP Code Field is a Text Field with the sf-zip attribute

Read more →

Webflow app usage

Webflow app settings

City Field

Form Field
Customer City collecting field
Attribute Name
sf-city
Attribute Value
True or 1
Nesting Rule
Can be placed anywhere in the site
Customer Address Form Container
>
City Field

Captures the city information for the updated or the newly created address. City Field is a Text Field with the sf-city attribute

Read more →

Webflow app usage

Webflow app settings

Province Field

Form Field
Customer Province collecting field
Attribute Name
sf-province
Attribute Value
True or 1
Nesting Rule
Can be placed anywhere in the site
Customer Address Form Container
>
Province Field

Captures the province information for the updated or the newly created address. Province Field is a Text Field with the sf-province attribute

Read more →

Webflow app usage

Webflow app settings

Set Default Address Field

Form Field
Set the new address as the default.
Attribute Name
sf-set-default
Attribute Value
True or 1
Nesting Rule
Can be placed anywhere in the site
Customer Address Form Container
>
Set Default Address Field

Captures the choice of the user whether to set the updated or the newly created address as default address or not. Set Default Address Field is a Checkbox field with the sf-set-default attribute

Read more →

Webflow app usage

Webflow app settings

Address Form Submit Button

Action
Form submit button
Attribute Name
sf-submit
Attribute Value
True or 1
Nesting Rule
Can be placed anywhere in the site
Customer Address Form Container
>
Address Form Submit Button

Submits the Address Form with the set values

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.