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
Selected Custom Option Value component and all its children elements are given the sf-active class. sf-active class can be used as a combo class to alter the style of the active selection of the component and its children elements.
Select a Custom Option Value in the designerIn addition to the elements existing class, add sf-active class as a combo classChange the styling of the Custom Option Value element for the active state Remove the sf-active 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.
