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.
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
To be able to use Shopyflow on a custom domain you need to have a Shopyflow pro plan.
Next, we will set our primary Shopify domain which will be used for Shopify checkout. For that we have two options: Using the default Shopify domain (which ends with myshopify.com) or using a custom subdomain.
If you would like to use the default Shopify domain as your primary Shopify domain,
If you would like to use a custom subdomain,
Add the following code snippet to your theme.liquid file to setup Shopify redirects. The snippet does the following:
Don't forget to change custom-domain (e.g. mystore.com) and webflow-collection-slug (e.g. products) values to match your store in Webflow. See the video below to locate your theme.liquid file in Shopify admin.
<script src="https://cdn.shopyflow.io/scripts/shopify-redirect.js"
{% # Required # %}
webflow-custom-domain="mystore.com"
{% # Optional. Recommended when using CMS. Redirects Shopify PDP to Webflow PDP. # %}
webflow-collection-slug="products"
{% # Optional. Define page(s) that have explicit redirect rules. E.g. Shopify login -> Webflow login # %}
redirect="account/login=login, account/register=sign-up"
{% # Optional. Define page(s) that should be excluded from redirect. E.g. subscription login page # %}
no-redirect="tools/recurring, tools/calendar"
></script>
How to find your theme.liquid file in Shopify
On non-CMS pages, Shopyflow hides the content of the page until it finishes fetching product data from Shopify. However this is not necessary when using the CMS because Shopify product data is already the available on the page via CMS. So head over to your product template page, select the Product Container and see if it has sf-await="1" custom data attribute. If it does have it, remove it from the element.
Add this line close to the top of your theme.liquid file to stop Google and other crawlers from indexing your Shopify theme. Refer to the video above to locate your theme.liquid file in Shopify admin.
<meta name="robots" content="noindex">