Shopyflow installation takes place in 2 simple steps.
Shopyflow requires a Storefront API access token to securely connect your Shopify Store to your Webflow site. To generate your Store API access token;
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.
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.
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.
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!
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 installation takes place in 3 simple steps.
Shopyflow requires a Storefront API access token to securely connect your Shopify store to your Webflow site. To generate an Storefront API access token;
Head to your Shopify Admin > Settings > Apps and Sales Channels section and click Develop apps link.
In the App development page, click Create an app button.
In the dialog give your app a name and click Create app.
Your app is created. Let’s configure the API access scopes. Go to Configuration tab and open Storefront API integration settings
Storefront API access scopes lets you choose which information and functionalities are available for Shopyflow to access. Check the fields as shown below.
In the Checkout section
• unauthenticated_write_checkouts
• unauthenticated_write_checkouts
In the Products section
• unauthenticated_read_product_listings
• unauthenticated_read_product_inventory
Once you select the required fields click Save.
Now you can go to API Credentials tab and click Install App button.
Your Storefront API access token is generated.
Make sure your newly created app has access to the products through Sales Channels.
Once you have your Storefront API access token in place login to your Shopyflow Dashboard and follow the below steps:
Click Add new store.
In the opening dialogue;
a. Enter a Store Name. The name can be anything.
b. Enter the Shopify Domain of your store. Shopify Domain is the default url provided by Shopify. Ex. shopyflow-demo.myshopify.com
c. Finally, copy your newly generated Storefront API access token and paste into the Shopify API Key field.
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.
Find the newly created store in the Stores. There you will find the Shopyflow Code Snippet required to run your Shopyflow store.
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!
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
Above product page has the following components:
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 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.
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.
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.
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.
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 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.
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.
When building a custom quantity selector, the sf-show-quantity attribute is used for marking the element that displays the selected quantity.
sf-change-quantity-inc attribute is used to assign a function to a Webflow element for increasing the quantity.
sf-change-quantity-dec attribute is used to assign a function to a Webflow element for decreasing the quantity.
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.
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.
or alternatively, go to your Shopyflow Dashboard to see the list of {Option Names} for any product in your Shopify store.
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-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.
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.
or alternatively, go to your Shopyflow Dashboard to see the list of {Option Names} for any product in your Shopify store.
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.
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.
or alternatively, go to your Shopyflow Dashboard to see the list of {Option Values} for any product in your Shopify store.
The 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.
The sf-show-price attribute takes one of 4 different values listed below.
When sf-show-price attribute is set to with-quantity the displayed price is selected variant price multiplied by the selected quantity
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
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
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.
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:
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.
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.
The sf-show-compare-price attribute can be used to show the compared at price together with the new price.
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.
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 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
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 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.
sf-show-desc attribute is used to display the Product Description text as in Shopify product settings page.
sf-show-stockattribute is used to display the Inventory Quantity of the currently selected variant.
sf-show-skuattribute is used to display the SKU of the currently selected variant.
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
The sf-sub-product attribute is used to mark Sub Product wrapper element and along with the sf-product attribute.
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.
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
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.
sf-cart-list attribute is added to the Cart Item element.
Cart Item is the wrapper element for a 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.
sf-remove-item attribute is for creating a button inside of the Cart Item that removes the subject Cart Item from the cart.
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.
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.
sf-show-title attribute is used on Product Title element inside of the Cart Item.
sf-show-option 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 “,”
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.
or alternatively, go to your Shopyflow Dashboard to see the list of {Option Names} for any product in your Shopify store.
sf-subtotal attribute is used for creating a Cart Sub Total price displayer element inside of the Cart.
sf-checkout attribute is used for creating a Checkout Button inside of the Cart.
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-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.
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-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-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-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-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-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.
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 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.
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-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.
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:
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.
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:
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-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
Shopyflow provides you with a number of methods to call some of its functions programmatically.
Re-populates the product containers on the page.
Populates the product containers which are added to the page after page load. Can be used together with load more button or pagination.
Opens cart module.
Closes cart module.
Deletes the existing cart and fetches a new one.
If you are running a multi-language store and have your translations ready, you can load the translated version of your Shopify products and checkout by adding store-language attribute to your Shopyflow Engine snippet:
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.
