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.
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-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.
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-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.
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-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 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.
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.
sf-show-vendorattribute is used to display the vendor of the current product.
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.
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.
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.
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.
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.
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-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.
sf-show-unit-price attribute is used for displaying the Unit Price of the Cart Item.
sf-show-title attribute is used on Product Title element inside of the Cart Item.
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
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.
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.
sf-cart-total attribute is used for creating a Cart Total price displayer element inside of the Cart.
sf-cart-subtotal attribute is used for creating a Cart Sub Total price displayer element inside of the Cart.
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 is used for creating a Order Discount 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.
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 .
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.
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).
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
Opens the cart module.
Closes the cart module.
Deletes the existing cart and fetches a new one.
Shopyflow provides you with a number of properties to extend your store's capabilities with custom code.
Returns the total quantity of items in the cart.
Returns the subtotal cost of all the items in the cart.
Returns the total cost of all the items in the cart.
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.
Add store-language attribute to your Shopyflow Engine code 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.
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:
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:
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.
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.
