Skip to main content

​
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

1

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.
2

Connect Webflow Site

After connecting with Webflow choose the Webflow site you want to connect with Looop.
3

Connect Shopify

After you have connected with Webflow, you will be redirected to set up the connection with Shopify.
1

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.
2

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.
3

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.
4

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.
1

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.
2

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.
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

1

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.
2

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.
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.
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.
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.
⌘I