Shopify Storefront data and cart logic is bound to your Webflow elements through Shopyflow attributes. Connecting your Webflow site to Shopify is done by adding custom attributes to your Webflow elements.
Yet, you are not required to type or edit attributes manually. Shopyflow provides you with the pre-configured components needed to create your store, as copyable Webflow elements right in Webflow designer.
All the copyable Shopyflow Components are native editable Webflow elements. There is no layout or styling limitation on any element.
In the below image hover your mouse on the hotspots to see all the required Shopyflow attributes to build a product page like this in Webflow
Product container component provides product context to the Buy Module. It is the outermost element of the Buy Module. Product Container is a Div Block with the sf-product attribute. The attribute stores the {Shopify Product ID} as the value.
In the Shopyflow app
Select the context product that you are building a Buy Module for.
Switch on to make the product container a Sub-product container.
Switch on if you're sourcing the Product ID from the CMS.
Adds the product to cart with the selected quantity and variant options on click. Add to Cart Button is a Div Block with the sf-add-to-cart attribute.
Add to Cart Button is a required component for Buy module in order to both adding the Product to the cart on click and for the parent Buy Module content to be fetched from Shopify.
Displays the name of the product as set in Shopify. Product Title is a Heading element with the sf-show-title attribute. The content of the element is overriden with the Shopify name of the current product on page load.
Displays the description of the product as set in Shopify. Product Description is a Paragraph element with the sf-show-desc attribute. The content of the element is overridden on page load with the description of the current product as set in Shopify.
Product image gallery is a set of components for easily building a dynamic product image gallery by utilising Webflow Slider. It's made of following elements:
Displays the price of the selected variant as set in Shopify. Price component is a Text Block with the sf-show-price attribute. The attribute stores calculation logic selection as the attribute value.
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.
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.
USD currency outside of the US is by browser default displayed as US$. To change this behaviour and to show only the $ sign, you can use en-US format.
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.
Displays the compare price of the selected variant as set in Shopify. Compare Price component is a Text Block with the sf-show-compare-price attribute. The attribute stores calculation logic as the attribute value.
Custom Quantity Changer component is a number input that can be modified with plus and minus buttons.
Changes the selected variant option value for the assigned variant option group. Option selector is a Select Input with the sf-change attribute.The attribute stores the {Variant Option Name} as the attribute value. Option selectors options are dynamically populated with your up to date Shopify data on page load on your live site.
Option Name represents the different group of variations available for a specific product. Such as Color, Size, Material etc.
Displays the SKU of the selected variant as set in Shopify. SKU is a Text Block with the sf-show-sku attribute.
Displays the available stock number of the selected variant. Stock Displayer is a Text Block with the sf-show-stock attribute.
Displays the vendor name of the current Product. Vendor displayer is a Text Block with the sf-show-vendor attribute.
Adds the product to cart with the selected quantity and variant options on click. Add to Cart Button is a Div Block with the sf-add-to-cart attribute.
Add to Cart Button is a required component for Buy module in order to both adding the Product to the cart on click and for the parent Buy Module content to be fetched from Shopify.
Default: Adds the product to cart on click.
Buy Now: If selected the user adds the product to cart on click and gets redirected to checkout. When this option is selected the element takes an additional attribute call sf-buy-now.
Redirect : If selected the user adds the product to cart on click and gets redirected to a custom url. When this option is selected the element takes an additional attribute call sf-redirect.
Customize the text that is displayed on the add to cart button when the selected variant is out of stock.
Customize the text that is displayed on the button when the selected quantity exceeds the available stock for the selected variant.
Displays the name of the product as set in Shopify. Product Title is a Heading element with the sf-show-title attribute. The content of the element is overriden with the Shopify name of the current product on page load.
Displays the description of the product as set in Shopify. Product Description is a Paragraph element with the sf-show-desc attribute. The content of the element is overridden on page load with the description of the current product as set in Shopify.
Product image gallery is a set of components for easily building a dynamic product image gallery by utilising Webflow Slider. It's made of following elements:
Displays the price of the selected variant as set in Shopify. Price component is a Text Block with the sf-show-price attribute. The attribute stores calculation logic selection as the attribute value.
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.
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.
USD currency outside of the US is by browser default displayed as US$. To change this behaviour and to show only the $ sign, you can use en-US format.
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.
default: The component shows unit price of the selected variant.
with-quantity: The component shows the price of the selected variant after multiplying it with the selected quantity.
with-sub-product: The component shows the price of the selected variant after adding it with the price of the sub-product (if selected by the customer)
all: The component shows the price of the selected variant using both the quantity multiplier and the sub-product price addition.
Displays the compare price of the selected variant as set in Shopify. Compare Price component is a Text Block with the sf-show-compare-price attribute. The attribute stores calculation logic as the attribute value.
default: The component shows unit price of the selected variant.
with-quantity: The component shows the price of the selected variant after multiplying it with the selected quantity.
with-sub-product: The component shows the price of the selected variant after adding it with the price of the sub-product (if selected by the customer)
all: The component shows the price of the selected variant using both the quantity multiplier and the sub-product price addition.
Custom Quantity Changer component is a number input that can be modified with plus and minus buttons.
Changes the selected variant option value for the assigned variant option group. Option selector is a Select Input with the sf-change attribute.The attribute stores the {Variant Option Name} as the attribute value. Option selectors options are dynamically populated with your up to date Shopify data on page load on your live site.
Option Name represents the different group of variations available for a specific product. Such as Color, Size, Material etc.
Select the context option group.
Displays the SKU of the selected variant as set in Shopify. SKU is a Text Block with the sf-show-sku attribute.
Displays the available stock number of the selected variant. Stock Displayer is a Text Block with the sf-show-stock attribute.
Displays the vendor name of the current Product. Vendor displayer is a Text Block with the sf-show-vendor attribute.
