Shopyflow installation takes place in 2 simple steps.
Shopyflow requires a Storefront API access token to securely connect your Shopify Store to your Webflow site. To generate your Store API access token;
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Shopyflow requires a Storefront API access token to securely connect your Shopify Store to your Webflow site. To generate your Store API access token;
1. Head to your Shopify Admin > Settings > Apps and Sales Channels section and click Develop apps link.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Along with the Product Container, the Add to Cart Button is the only required element when creating a Buy Module.
Once we have the Add to Cart Button inside of the Product Container, we already have a functioning Buy Module even though we don’t have a quantity changer, variant option selectors or any other product information in place.
If the selected variant by the user is out of stock, the Add to Cart Button and every other element nested in it receives a state class called sf-out-of-stock automatically. This class can be used to modify the look and functionality of the button when the selected variant is out of stock.
To style the out of stock state of the Add to Cart Button:
1. Make sure you have a base class on your button that defines the normal state of your Add to Cart Button.
2. Now add the sf-out-of-stock as a combo class to the button and change the style.
3. Let’s do the same for the inner text. We want to hide the Add to Cart Text when the selected variant is out of stock and display another text. Let’s hide the add to cart text.
4. Now we add another Text Block element for the “Out of Stock Text" inside of our button and set its display property to none in normal state.
5. We add sf-out-of-stock class to the “Out of Stock Text" and change the display property to block.
Done. Don’t forget to remove all the sf-out-of-stock classes from the elements before publishing the site.
