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.

Shopyflow Docs

Installation

Shopyflow installation takes place in 3 simple steps.

  • Installing the Shopify Headless App
  • Connecting to Shopyflow Dashboard
  • Installing the Shopyflow code snippet
How to get your Storefront API key

1. Installing the Shopify Headless App

Shopyflow requires a Storefront API access token to securely connect your Shopify store to your Webflow site. To get that token we will install the Shopify Headless App.

  • Go to the Shopify App Store and install the Shopify Headless App.

    Apps and sales channels screen in Shopify
  • You will be redirected your Shopify Admin. Depending on when you are doing the installation, buttons to click might be slightly different. Click Install or Add sales channel when prompted.

    App development screen in Shopify
  • Click Create storefront.

    Create an app screen in Shopify
  • Your app is installed. Rename your app if needed. Next, let’s configure the API access. Click Manage next to Storefront API.

    App configuration screen in Shopify
  • Storefront API access scopes lets you choose which information and functionalities are available for Shopyflow to access. Scroll down do the scopes and enable ALL THE SCOPES.

    Storefront API access scopes screen in Shopify
  • Once you select the required fields click Save.

  • Scroll to the top. Public access token is the token Shopyflow needs to connect to your Shopify store. We will use it in the next section.

    Storefront API access token field in Shopify

2. Connecting to Shopyflow

Once you have your Storefront API access token in place login to your Shopyflow Dashboard and follow the below steps:

  • Click Add new store.

    Shopyflow Dashboard
  • In the opening dialogue;
    a. Enter a Store Name. The name can be anything.

    Shopyflow Dashboard - add store screen

    b. Enter the Shopify Domain of your store. Shopify Domain is the default url provided by Shopify. Ex. shopyflow-demo.myshopify.com

    How to get Shopify store URL

    c. Finally, copy your newly generated Storefront API access token and paste into the Shopify API Key field.

    Shopyflow Dashboard - add store screen 2

    d.Authorized Webflow Domain is the domain where your Shopyflow Store is going to live. Now click Save and your Shopyflow Store is ready to use.

3. Install the Shopyflow Code Snippet.

Find the newly created store in the Stores. There you will find the Shopyflow Code Snippet required to run your Shopyflow store. 

Shopyflow Dashboard - code snippet

Copy the code and go to the Custom Code section of your Webflow site’s Project Settings. Paste the code into the Head Code (or at the end of the <head> tag).

Your Shopyflow installation is complete and you are ready to build your store!

Buy Module

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

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-cart-count="1"
Custom Attributes
sf-product="{Product ID}"
Custom Attributes
sf-show-image="1"

Above product page has the following components:

  1. An "Add to Cart" button
  2. Detailed Product Information
  3. Variant option selectors to customize the product
  4. Quantity Selector
  5. A Dynamic Price display, 
  6. A dynamic Image Gallery that displays the selected variant image. 

This is the simplest form of a product page you can create using Shopyflow. We call it the Buy Module.

Buy Module is the core building block of Shopyflow. You can have as many Buy Modules as you like in a single page and even nest one inside another and build highly custom shopping experiences.

Shopyflow Template Library

Shopyflow provides you with all the components needed to create your store as copyable Webflow elements in your Shopyflow Dashboard. You can just copy a full product page with all the required attributes, paste into Webflow designer and start styling.

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

Watch below video to see Shopyflow Template Library in action.

Shopyflow Attributes

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

sf-product={Product ID}

Attribute Name
sf-product
Attribute Value
{Product ID}
Nesting Rule
Can be placed anywhere in the site
Webflow designer
Custom Attributes
sf-product="{Product ID}"

Each buy module's wrapper element is assigned the sf-product attribute, with the value set to the {Product ID} of the product intended for cart addition.

{Product Id} Attribute Value

Shopify product ID. You can locate the ID of any of your products in your Shopyflow Dashboard or alternatively navigate to your Shopify Admin and  Products > Your Product. In the Product settings page, the product ID is shown in the url.

sf-add-to-cart

Attribute Name
sf-add-to-cart
Attribute Value
1 or True
Nesting Rule
sf-product
>
sf-add-to-cart
Webflow designer
Custom Attributes
sf-add-to-cart =''1'

Add to cart button. sf-add-to-cart attribute is added to the add to cart button. sf-add-to-cart attribute doesn’t need any value. 

sf-buy-now

Attribute Name
sf-buy-now
Attribute Value
1 or True
Nesting Rule
sf-product
>
sf-add-to-cart
+
sf-buy-now
Webflow designer
Custom Attributes
sf-buy-now =''1'
Custom Attributes
sf-add-to-cart =''1'
Custom Attributes
sf-product =''{Product ID}''

sf-buy-now attribute is added to the add to cart button. It converts the add to cart button into a buy now button. Buy now buttons add products to cart and then directly goes to Shopify's checkout.

sf-change-quantity

Attribute Name
sf-change-quantity
Attribute Value
1 or True
Nesting Rule
sf-product
>
sf-change-quantity

The sf-change-quantity attribute is used to create a product quantity input that enables users to select the desired amount of products they want to add to their shopping cart.

Webflow designer
Custom Attributes
sf-product =''{Product ID}''
Custom Attributes
sf-change-quantity="1"
Custom Attributes
sf-add-to-cart="1"

sf-show-quantity

Attribute Name
sf-show-quantity
Attribute Value
1 or True
Nesting Rule
sf-product
>
sf-show-quantity

When building a custom quantity selector, the sf-show-quantity attribute is used for marking the element that displays the selected quantity.

Show quantity

sf-default-quantity

Attribute Name
sf-default-quantity
Attribute Value
{Quantity Value}
Nesting Rule
sf-product
>
sf-add-to-cart
>
sf-default-quantity
Shopyflow Version
0.0.9

sf-default-quantity attribute can be used on an Add to Cart Button to set the default quantiy of a product.

This comes in especially handy when building bundles with sub-products without using quantity changers. E.g. you can give sf-default-quantity="5" attribute to a sub-product's Add to Cart Button to make your sub-product a bundle of 5 sub-products.

Price formatting is only available in Shopyflow version 0.0.9 and above. If you have an older version, you need to update your Shopyflow code snippet to at least version 0.0.9.

sf-change-quantity-inc

Attribute Name
sf-change-quantity-inc
Attribute Value
1 or True
Nesting Rule
sf-product
>
sf-change-quantity-inc

sf-change-quantity-inc attribute is used to assign a function to a Webflow element for increasing the quantity.

Webflow designer
Custom Attributes
sf-change-quantity-inc="1"
Custom Attributes
sf-change-quantity-dec="1"
Custom Attributes
sf-product =''{Product ID}''
Custom Attributes
sf-change-quantity="1"

sf-change-quantity-dec

Attribute Name
sf-change-quantity-dec
Attribute Value
1 or True
Nesting Rule
sf-product
>
sf-change-quantity-dec

sf-change-quantity-dec attribute is used to assign a function to a Webflow element for decreasing the quantity.

Webflow designer
Custom Attributes
sf-change-quantity-dec="1"
Custom Attributes
sf-product =''{Product ID}''
Custom Attributes
sf-change-quantity="1"
Custom Attributes
sf-change-quantity-inc="1"

sf-change-option={Option Name}

Attribute Name
sf-change-option
Attribute Value
Option Name
Nesting Rule
sf-product
>
sf-change-option

The sf-change-option attribute is used on Select element to create a Variant Option Selector. This attribute's value needs be  {Option Name} of the product that will be changed using the Select element.

Webflow designer
Custom Attributes
sf-product =''{Product ID}''
Custom Attributes
sf-change-option="{Option Name}"
Custom Attributes
sf-change-quantity="1"
Custom Attributes
sf-add-to-cart="1"

{Option Name} Attribute Value

Shopify product option names. eg. "Color", "Size". To locate the {Option Name} for any product navigate to your Shopify Admin and  Products > Your Product and scroll down to Options section. 

Variant options screen in Shopify

or alternatively, go to your Shopyflow Dashboard to see the list of {Option Names} for any product in your Shopify store.

Shopyflow Dashboard - Template Library

Creating custom selectors

Webflow designer
Custom Attributes
sf-add-to-cart="1"
Custom Attributes
sf-option-value={Option Value}
Custom Attributes
sf-option-value={Option Value}
Custom Attributes
sf-change-option="{Option Name}"

sf-change-option attribute can be utilised to design custom option changers, such as toggle pills, color swatches. To accomplish this, the sf-change-option attribute is added to the wrapper div element of a group of elements with a sf-option-value attribute.

sf-option-value={Option Value}

Attribute Name
sf-option-value
Attribute Value
{Option Name}
Nesting Rule
sf-product
>
sf-change-option
>
sf-option-value

sf-option-value attribute is added to the clickable individual option elements. This attribute's value is set to the {Option Value} that will be selected by clicking this element.

Webflow designer
Custom Attributes
sf-product =''{Product ID}''
Custom Attributes
sf-change-quantity="1"
Custom Attributes
sf-add-to-cart="1"
Custom Attributes
sf-option-value={Option Value}
Custom Attributes
sf-option-value={Option Value}
Custom Attributes
sf-option-value={Option Value}
Custom Attributes
sf-change-option="{Option Name}"

{Option Value} Attribute Value

Shopify product option value. eg. "Gold", "Black". To locate the {Option Value} for any product navigate to your Shopify Admin and  Products > Your Product and scroll down to Options section. 

Variant options screen in Shopify

or alternatively, go to your Shopyflow Dashboard to see the list of {Option Values} for any product in your Shopify store.

Shopyflow Dashboard - Template Library

sf-show-option={Option Name}

Attribute Name
sf-show-option
Attribute Value
{Option Name}
Nesting Rule
sf-product
>
sf-show-option

sf-show-option attribute is used on Variant Option Displayer element, inside of the product container. Shopyflow populates this element with the selected option value. For example, let's say we have a color option called "Gold". When this color option is selected, you can show the text "Gold" anywhere in the product container using this attribute.

{Option Name} Attribute Value

Shopify product option names. eg. "Color", "Size". To locate the {Option Name} for any product navigate to your Shopify Admin and  Products > Your Product and scroll down to Options section. 

Variant options screen in Shopify

or alternatively, go to your Shopyflow Dashboard to see the list of {Option Names} for any product in your Shopify store.

Shopyflow Dashboard - Template Library

sf-show-options

Attribute Name
sf-show-options
Attribute Value
1 or true
Nesting Rule
sf-product
>
sf-show-options

sf-show-options attribute is used to display selected variants' options. Shopyflow populates this element with all the selected option values from different option groups (eg. Color, Size) separated with a “/”. E.g. Red / M

sf-show-price

Attribute Name
sf-show-price
Attribute Value
with-quantity
with-sub-product
with-all
Nesting Rule
sf-product
>
sf-show-price

sf-show-price attribute is used to create a product quantity input that enables users to select the desired amount of products they want to add to their shopping cart.

Webflow designer
Custom Attributes
sf-show-price="1"

The sf-show-price attribute takes one of 4 different values listed below.

with-quantity Attribute Value

When sf-show-price attribute is set to with-quantity the displayed price is selected variant price multiplied by the selected quantity

with-sub-product Attribute Value

When sf-show-price attribute is set to with-sub-product the displayed price is selected variant price added with the price of selected sub product's price

all Attribute Value

When sf-show-price attribute is set to all the displayed price is sum of the selected variant price times selected quantity added with the price of selected sub-product's price. In other words total price of the products that will be added to the cart

True or 1 Attribute Value

Default behaviour. When sf-show-price attribute is set to True or 1 the displayed price is the single price of the selected variant of the main product.

Price Formatting

Shopyflow Version
0.0.2

By default Shopyflow displays price values with their exact number of decimals. This means €300.49 is displayed as €300.49 whereas €300 is displayed as €300. However you can change this behaviour by adding price-decimal attribute to your Shopyflow Engine snippet:

<!-- Shopyflow Engine -->
<script defer
sf-token="[STOREFRONT API KEY]"
sf-domain="[SHOPIFY STORE DOMAIN]"
src="https://cdn.shopyflow.io/[VERSION]/shopyflow.js"
price-decimal=2></script>

e.g. if price-decimal is set to 2, €300 will be displayed as €300.00.

Advanced Usage
By default Shopyflow displays the currencies and decimal separators in browser's language format. This is the recommended way as it takes your customer's browser preferences into account. However if you want to change this behaviour, you can use the price-format attribute which supports the ECMAScript Internationalization API.

<!-- Shopyflow Engine -->
<script defer
sf-token="[STOREFRONT API KEY]"
sf-domain="[SHOPIFY STORE DOMAIN]"
src="https://cdn.shopyflow.io/[VERSION]/shopyflow.js"
price-decimal=2
price-format="de-DE"></script>

e.g. if price-format is set to de-DE (German format) €300.00 will be displayed as 300,00 € in which the currency symbol comes after the number and a comma is used to separate decimals.

Price formatting is only available in Shopyflow version 0.0.2 and above. If you have an older version, you need to update your Shopyflow code snippet to at least version 0.0.2.

sf-show-compare-price

Attribute Name
sf-show-compare-price
Attribute Value
1 or true
Nesting Rule
sf-product
>
sf-show-compare-price

The sf-show-compare-price attribute can be used to show the compared at price.

sf-show-image

Attribute Name
sf-show-image
Attribute Value
1 or True
Nesting Rule
sf-product
>
sf-change-quantity

The sf-show-image attribute is used to showcase the selected variant image or gallery image. This attribute may be utilized on either an Image or a Div Block. In the case of the using a Div Block, the product images are rendered as background images.

Whenever the current variant changes, the image is dynamically adjusted. The sf-show-image attribute does not require a value to be set.

Creating image gallery with Webflow carousel

It's easy to make a dynamic image gallery for your Shopify products with Webflow carousel. All you need to do is drag an Image or Div Block with the sf-show-image attribute into a slide item in Webflow.

Shopyflow only needs one slide item that includes the image element as a style reference. It duplicates this item and fill in the remaining product images from your Shopify store. Slide automatically changes to the slide that contains the selected variant image.

sf-change-image

Attribute Name
sf-change-image
Attribute Value
1 or True
Nesting Rule
sf-product
>
Wrapper (No attributes)
>
sf-change-image

sf-change-image attribute is used to create a set of clickable thumbnails out of Shopify product images that change the displayed product image on click.

Shopyflow requires you to create single reference element with sf-change-image attribute and creates the rest of the elements by cloning the reference element.

This attribute may be utilized on either an Image or a Div Block. In the case of the using a Div Block, the product images are rendered as background images.

The image changer element should be wrapped in a Div Block that will containThe

Webflow designer
Custom Attributes
sf-change-image="1"
Custom Attributes
sf-change-image="1"
Custom Attributes
sf-change-image="1"
Custom Attributes
sf-show-image="1"
Custom Attributes
sf-change-quantity="1"

Creating image gallery with Webflow carousel

It's easy to make a dynamic image gallery for your Shopify products with Webflow carousel. All you need to do is drag an Image or Div Block with the sf-show-image attribute into a slide item in Webflow.

Shopyflow only needs one slide item that includes the image element as a style reference. It will automatically duplicate this item and fill in the remaining product images from your Shopify store to create a complete image gallery that changes to the selected variant.

sf-show-title

Attribute Name
sf-show-title
Attribute Value
1 or True
Nesting Rule
sf-product
>
sf-show-title

sf-show-title attribute is added to the Product Title element.

This attribute helps keeping your Product Title in synch with the Product Name set in Shopify product settings. This is important for matching the displayed name of the Product both in the Cart and in Shopify Checkout screen.

Webflow designer
Custom Attributes
sf-product =''{Product ID}''
Custom Attributes
sf-show-title="1"
Custom Attributes
sf-change-option="1"
Custom Attributes
sf-show-price="1"
Custom Attributes
sf-change-quantity="1"
Custom Attributes
sf-add-to-cart="1"

sf-show-desc

Attribute Name
sf-show-desc
Attribute Value
1 or True
Nesting Rule
sf-product
>
sf-show-desc

sf-show-desc attribute is used to display the Product Description text as in Shopify product settings page.

Webflow designer
Custom Attributes
sf-product =''{Product ID}''
Custom Attributes
sf-show-title="1"
Custom Attributes
sf-change-option="1"
Custom Attributes
sf-show-price="1"
Custom Attributes
sf-change-quantity="1"
Custom Attributes
sf-add-to-cart="1"

sf-show-stock

Attribute Name
sf-show-stock
Attribute Value
1 or True
Nesting Rule
sf-product
>
sf-show-stock

sf-show-stockattribute is used to display the Inventory Quantity of the currently selected variant.

sf-show-sku

Attribute Name
sf-show-sku
Attribute Value
1 or True
Nesting Rule
sf-product
>
sf-show-sku

sf-show-skuattribute is used to display the SKU of the currently selected variant.

sf-show-vendor

Attribute Name
sf-show-vendor
Attribute Value
1 or True
Nesting Rule
sf-product
>
sf-show-vendor
Shopyflow Version
0.1.0

sf-show-vendorattribute is used to display the vendor of the current product.

sf-change-product-note

Attribute Name
sf-change-product-note
Attribute Value
{Note Title}
Nesting Rule
sf-product
>
sf-change-product-note
Shopyflow Version
0.0.7

sf-change-product-note can be used to add a custom note to a product when it's added to the cart. The custom note will be visible in Shopify checkout page. As attribute value you can use any name of your choice. It will be displayed in the checkout with the name you picked.

Webflow designer
Custom Attributes
sf-change-product-note="Custom Title"

sf-change-product-note="Custom Title" will appear with the name "Custom Title" followed by the text entered by your customer in the checkout. You can also leave the value as 1 or true. In that case the default title "Note" will be used.

To show the custom product note in the cart, see here.

This attribute is only available in Shopyflow version 0.0.7 and above. If you have an older version, you need to update your Shopyflow code snippet to at least version 0.0.7.

Creating Sub Product

Shopyflow offers a convenient way to add multiple products to cart at once by nesting a Buy Module inside of a parent Buy Module. The child buy modules are called Sub Products. Sub Products are very handy for creating configurable products with optional items, cross sells and product bundles.

Sub Product is a Buy Module nested in another Buy Module and has exactly the same properties and functions. A Sub Product requires only one extra attribute called sf-sub-product

sf-sub-product

Attribute Name
sf-sub-product
Attribute Value
required
True or 1
Nesting Rule
sf-product
>
sf-sub-product

The sf-sub-product attribute is used to mark Sub Product wrapper element and along with the sf-product attribute.

required Attribute Value

If the required value is assigned to a Sub Product wrapper, the Sub Product is automatically staged to be added to cart. In the context of required, user can only select the options and quantity for the Sub Product but doesn't have an Add to Cart Button to control the purchase.

This feature is handy for creating configurable products or bundles with adjustable variant options.

Creating Cart

sf-cart

Attribute Name
sf-cart
Attribute Value
True or 1
Nesting Rule
Can be placed anywhere on the page

sf-cart is assigned to the outermost Cart Wrapper element. The Cart Item List, Subtotal and the Checkout Button are placed inside of the Cart Wrapper Element

Webflow designer
Custom Attributes
sf-cart="1"
sf-cart-list
Attribute Name
sf-cart-list
Attribute Value
True or 1
Nesting Rule
sf-cart
>
sf-cart-list


sf-cart-list attribute is added to the Cart Items List element.

Cart Items List
is the container element for the Line Items that are currently in the cart. Every new line item added to cart is appended inside of this element.

Note: When using custom cart elements (e.g. cart note or "Cart is empty" message), make sure that you don't place them inside the Cart Items List. Otherwise Shopyflow will remove them while performing cart actions.

Webflow designer
Custom Attributes
sf-cart-list="1"

sf-cart-item

Attribute Name
sf-cart-item
Attribute Value
True or 1
Nesting Rule
sf-cart
>
sf-cart-list
>
sf-cart-item


sf-cart-list attribute is added to the Cart Item element.

Cart Item is the element that represents your line item in the cart. It takes sf-cart-item attribute with value of 1.

Cart Item and all the elements inside of it used as a template for the line items that are added to cart. Shopyflow automatically populates the elements with the product information from your Shopify Product Settings and appends it into the Cart List element.

Webflow designer
Custom Attributes
sf-cart-item="1"

sf-cart-item-remove

Attribute Name
sf-cart-item-remove
Attribute Value
True or 1
Nesting Rule
sf-cart
>
sf-cart-list
>
sf-cart-item
>
sf-cart-item-remove


sf-remove-item attribute is for creating a button inside of the Cart Item that removes the subject Cart Item from the cart.

Webflow designer
Custom Attributes
sf-cart-item-remove="1"
Custom Attributes
sf-cart-list="1"
Custom Attributes
sf-line-item="1"
Custom Attributes
sf-cart="1"

sf-change-quantity (Cart Item context)

Attribute Name
sf-change-quantity
Attribute Value
True or 1
Nesting Rule
sf-cart
>
sf-cart-list
>
sf-cart-item
>
sf-change-quantity

Quantity Changer allows user to change the quantity of the line item that was added to the cart. A native Webflow Text Input is used as the changer element. The element takes sf-change-quantity attribute with value of 1.

Webflow designer
Custom Attributes
sf-change-quantity="1"

sf-show-price (Cart Item context)

Attribute Name
sf-show-price
Attribute Value
True or 1
Nesting Rule
sf-cart
>
sf-cart-list
>
sf-cart-item
>
sf-show-price

sf-show-price attribute is used for displaying the Line total of a cart item. Line total shows the price of the variant multiplied by its quantity.

Webflow designer
Custom Attributes
sf-change-quantity="1"

sf-show-prediscount-price (Cart Item context)

Attribute Name
sf-show-prediscount-price
Attribute Value
True or 1
Nesting Rule
sf-cart
>
sf-cart-list
>
sf-cart-item
>
sf-show-prediscount-price
Shopyflow Version
0.1.0

sf-show-prediscount-price attribute is used for displaying the Line total of a cart item before the discounts are applied. The value is multiplied by the line item's quantity.

Webflow designer
Custom Attributes
sf-show-title="1"
Custom Attributes
sf-show-prediscount-price="1"
This attribute is only available in Shopyflow version 0.1.0 and above. If you have an older version, you need to update your Shopyflow code snippet to at least version 0.1.0.

sf-show-unit-price (Cart Item context)

Attribute Name
sf-show-unit-price
Attribute Value
True or 1
Nesting Rule
sf-cart
>
sf-cart-list
>
sf-cart-item
>
sf-show-unit-price

sf-show-unit-price attribute is used for displaying the Unit Price of the Cart Item.

sf-show-title (Cart Item context)

Attribute Name
sf-show-title
Attribute Value
True or 1
Nesting Rule
sf-cart
>
sf-cart-list
>
sf-cart-item
>
sf-show-title

sf-show-title attribute is used on Product Title element inside of the Cart Item.

Webflow designer
Custom Attributes
sf-show-title="1"

sf-show-options (Cart Item context)

Attribute Name
sf-show-options
Attribute Value
1 or True
Nesting Rule
sf-cart
>
sf-cart-list
>
sf-cart-item
>
sf-show-options

sf-show-options attribute is used on Variant Option Displayer element inside of the subject Cart Item. Shopyflow populates this element with all the selected option values from different option groups (eg. Color, Size) separated with a “/”. E.g. Red/M

Webflow designer
Custom Attributes
sf-show-options="1"

sf-show-discount-title (Cart Item context)

Attribute Name
sf-show-discount-title
Attribute Value
True or 1
Nesting Rule
sf-cart
>
sf-cart-list
>
sf-cart-item
>
sf-show-discount-title
Shopyflow Version
0.1.0

sf-show-discount-title attribute can be used inside of the subject Cart Item to display the title of the discount that is applied to that line item.

Webflow designer
Custom Attributes
sf-show-discount-title="1"
This attribute is only available in Shopyflow version 0.1.0 and above. If you have an older version, you need to update your Shopyflow code snippet to at least version 0.1.0.

sf-show-product-note (Cart Item context)

Attribute Name
sf-show-product-note
Attribute Value
True or 1
Nesting Rule
sf-cart
>
sf-cart-list
>
sf-cart-item
>
sf-show-product-note
Shopyflow Version
0.0.7

sf-show-product-note attribute can be used inside of the subject Cart Item to display the product note that is associated with that line item.

Webflow designer
Custom Attributes
sf-show-product-note="1"
This attribute is only available in Shopyflow version 0.0.7 and above. If you have an older version, you need to update your Shopyflow code snippet to at least version 0.0.7.

sf-cart-total

Attribute Name
sf-cart-total
Attribute Value
True or 1
Nesting Rule
sf-cart
>
sf-cart-total

sf-cart-total attribute is used for creating a Cart Total price displayer element inside of the Cart.

Webflow designer
Custom Attributes
sf-cart-total="1"

sf-cart-subtotal

Attribute Name
sf-cart-subtotal
Attribute Value
True or 1
Nesting Rule
sf-cart
>
sf-cart-subtotal

sf-cart-subtotal attribute is used for creating a Cart Sub Total price displayer element inside of the Cart.

Webflow designer
Custom Attributes
sf-cart-subtotal="1"

sf-show-order-discount-title

Attribute Name
sf-show-order-discount-title
Attribute Value
True or 1
Nesting Rule
sf-cart
>
sf-show-order-discount-title
Shopyflow Version
0.1.0

sf-show-order-discount-title attribute is used for creating a Order Discount Title displayer element inside of the Cart.

sf-show-order-discount

Attribute Name
sf-show-order-discount
Attribute Value
True or 1
Nesting Rule
sf-cart
>
sf-show-order-discount
Shopyflow Version
0.1.0

sf-show-order-discount attribute is used for creating a Order Discount price displayer element inside of the Cart.

sf-checkout

Attribute Name
sf-checkout
Attribute Value
True or 1
Nesting Rule
sf-cart
>
sf-checkout

sf-checkout attribute is used for creating a Checkout Button inside of the Cart.

Webflow designer
Custom Attributes
sf-checkout="1"

sf-cart-count

Attribute Name
sf-cart-count
Attribute Value
True or 1
Nesting Rule
This element can be placed anywhere on the page

sf-cart-count attribute is used for creating a Cart Counter element that you can place anywhere in your site. Cart Counter displays the number of the items currently in the Cart.

sf-cart-note

Attribute Name
sf-cart-note
Attribute Value
True or 1

sf-cart-noteattribute can be used to create a note field in the cart module. Add this attribute to an input, textarea or select element in your cart module. The content of the note field will be visible in the order details in Shopify once the order is completed. However it won't be visible on the checkout page.

This attribute is only available in Shopyflow version 0.0.2 and above. If you have an older version, you need to update your Shopyflow code snippet to at least version 0.0.2.

sf-checkout-domain

Attribute Name
sf-checkout-domain
Subject Element
Checkout Button
Attribute Value
Complete URL
Shopyflow Version
0.0.2

sf-checkout-domain can be used on a checkout button to redirect the customer to an alternative checkout domain (must be registered with Shopify) instead of the domain that was added to Shopyflow.
For example you have used your default Shopify domain ("shopyflow-demo.myshopify.com") when adding your store to Shopyflow. To allow completing the purchase on an alternative domain (must be registered with Shopify) instead of the default domain, you can add sf-checkout-domain custom atrribute to the checkout button and set its value to e.g. https://checkout.shopyflow.com .

This attribute is only available in Shopyflow version 0.0.2 and above. If you have an older version, you need to update your Shopyflow code snippet to at least version 0.0.2.

Utility Attributes

sf-await

Attribute Name
sf-await
Attribute Value
True or 1

Shopyflow updates your store elements' properties after the page load. This change is sometimes visible to the eye. To smoothen this experience,

Shopyflow uses sf-awaitattribute to hide elements while it finishes updating.

For example if you add sf-await attribute to the Product Container, its opacity will be set to 0 until Shopyflow finishes updating the elements. Once the update is complete and your store is ready, Product Container's opacity will be set to 100.

You can add sf-await attribute to any element you like (titles, option changers, images, etc.) and Shopyflow will hide it for you until your store is ready.

sf-redirect

Attribute Name
sf-redirect
Attribute Value
True or 1

sf-redirectattribute is used on the Add to Cart Button to create a redirect that will happen when a product is added to the cart

This feature comes handy when creating shopping experiences that takes place in multiple steps on different pages.

sf-cart-popup

Attribute Name
sf-cart-popup
Attribute Value
True or 1

sf-cart-popupattribute is used to create a dynamic Cart Popup that becomes visible when a product is successfully added to the cart.

Once an item is added to the cart, the Cart Popup is added an extra class called sf-cart-opened. Using this combo class you can set the visibility of the popup to change on add to cart event. sf-cart-opened is also added to the inner elements of the Cart Popup and this enables the possibilities of creating animated transitions between states.

sf-cart-closeattribute is used to create a Cart Closer button that closes the popup by removing the sf-cart-opened class.

sf-cart-close

Attribute Name
sf-cart-close
Attribute Value
True or 1

sf-cart-closeattribute is used to create a Cart Closer button that will close the Cart Popup which becomes visible when a product is successfully added to the cart.

Once an item is added to the cart, the Cart Popup is added an extra class called sf-cart-opened. Using this combo class you can set the visibility of the popup to change on add to cart event. sf-cart-opened class is also added to all the inner elements of the Cart Popup and this enables the possibilities of creating animated transitions between states.

Cart Closer
button removes the sf-cart-opened class from the Cart Popup and all the inner elements.

sf-cart-close attribute can also be added to an overlay element to close the pop-up when clicked outside of the pop-up.

sf-cart-open

Attribute Name
sf-cart-open
Attribute Value
True or 1

sf-cart-openattribute is used to create a Cart Opener button that will open the Cart Popup.

Cart Opener
button adds the sf-cart-opened class to the Cart Popup and all the inner elements.

sf-cart-open attribute can be added to a Cart Count element or to a cart icon to create a  seamless experience.

sf-change-currency

Attribute Name
sf-change-currency
Attribute Value
True or 1
Shopyflow Version
0.0.8

The sf-change-currency attribute can be used on a Select element to create a currency changer.

Text field of the choice (option) can be anything. However its Value should be a country code and must be picked from Shopify's country code list. You can find the country list here.

In the example below, EUR is set as the display name of a select option. Its value is set to DE which stands for the country code of Germany. When your customers select this option, the currency of your store will change to the currency that you have setup for German market in Shopify's backend. By default that currency is Euro (EUR).

Currency Selector

Creating a custom currency changer

sf-change-currency attribute can be utilised to b custom currency changers. To accomplish this, the sf-change-currency attribute is added to the wrapper div element of a group of elements with  sf-currency-value attributes. It takes country code as value.

{Country Code} Attribute Value

Attribute Name
sf-currency-value
Attribute Value
{Country Code}
Nesting Rule
sf-change-currency
>
sf-currency-value

E.g.  Clicking on a currency value with sf-currency-value="DE" custom attribute will change your store's currency to the currency that you have setup for German market in Shopify's backend.

Webflow designer
Custom Attributes
sf-change-currency="1"
Custom Attributes
sf-show-currency-selection="1"

sf-show-currency-selection attribute can be used to display the current currency selection. Under the hood Shopyflow will dynamically copy the contents of the sf-currency-value elemet into the currency displayer. This action will copy any text or image (e.g. country flag) into the displayer element.

You can get our example currency changer here.
You can get more country flags here.

This attribute is only available in Shopyflow version 0.0.8 and above. If you have an older version, you need to update your Shopyflow code snippet to at least version 0.0.8.

State Management Classes

Shopyflow provides you with a set of utility classes that will let you change the styling of certain elements under certain conditions such as when the selected variant is out of stock or when the sub product is staged to be added to cart.

sf-active State Management Class

Class Name
sf-active
Subject Element
Selected Custom Option Changer and all its children

sf-active class is automatically added to the Custom Option Changer element that has the sf-option-value attribute and all its children when it is selected.

To learn more about Custom Option Selectors and State Management please visit this step-by-step guide.

How to add an active state to the Option Changer Button

sf-cart-opened State Management Class

Class Name
sf-cart-opened
Subject Element
Cart Popup and all its children

Once an item is added to the cart, the Cart Popup gets an extra combo class called sf-cart-opened. Using this combo class you can set the visibility of the popup to change on add to cart event. sf-cart-opened class is also added to all the inner elements of the Cart Popup and this enables the possibilities of creating animated transitions between states.

Cart Closer button removes the sf-cart-opened class from the Cart Popup and all the inner elements.

sf-cart-empty State Management Class

Class Name
sf-cart-empty
Subject Element
Cart Popup element and all its children & Cart Count element
Shopyflow Version
0.0.5

When the cart is empty, the Cart Popup and all its children get an extra combo class called sf-cart-empty. Using this combo class you can set the visibility of any element inside the cart (e.g. a custom "Cart is empty" message) when the cart count is zero. Cart count element also receives the same combo class which can be used to hide the cart count number.
Note: When using custom cart elements (e.g. cart note or "Cart is empty" message), make sure that you don't place them inside the Cart Items List element. Otherwise Shopyflow will remove them while performing cart actions.

This attribute is only available in Shopyflow version 0.0.5 and above. If you have an older version, you need to update your Shopyflow code snippet to at least version 0.0.5.

sf-out-of-stock State Management Class

Class Name
sf-out-of-stock
Subject Element
Add to Cart button and all its children

sf-out-of-stock class is automatically added to Add to Cart button and to all its inner elements if the selected variant is not in stock.

Webflow designer
Yellow variant is set to out of stock in Shopify product settings.
Webflow designer
Once Yellow option is selected in your published Webflow site Add to Cart Button receives thesf-out-of-stockclass.
State Management of Add to Cart Button

To disable the click on the Add to Cart button, you can extend the sf-out-of-stock class with pointer-events: none rule by adding the following custom CSS in site settings:

<style>
.sf-out-of-stock {
  pointer-events: none;
}
</style> 

If "Continue selling when out of stock" option is selected in variant's settings, the variant will still be sold and sf-out-of-stock class will not be added to the Add to Cart button.

Continue selling when out of stock

sf-option-unavailable State Management Class

Class Name
sf-option-unavailable
Subject Element
Unavailable option and all its children
Shopyflow Version
0.0.7

When an option combination does not exist as a variant or is just out of stock, sf-option-unavailable class is automatically added to the unavailable custom option selectors. You can add this class to a custom option selector in Webflow and style it to give it the desired unavailable effect. When styling this class in Webflow, make sure that you add it to an option selector that does not have an sf-active class. Lastly, don't forget to remove the sf-option-unavailable class before publishing.

If the option selector is a HTML select element, then the unavailable option gets the native disabled attribute instead of the unavailable class.

Webflow designer
The unavailable option rceives thesf-option-unavailableclass which can be styled as shown above.
Webflow designer
If the unavailable option is a select option element, the option gets disabled instead.
This attribute is only available in Shopyflow version 0.0.7 and above. If you have an older version, you need to update your Shopyflow code snippet to at least version 0.0.7.

sf-stock-exceeded State Management Class

Subject Element
Add to Cart button and all its children
Class Name
sf-stock-exceeded
Shopyflow Version
0.0.2

sf-stock-exceeded class is automatically added to Add to Cart button and all its inner elements to prevent customers from adding more of the same item to the cart when the last remaining stock is added to the cart by that user.

To disable the click on the Add to Cart button, you can extend the sf-out-of-exceeded class with pointer-events: none rule by adding the following custom CSS in site settings:

<style>
.sf-stock-exceeded {
  pointer-events: none;
}
</style> 
This attribute is only available in Shopyflow version 0.0.2 and above. If you have an older version, you need to update your Shopyflow code snippet to at least version 0.0.2.

sf-sub-product-added State Management Class

Class Name
sf-sub-product-added
Subject Element
Sub Product and all its children

sf-sub-product-added class is automatically added to the add to the Product Container of a Sub Product and all its inner elements when the Sub Product is added to cart. Using this class you can change the look of the Sub Product element while it's staged for getting added to the cart.

To learn more about Sub Product and State Management using sf-sub-product-added class visit Sub Product section

sf-active-thumbnail State Management Class

Class Name
sf-sub-product-added
Subject Element
Cart Popup

sf-sub-product-added class is automatically added to the add to the Product Container of a Sub Product and all its inner elements when the Sub Product is added to cart. Using this class you can change the look of the Sub Product element while it's staged for getting added to the cart.

To learn more about Sub Product and State Management using sf-sub-product-added class visit Sub Product section

Methods

Shopyflow provides you with a number of methods to call some of its functions programmatically.

Fetch New Product method

Shopyflow.fetchNew()

Populates the product containers which are added to the page after page load. Can be used to build a "Load More" button, pagination or an infinite scrolling experience.

Open Cart Cart method

Shopyflow.openCart()

Opens the cart module.

Close Cart Cart method

Shopyflow.closeCart()

Closes the cart module.

Refresh Cart Cart method

Shopyflow.refreshCart()

Deletes the existing cart and fetches a new one.

Analytics Note: This method doesn't trigger remove_cart_item event.

The Shopyflow Object

Shopyflow provides you with a number of properties to extend your store's capabilities with custom code.

Cart Count Cart property

Shopyflow.cart.quantity

Returns the total quantity of items in the cart.

Cart Subtotal Cart property

Shopyflow.cart.subTotalCost

Returns the subtotal cost of all the items in the cart.

Cart Total Cart property

Shopyflow.cart.totalCost

Returns the total cost of all the items in the cart.

General Settings

Localization

If you are running a multi-language store and have your translations ready in Shopify, you can load the translated version of your Shopify content and checkout.

IMPORTANT: You must enable your translations in Shopify first.

Manual Localization

Add store-language attribute to your Shopyflow Engine code snippet:

<!-- Shopyflow Engine -->
<script defer
sf-token="[STOREFRONT API KEY]"
sf-domain="[SHOPIFY STORE DOMAIN]"
src="https://cdn.shopyflow.io/[VERSION]/shopyflow.js"
store-language="ES"></script>

e.g. if store-language is set to ES, your product data and checkout will be displayed in Spanish. You can refer to this page to find your language code.

Webflow Localization

If you are using Webflow Lozalization, you should not use the store-language attribute in your Shopyflow Engine code snippet. You also need to make sure that you do not have a default language set in your site settings by leaving the language code field empty:

Webflow designer

Upgrading to Shopyflow v0.1.0+

Shopyflow versions 0.1.0 and above come with new features like customer account pages and subscriptions. These new features require extended scopes.

The upgrade takes place in two simple steps:

  • Updating Shopify Storefront API access token scopes
  • Updating the version of Shopyflow code snippet

1. Updating Scopes

IMPORTANT: You have been to the scope screen and enabled some or all of the scopes while installing Shopyflow for the first time. You still need to go to this page and verify that you have enabled ALL OF THE SCOPES.
  • Head to your Shopify Admin > Settings > Apps and Sales Channels section and click Develop apps link.

  • In the App development page, select Shopyflow (or however you named your app while connecting Shopyflow for the first time).

  • Go to Configuration tab and click Edit next to Storefront API integration.

  • Enable all the scopes in the list. We recommend enabling all the scopes so that you can get access to Shopyflow's all future feature releases without extra configuration.

  • Once you select all the fields click Save.

2. Updating The Shopyflow Code Snippet

Once you have updated your scopes head over to your Webflow project and update your Shopyflow code snippet's version to 0.1.0. You need to update both JS and CSS versions.

<!-- Shopyflow Engine -->
<script defer
sf-token="[STOREFRONT API KEY]"
sf-domain="[SHOPIFY STORE DOMAIN]"
src="https://cdn.shopyflow.io/[0.1.0 or HIGHER]/shopyflow.js"
></script>