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.
Klaviyo helps e-commerce businesses send personalized and targeted email campaigns that drive sales and build customer loyalty. It integrates smoothly with Shopify, making it easier to automate email marketing and create meaningful customer connections.
This guide assumes you have added your Klaviyo tracking code to your Webflow site. If you haven't done so, please follow this guide to find out how to get your Klaviyo code snippet.
After adding the Klaviyo code snippet to your Webflow site, you can enable Klaviyo in Shopyflow by adding klaviyo="true" attribute to your existing Shopyflow code snippet as shown below.
Do NOT add a second Shopyflow code snippet to your Webflow site or use an example code snippet (like the one above) directly. Update your existing Shopyflow code snippet instead.
Once the code is updated and the site is published, follow these steps to complete your setup:
① Go to Klaviyo Dashboard to create a private API key following these steps:
② Go to Shopyflow Dashboard, enable advanced tracking and add your private Klaviyo API Key you created in the previous step to your store settings as shown below:
③ Add a Klaviyo form to your Webflow site or use the copyable Shopflow Klaviyo Form. If you are using the Shopyflow form, select the form submit button in Webflow Designer and change the sf-klaviyo-list-id attribute's value to the Klaviyo list ID you would like to subscribe your users to.
④ Finally we need to enable single-opt in in the Klaviyo list settings. If this is not set up, you can not add your customers to any Klaviyo list.
Click here to learn more about the Klaviyo lists.
Klaviyo tracking can start only after a customer explicitly gives consent. Consent is given automatically if you use an email capture form. Moreover you can get consent using the consent checkbox in Shopify checkout or via the checkbox in Customer Account Sign Up Form.
Once your setup is complete, Shopyflow will start tracking the following Klaviyo e-commerce events:
Once customer gives consent and Shopyflow starts tracking, you will be able to create Klaviyo flows via your Klaviyo dashboard.
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
