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 in Webflow, you need to have a Shopyflow plan.
Next, you will need to set your primary Shopify domain which will be used for the Shopify checkout. For that you have two options: Using a custom domain or using the default Shopify domain (ends with myshopify.com).
Depending on your URL strategy, you might want to use a subdomain (store.mywebsite.com) in Shopify and the main domain (mywebsite.com) in Webflow or vice versa. Follow the steps below for each scenario:
You can check out this Shopify guide for more info on connecting a subdomain to your Shopify store.
You can check out this Shopify guide for more info on connecting a domain to your Shopify store.
If you have bought your domain through Shopify, you can't use it in Webflow. Shopify does not allow two A records with the name @ which is a requirement for adding a custom domain to Webflow.
In that case you have two options:
If you would like to use the default Shopify domain as your primary Shopify domain
Make sure both your domains are verified (DNS propagation complete and TLS certificates valid) You can check their status here. Once verified, follow these steps:
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/1.0.0/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="apps/subscriptions, tools/recurring, tools/calendar"
></script>
How to find your theme.liquid file in Shopify
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">
To be able to use some of the Shopify apps that work only in a Shopify theme (Online Store), you can let Shopyflow sync your cart session from Webflow over to Shopify.
For that to work, domains on both platforms must be under the same top level domain. This means any domain + subdomain or subdomain + subdomain combination for Webflow and Shopify would work.
Cart syncing does not work if you are on webflow.io domain or if your Shopify domain ends with myshopify.com, since in both scenarios domains do not belong to the same top level domain.
✅ In these scenarios cart syncing will work:
❌ In these scenarios cart syncing will not work:
Once you have a working setup, you can add e.g. sf-redirect="https://mywebsite.com/cart" attribute to your checkout button to send your users to your cart page in your Shopify theme.
