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.
Cart Component is made up of multiple elements and comes with a few simple nesting rules. The easiest and the safest way to add the cart component into your store is copying it directly from Shopyflow Template library.
Once you have your cart in the page you can publish your Webflow site and test the Buy Module.
If you have been following this step by step guide, you should have only a Product Container with an Add to Cart Button in it so far.
In your published site, once you click on the Add to Cart Button, you should see the first variant of the product that you have created a Buy Module for, is in the cart as a line item.
Cart Wrapper is the main wrapper element for the cart module. It can be placed anywhere in the site and it takes sf-cart attribute with value of 1.
Cart Items List is the container element for the Line Items that are currently being added to the cart. Every new line item added to cart is appended inside of this element.
Cart Items List has to be placed inside of a Cart Wrapper element and takes sf-cart-list attribute with value of 1.
Cart Items is the wrapper element for a line item in the cart. It takes sf-cart-item attribute with value of 1.
Cart Item and all the elements inside of it used as a template for the line items that are added to cart. Shopyflow automatically populates the elements with the product information from your Shopify Product Settings and appends it into the cart list element.
Remove Cart Item button allows user to remove the cart item from the cart. You can use any Webflow element with sf-cart-item-remove attribute and the value of 1.
Quantity Changer allows user to change the quantity of the line item that was added to the cart. A native Webflow Text Input is used as the changer element. The element takes sf-change-quantity attribute with value of 1.
Price element is used for displaying the line total of a line item. Line total shows the price of the variant multiplied by its quantity. It takes sf-show-price attribute with value of 1.
Product Title element is used for displaying the name of the product. Any text element can be used to create the element. It takes sf-show-title attribute with value of 1.
Product Options display the selected variant options for the line item. It takes sf-show-options attribute with value of "1". Shopyflow populates this element with all the selected options from different option groups (eg. Color, Size) Separated with a “,”
Product Image displays the selected variant’s image as set in Shopify Product settings. It takes sf-show-image attribute with value of 1.
This attribute may be utilized on either an Image Element or a Div Block. In the case of the latter, the product images are rendered as background images. So if you are using a Div Block make sure you set the background-size and background-position properties right in Webflow.
Subtotal element displays the subtotal cost of the line items currently in the cart. It takes sf-cart-subtotal attribute with the value of 1.
Checkout Button element to start Shopify checkout process. It takes sf-checkout attribute with value of 1.
