Product Container
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.
Webflow app usage
Contains the order information for a single order. Order Item is a Div Block with the attribute sf-order-item.
Storesynk requires you to create a single Order Item component with it's children components to be used as a template. The Order Item template is cloned iterated for all the orders and appended into Order List.
By default the field labels are visible only for the first Order Item in Desktop view. On mobile devices the labels are displayed for each of the Order Items and the table layout changes to a list of cards to adapt to the scarce of horizontal space.
Webflow app settings
Product
Select the context product that you are building a Buy Module for.
Sub-product
Switch on to make the product container a Sub-product container.
CMS
Switch on if you're sourcing the Product ID from the CMS.
Inner components
Module contents
Available methods
Add to Cart Button
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.
Product Title
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.
Product Description
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
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
Price
Contains the order information for a single order. Order Item is a Div Block with the attribute sf-order-item.
Storesynk requires you to create a single Order Item component with it's children components to be used as a template. The Order Item template is cloned iterated for all the orders and appended into Order List.
By default the field labels are visible only for the first Order Item in Desktop view. On mobile devices the labels are displayed for each of the Order Items and the table layout changes to a list of cards to adapt to the scarce of horizontal space.
Compare Price
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.
Quantity Changer
Custom Quantity Changer component is a number input that can be modified with plus and minus buttons.
Option Selector(Select input)
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.
SKU
Displays the SKU of the selected variant as set in Shopify. SKU is a Text Block with the sf-show-sku attribute.
Stock
Displays the available stock number of the selected variant. Stock Displayer is a Text Block with the sf-show-stock attribute.
Vendor
Displays the vendor name of the current Product. Vendor displayer is a Text Block with the sf-show-vendor attribute.
Component
contents
Add to Cart Button
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.
Webflow app usage
- Select the Product Container in the Webflow Designer
- In the Storesynk app; click Add new
- Find and click Add to Cart Button
- Select the Product Container again
- Paste the Add to Cart Button
Webflow app settings
Behaviour
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.
Product Title
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.
Webflow app usage
- Select the Product Container in the Webflow designer
- In the Storesynk app; click add new
- Select Product Title.
- Select the Product Container again
- Paste Product Title component
Webflow app settings
Product Description
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.
Webflow app usage
Contains the order information for a single order. Order Item is a Div Block with the attribute sf-order-item.
Storesynk requires you to create a single Order Item component with it's children components to be used as a template. The Order Item template is cloned iterated for all the orders and appended into Order List.
By default the field labels are visible only for the first Order Item in Desktop view. On mobile devices the labels are displayed for each of the Order Items and the table layout changes to a list of cards to adapt to the scarce of horizontal space.
Webflow app settings
Product Image Gallery
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
Webflow app usage
- Open the Storesynk app and click Add new
- Select Product Image Gallery
- Select the Product Container
- Paste the Product Image Gallery component
Webflow app settings
Price
Contains the order information for a single order. Order Item is a Div Block with the attribute sf-order-item.
Storesynk requires you to create a single Order Item component with it's children components to be used as a template. The Order Item template is cloned iterated for all the orders and appended into Order List.
By default the field labels are visible only for the first Order Item in Desktop view. On mobile devices the labels are displayed for each of the Order Items and the table layout changes to a list of cards to adapt to the scarce of horizontal space.
Webflow app usage
Contains the order information for a single order. Order Item is a Div Block with the attribute sf-order-item.
Storesynk requires you to create a single Order Item component with it's children components to be used as a template. The Order Item template is cloned iterated for all the orders and appended into Order List.
By default the field labels are visible only for the first Order Item in Desktop view. On mobile devices the labels are displayed for each of the Order Items and the table layout changes to a list of cards to adapt to the scarce of horizontal space.
Webflow app settings
Calculation Logic
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.
Compare Price
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.
Webflow app usage
- Select the Product Container in the Webflow designer
- In the Storesynk app; click Add new
- Select Compare Price
- Select the Product Container again
- Paste Compare Price component
Webflow app settings
Calculation Logic
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.
Quantity Changer
Custom Quantity Changer component is a number input that can be modified with plus and minus buttons.
Webflow app usage
- Open the Storesynk app and click add new
- Select Quantity Changer
- Select the Product Container
- Paste the Quantity Changer component
Webflow app settings
Option Selector(Select input)
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.
Webflow app usage
- Make sure the Product container is selected in the Webflow designer
- Open the Storesynk app and click add new
- Select Option Selector
- In the opening dialog select the option group
- Click copy component
- Select the Product Container again
- Paste Option Selector component
Webflow app settings
Option Group
Select the context option group.
SKU
Displays the SKU of the selected variant as set in Shopify. SKU is a Text Block with the sf-show-sku attribute.
Webflow app usage
- Select the Product container in the Webflow designer
- In the Storesynk app; click add new
- Select SKU .
- Select the Product Container again
- Paste SKU component
Webflow app settings
Stock
Displays the available stock number of the selected variant. Stock Displayer is a Text Block with the sf-show-stock attribute.
Webflow app usage
- Select the Product Container in the Webflow designer
- In the Storesynk app; click add new
- Select Stock.
- Select the Product Container again
- Paste Stock component
Webflow app settings
Vendor
Displays the vendor name of the current Product. Vendor displayer is a Text Block with the sf-show-vendor attribute.
Webflow app usage
- Select the Product Container in the Webflow designer
- In the Storesynk app; click add new
- Select Vendor .
- Select the Product Container again
- Paste Vendor component
Webflow app settings
State management
Related Utilities
