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

Custom Option Selector

Custom Option Selector

Component
Sub-module
Variant option selector component built with custom buttons.

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.
Custom Option Selector

Custom option selector component enables you to build custom variant option controls for your Buy Module like pills, color swatches or image buttons.

Webflow app usage

  1. Select a Product container in the Webflow designer
  2. In the Shopyflow app; click add new
  3. Select Option Selector.
  4. In the opening dialog select the option group
  5. Click copy component
  6. Select the Product Container again
  7. Paste Option Selector component

Webflow app settings

Option Group

Select the context option group.

Component contents

Available methods

Custom Option Wrapper

Attribute Name
sf-change-option
Attribute Value
True or 1
{Variant Option Name}
Variant option selector container.
Webflow designer
Custom Attributes
sf-change-option="color"
Custom Attributes
sf-add-to-cart="1"

Provides context to the Custom Option Selector component and contains the option values that changes the selected variant option on click. Custom Option Wrapper is a Div Block with the sf-change attribute. The attribute stores the {Variant Option Name} as the attribute value.

{Option Name}

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

Webflow designer

Webflow designer
Custom Attributes
sf-change-option="color"
Custom Attributes
sf-add-to-cart="1"

Provides context to the Custom Option Selector component and contains the option values that changes the selected variant option on click. Custom Option Wrapper is a Div Block with the sf-change attribute. The attribute stores the {Variant Option Name} as the attribute value.

{Option Name}

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

Webflow designer

Read more →

Custom Option Value

Attribute Name
sf-option-value
Attribute Value
True or 1
{Option Value}
Variant option selector button.
Webflow designer

Changes the option value of the context variant on click. Custom option value is a Div Block with the sf-option-value attribute. The attribute stores the {Option Value} as the attribute value.

{Option Value}

It represents the different variations available in a group of options for a product. Such as Black, White, Yellow as Color Options etc.

Webflow designer

Webflow designer

Changes the option value of the context variant on click. Custom option value is a Div Block with the sf-option-value attribute. The attribute stores the {Option Value} as the attribute value.

{Option Value}

It represents the different variations available in a group of options for a product. Such as Black, White, Yellow as Color Options etc.

Webflow designer

Read more →

Component

contents

Custom Option Wrapper

Container
Variant option selector container.
Attribute Name
sf-change-option
Attribute Value
True or 1
{Variant Option Name}
Nesting Rule
Can be placed anywhere in the site
Product Container
>
Custom Option Wrapper
Webflow designer
Custom Attributes
sf-change-option="color"
Custom Attributes
sf-add-to-cart="1"

Provides context to the Custom Option Selector component and contains the option values that changes the selected variant option on click. Custom Option Wrapper is a Div Block with the sf-change attribute. The attribute stores the {Variant Option Name} as the attribute value.

{Option Name}

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

Webflow designer

Read more →

Webflow app usage

  1. Select a Product container in the Webflow designer
  2. Open the Shopyflow app and click add new
  3. Select Option Selector
  4. In the opening dialog select the option group
  5. Click copy component
  6. Select the Product Container again
  7. Paste Option Selector component

Webflow app settings

Option Name

Select the variant option group to be changed.

Custom Option Value

Changer
Variant option selector button.
Attribute Name
sf-option-value
Attribute Value
True or 1
{Option Value}
Nesting Rule
Can be placed anywhere in the site
Custom Option Wrapper
>
Custom Option Value
Webflow designer

Changes the option value of the context variant on click. Custom option value is a Div Block with the sf-option-value attribute. The attribute stores the {Option Value} as the attribute value.

{Option Value}

It represents the different variations available in a group of options for a product. Such as Black, White, Yellow as Color Options etc.

Webflow designer

Read more →

Webflow app usage

  1. Select a Custom Option Wrapper in the Webflow designer
  2. Open the Shopyflow app and click Add new
  3. Select Custom Option Value.
  4. In the opening dialog select the option group
  5. Click copy component
  6. Select the Custom Option Wrapper again
  7. Paste Custom Option Value component

Webflow app settings

Option Value

Select the option value to be set for the selected option group on click.

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.