Product Container

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:

• Webflow slider
• Product Image
• Thumbnails Component

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.

Price Formatting

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:

1. Go to Shopify Admin > General.
2. In the Store defaults section, click …, and then click Change currency formatting.
3. In each of the fields, replace {{amount}} with the currency format that you want to use from the options table.
4. Click Save.

Additionally Shopyflow supports the following formats:

• {{amount_one_decimal}}
• {{amount_two_ decimals}}
• {{amount_no_decimals_with_comma_separator}}
• {{amount_one_decimal_with_comma_separator}}
• {{amount_two_decimals_with_comma_separator}}
• {{amount_no_decimals_with_space_separator}}
• {{amount_one_decimal_with_space_separator}}
  
• {{amount_two_decimals_with_space_separator}}

‍

Currency Symbol

‍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.

{Variant Option Name}

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.