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.
Shopyflow uses Shopify's currency formatting when displaying price in the CMS and on the page. Follow the steps below to change your price formating:
{{amount}} with the currency format that you want to use from the options table.Additionally Shopyflow supports the following formats:
By default Shopyflow displays the currencies 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 go to Shopyflow Webflow App > Installation > General Settings > Price Display Settings and select another format.
By doing so you can e.g. show Canadian Dollar as $ instead of CA$
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.
Shopyflow uses Shopify's currency formatting when displaying price in the CMS and on the page. Follow the steps below to change your price formating:
{{amount}} with the currency format that you want to use from the options table.Additionally Shopyflow supports the following formats:
By default Shopyflow displays the currencies 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 go to Shopyflow Webflow App > Installation > General Settings > Price Display Settings and select another format.
By doing so you can e.g. show Canadian Dollar as $ instead of CA$
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.
