Out of stock variant option state
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 is out of stock, sf-out-of-stock class is automatically added to the out of stock Custom Option Value component.
Important: If you have more than 1 option group, the custom option values of the first option selector won't be set as unavailable.
sf-out-of-stock class can be used as a combo class to style the out of stock state of the Custom Option Value component in Webflow Designer.
Webflow app usage
- Select a Custom Option Value component in the designer.
- In addition to the elements existing class, add sf-out-of-stock class as a combo class.
- Change the styling of the Custom Option Value element for the out of stock state.
- Remove the sf-out-of-stock class. Optionally, add a transition to the base class for a smooth transition between the states.
- Repeat the steps for each children element if you like to affect children elements’ styling too.
Webflow app settings
Inner components
Module contents
Available methods
Utility Class
contents
State management
Related Utilities
