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.
You can use the Webflow Slider element to create your Product Image Gallery.
1. Add a native Webflow Slider element inside of the Product Container
2. Select the outermost Slider element and give it the sf-slide attribute with the value of 1.
3. Leave only a single Slide element inside of the Mask element. The rest of the Slides will be generated by Shopyflow and populated with the Product Images from your Shopify Store.
4. Insert a Div Block or an Image element inside of the Slide element and give it the the sf-show-image attribute with the value of 1. If you choose to use a Div Block instead of an Image the product images are rendered as background images. Don’t forget to set the background styling properties.
5. Resize and style the Slider element and the Slide as you like all the slides to look.
You can also create clickable Gallery Thumbnails to change the displayed Product Image, with Shopify Product Images.
sf-change-image attribute is particularly useful for creating a basic image gallery with clickable thumbnails, but it does not include any transitions or navigational features.
When a thumbnail is clicked, t and every other element nested in it receives a state class called sf-active-thumbnail automatically. This class can be used to modify the look of a gallery thumbnail (e.g. border color) when it's clicked.
