Quickstart
Start building your awesome store in under 5 minutes
Setup your Looop store
Looop store simply means a connection between a Webflow site and a Shopify store. Your account can have multiple stores, each Looop store will have a connection to one unique Webflow site and Shopify store.
You need to have a Looop account to start building your store. If you don’t have one, you can create one here.
By default when you sign up, you will have a store created for you and you will be redirected to set up the integration with Webflow and Shopify.
Setup steps
Connect with Webflow & Shopify
Connect with Webflow & Shopify
Connect Webflow
Once you create a new store in Looop, you will be redirected to set up the connection with Webflow. Click the Connect button and you will be redirected to Webflow to authorize the connection with Looop.
Connect Webflow Site
After connecting with Webflow choose the Webflow site you want to connect with Looop.
Connect Shopify
After you have connected with Webflow, you will be redirected to set up the connection with Shopify.
Create a custom private app
You need to create a custom private app in Shopify to get the API keys. You can follow this guide to create a custom private app in Shopify.
Configure Admin API scopes
You need to configure the Admin API scopes to make sure Looop has access to the data it needs to get from Shopify. You can follow this guide to configure the Admin API scopes.
Configure Storefront API scopes
You need to configure the Storefront API scopes to enable the development of a headless storefront. You can follow this guide to configure the Storefront API scopes.
Get your Shopify domain
Enter the .myshopify.com domain of your Shopify store. You can find this in your Shopify admin panel. You can follow this guide to get your Shopify domain.
Configure CMS
Configure CMS
Check CMS fields
Looop creates products, variants, collections, and options CMS and multiple fields in your Webflow site. However, reference and multi-reference fields are not created by default. You need to create these fields to make sure the CMS is ready to get data from Shopify.
Using CMS Verifier
Go to Dashboard > Webflow Setup to find the CMS structure and use the CMS verifier to check if your CMS is ready to get data from Shopify. You can also use this doc to see all the fields you need in Webflow CMS.
Import Shopify data
Import Shopify data
Once you have completed the CMS configuration, your Webflow site is ready to get data from Shopify. In the Looop dashboard, you will see three tabs Products, Collections, and Policies. In each tab you will see a Sync button next to each item. Click on the Sync button to import the data from Shopify to Webflow.
Deploy your changes
Add the Looop Embed
Add the Looop Embed
Get the Embed Script
Get the uniqe embed script for your store from the Looop dashabord. You can find the embed script in the Looop Dashabord > Store Settings > Looop Embed tab.
Paste the code in <Head>
Go to Webflow Project Settings > Custom Code > Head and paste the scipt in the head section of your Webflow site.
Develop in Webflow
Develop in Webflow
Once your Shopify data is imported to Webflow, you can start developing pages in Webflow and than use Looop attributes avilable in our Webflow designer app to add ecommerce functionality to your site. You can follow this guide to see how to use Looop attributes to add ecommerce functionality to your site.
Setup Shopify Redirect
Setup Shopify Redirect
We want to make sure that any one who visits our shopify domain is redirected to our Webflow site. You can follow this guide to setup the Shopify redirect.
Deploy your site
Deploy your site
Once you have added the Looop embed and developed your site in Webflow, you can deploy your site to the Webflow hosting. Looop Embed will connect your Webflow site with Shopify and you will be able to see the data from Shopify in your Webflow site.