Looop

Looop connects Shopify product data to Webflow CMS so you can design and publish headless e-commerce storefronts without exporting code.

Webflow handles layout, content management, and hosting well — but it does not include a native connection to Shopify's product catalog, inventory system, or checkout flow. If you want to sell Shopify products through a Webflow-built storefront, you need a bridge between the two platforms. Without one, product data lives in Shopify while your storefront lives in Webflow, and keeping them in sync requires manual work or custom development.

Looop fills that gap by syncing Shopify products, variants, collections, and policies directly into your Webflow CMS. It delivers cart functionality, checkout redirects, and real-time inventory tracking through a single JavaScript embed and a set of custom HTML attributes. The result is a Webflow site that looks and performs exactly how you designed it, backed by Shopify's e-commerce infrastructure for payments, fulfillment, and order management.

This integration is built for Webflow designers and agencies adding e-commerce to client projects, Shopify merchants who want a custom storefront without theme limitations, and no-code developers building headless commerce sites. If you need Shopify's backend paired with full visual control over the frontend, Looop is the connector between the two.

How to integrate Looop with Webflow

What is Looop? Looop is a headless e-commerce integration platform that syncs Shopify store data into Webflow CMS and delivers checkout functionality through custom HTML attributes. It joins Webflow's design and CMS capabilities with Shopify's e-commerce backend, letting you publish storefronts directly from Webflow.

Looop provides four integration methods that work together to deliver a complete headless storefront.

• The Looop app installs directly from the Webflow Marketplace and handles the OAuth connection, CMS collection setup, and product sync between Shopify and Webflow  
• The Looop embed script and custom attributes add e-commerce UI — cart, checkout, variant selectors, inventory display — to any Webflow element through a single JavaScript tag and HTML attributes applied in Webflow

Both methods are required for a working integration. The app manages data flow between platforms, while the embed script and attributes deliver the storefront experience to visitors.

Use the Looop app

The Looop app on the Webflow Marketplace is the starting point for the integration. It creates the OAuth connection between your Webflow site and Shopify store, automatically generates CMS collections for products, variants, and collections, and provides a dashboard for syncing and verifying your data. The app is approved by Webflow and includes a free plan for building and testing on webflow.io subdomains.

• Install the Looop app from the Webflow Marketplace listing into your project or workspace  
• Connect your Shopify store by providing API credentials from a Shopify private app — the Looop quickstart guide walks through credential setup  
• Run the CMS Verifier from Dashboard > Webflow Setup to check for missing or misconfigured CMS fields — red icons indicate missing collections or fields, yellow icons flag mismatched field types  
• Sync products from the Looop dashboard by clicking the Sync button next to each product — items enter an asynchronous queue, so completion time depends on queue depth  
• Reference and Multi-reference fields in Webflow CMS must be created manually before syncing, since Looop does not auto-generate these field types

This gives you a verified CMS structure before you move on to storefront behavior and customer-facing interactions.

The app also installs the Looop panel in Webflow automatically when you connect your account, per the Webflow Connect documentation. One Looop store maps to exactly one Webflow site — multi-site setups require separate Looop store instances.

Add Looop e-commerce functionality with the embed script and custom attributes

Once the Looop app syncs your Shopify data into Webflow CMS, the Looop embed script delivers all client-side e-commerce functionality — cart interactions, checkout redirects, variant selection, and inventory display. You add the script to your site's custom code section and apply Looop's custom HTML attributes to connect individual Webflow elements to Shopify functionality. No additional JavaScript is required for standard storefront features.

• Retrieve your embed code from the Looop dashboard under Store settings > Looop Embed — the code includes your store ID, Shopify domain, and Storefront API key  
• Paste the embed script in your Webflow Site Settings > Custom Code tab — the Looop documentation specifies the Head section, though placing it in the Footer section follows Webflow's performance recommendation for JavaScript  
• Publish your site before testing — the embed does not execute in Webflow's preview mode  
• Apply Looop attributes to Webflow elements using the Looop panel's search, structure, attributes, or cloneables tabs per the Looop panel documentation

Together, these steps connect your synced CMS data to the interactive storefront experience visitors will actually use.

The embed script follows this format:

<script defer src="https://embed.uselooop.com"
       store="REPLACE_WITH_YOUR_STORES_ID"
       domain="YOUR_SHOPIFY_MYSHOPIFY_DOMAIN"
       key="SHOPIFY_STOREFRONT_API_KEY">
</script>



Do not manually construct this script — always copy it from the Looop dashboard to get the correct credentials.

Configure third-party services with LooopConfig

The LooopConfig object lets you activate third-party integrations alongside the Looop embed. Place a window.LooopConfig script block before the embed script in your site's custom code section. This is useful for adding analytics tracking or review widgets to your storefront without additional embed scripts.

• Enable Google Analytics e-commerce tracking with googleAnalytics: true  
• Enable Fathom Analytics tracking with fathomAnalytics: true  
• Add Google Places Autocomplete to address fields with googlePlaces: true and your API key  
• Display Okendo product reviews with okendo: true and your Okendo user ID — widgets are placed using data-oke-widget, data-oke-star-rating, data-oke-questions-widget, and data-oke-carousel attributes on Webflow elements

Only include the integrations you need, since each key works independently within the same configuration object. This keeps the configuration focused on the services your storefront actually uses.

The LooopConfig block follows this structure:

<script>
window.LooopConfig = {
 googleAnalytics: true,
 fathomAnalytics: true,
 googlePlaces: true,
 googlePlacesKey: "YOUR_GOOGLE_API_KEY",
 okendo: true,
 okendoId: "YOUR_OKENDO_USER_ID"
}
</script>



Only include the keys you need — each integration is independent.

Apply custom attributes with the Looop panel and cloneables

The Looop panel is a visual tool inside Webflow that lets you assign Looop's custom HTML attributes to elements without writing code. These attributes connect Webflow elements to Shopify functionality — a div becomes an add-to-cart button, a text block displays variant prices, an image element shows product photos.

• Use the search tab to find specific attributes by name  
• Browse organized attribute categories in the structure tab  
• Click any Webflow element, then click an attribute in the panel to apply it  
• Access pre-built e-commerce components from the cloneables tab — these come with all required attributes already configured, so you can drop them onto the canvas and start customizing the layout immediately

The cloneables option is the fastest path for teams building their first Looop storefront, since it removes the need to learn individual attribute names before getting a working product page. It is a practical way to move from synced data to a functioning storefront layout quickly.

Handle Shopify checkout redirects

The Shopify redirect scripts handle the transition from your Webflow-hosted storefront to Shopify's checkout. Two redirect scripts are available — a standard redirect for general navigation and a checkout-specific redirect that sends visitors to a designated checkout page.

• The standard redirect script routes visitors from Shopify URLs to your custom domain  
• The checkout redirect script sends visitors to a specific page on your Webflow site after checkout events

These scripts help keep the storefront and checkout journey aligned across your Webflow and Shopify setup.

<!-- Standard redirect -->
<script defer src="https://cdn.uselooop.com/scripts/redirect.js"
       domain="YOUR_CUSTOM_DOMAIN">
</script>

<!-- Checkout redirect -->
<script defer src="https://cdn.uselooop.com/scripts/checkout-redirect.js"
       domain="YOUR_CUSTOM_DOMAIN"
       page="YOUR_PAGE_NAME">
</script>



Because Shopify handles all payment processing in its own checkout environment, cardholder data never touches your Webflow site. Shopify is certified Level 1 PCI DSS compliant, keeping your Webflow site outside PCI scope as long as you do not collect card numbers through Webflow forms.

What can you build with the Looop Webflow integration?

Integrating Looop with Webflow lets you build full headless Shopify storefronts without leaving Webflow or writing custom e-commerce code.

• Custom product pages with variant selection: Design product detail pages in Webflow with variant pickers, dynamic pricing, and inventory indicators that pull live data from Shopify. A store like Ear Buddies — a cloneable Looop template on Webflow — shows how product images, size options, and add-to-cart buttons connect to Shopify through Looop attributes on standard Webflow elements.  
• Multi-region storefronts with localized pricing: Use Shopify Markets support to display region-specific currencies and pricing across a single Webflow site. A Shopify merchant selling internationally can build one storefront in Webflow and let Looop deliver the correct pricing per visitor location, without duplicating pages or collections for each market.  
• CMS-driven collection pages with live inventory: Build collection and category pages using Webflow CMS collection lists populated by synced Shopify data. A fashion brand could display product grids that automatically reflect Shopify stock levels, showing "sold out" states in real time without manual CMS updates.  
• Review-integrated storefronts with analytics tracking: Combine Looop's Okendo integration with Google Analytics or Fathom tracking to build storefronts that display customer reviews alongside products while tracking e-commerce events. A direct-to-consumer brand can show star ratings, review carousels, and question widgets on product pages while capturing purchase funnel data, all configured through LooopConfig and Webflow attributes.

These examples show that Looop is designed for both custom storefront presentation and day-to-day Shopify-backed commerce operations.

For page-specific embed needs, you can also place scripts directly on the canvas using a Code Embed element instead of the site-wide custom code section. Check the Looop documentation for the full attribute reference when building custom layouts beyond the cloneable templates.