Option unavailable state (add to cart button)
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 Add to Cart Button.
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 Add to Cart Button will be get the sf-option-unavailable class.
sf-option-unavailable class can be used as a combo class to style the unavailable state of the Add to Cart Button in Webflow Designer.
Webflow app usage
- Select the Add to Cart Button in the designer.
- In addition to the elements existing class, add sf-option-unavailable class as a combo class.
- Change the styling of the Add to Cart Button for the unavailable state.
- Remove the sf-option-unavailable 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
