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
When an option combination does not exist as a variant, sf-option-unavailable class is automatically added to the unavailable Custom Option Value component.
Important: The custom option values of the first option selector won't be set as unavailable.
Let’s assume we have a product with various Size and Color options, and Large/Green combination is not available in our store. In this case; whenever the “Large” size option is selected, the Custom Option Value button that represents the “Green” color option will be added the sf-option-unavailable class.
sf-option-unavailable class can be used as a combo class to style the unavailable state of the Custom Option Value component in Webflow designer.
Select a Custom Option Value component in the designerIn addition to the elements existing class, add sf-option-unavailable class as a combo classChange the styling of the Custom Option Value element for the unavailable state Remove the sf-option-unavailable class Optionally, add a transition to the base class for a smooth transition between the statesRepeat the steps for each children element if you like to affect children elements’ styling too.
