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.

Variant Option Selector

Attribute Name
sf-change-option
Attribute Value
{Option Name}
Nesting Rule
>
sf-change-option
Webflow designer
Custom Attributes
sf-change-option="{Option Name}"
Custom Attributes
sf-change-quantity="1"
Custom Attributes
sf-add-to-cart="1"

To create a Variant Option Selector we use a native Webflow Select field.

  • Add a native Webflow Select element into your Product Container. To do so you will have to include a wholeForm Block with a single Select in it.
  • Give it the sf-option-changer attribute with the {Option Name} as value.

Once the attribute is set right, there is no need for adding the options into the Selectelement manually. Select input is populated by Shopyflow on page load automatically with the information from your Shopify Product Settings.

{Option Name}

Option Name represents the different group of variations available for a specific product. Such as Color, Size, Material etc.

You can locate the available options for your product in your Shopify Product Settings page.

Webflow designer

You can locate all the available Options for any of your products in your Shopyflow Dashboard.

  • Login to Shopyflow.
  • In the Stores screen find the Shopify Store and click the Build button.
  • In the next screen select the product from the list.
  • Scroll down to the Standard Option Selector. Depending on your preference you copy the Option Name or the Select input with the attributes on it
How to create a Standard Option Selector