Shopify

The Shopify Webflow integration pairs Shopify's mature commerce engine — inventory, checkout, shipping, taxes, payments, and multi-channel sales — with Webflow's design system. The important thing to know up front: this is not a native Webflow integration. There is no first-party Shopify connector built into Webflow, and no one-click install from the Designer. Brands combine the two in one of two ways: a headless storefront, where a third-party connector app syncs Shopify data into Webflow so Webflow renders the entire storefront, or a subdomain split, where Shopify runs at shop.brand.com and Webflow runs on the root domain. For mid-market and enterprise commerce, this is the dominant pattern — Shopify handles the store, Webflow handles the design and marketing site.

What Shopify adds to a Webflow site

• Full commerce backend — inventory, variants, shipping rates, tax calculation, and multi-location stock that Webflow Ecommerce cannot match.
• Checkout and payments — Shopify's conversion-optimized checkout plus Shopify Payments, Shop Pay, Apple Pay, Google Pay, PayPal, Klarna, and dozens of regional gateways.
• Operational depth — abandoned-cart recovery, fraud analysis, order editing, returns, fulfillment integrations, and Shopify POS for in-person sales.
• Scalable catalog — effectively unlimited products and variants, compared with Webflow's 500-product Standard cap and 50-variant limit.
• Multi-channel selling — sync the same catalog to Instagram, TikTok, Amazon, Google, and email, all managed from Shopify Admin.
• Designable storefront (headless) — full pixel control over product, collection, and cart pages in the Webflow Designer while Shopify powers the data and checkout.

Two ways to combine Shopify and Webflow

The Shopify Webflow integration has two architectures, and the choice drives everything else — setup effort, ongoing cost, SEO, and how much of the store you actually design in Webflow.

Headless uses a connector app (Storesynk, Smootify, or Looop) to pull your Shopify catalog into Webflow via the Storefront API. You design every visible page — product, collection, cart drawer — in Webflow, and Shopify handles checkout and orders behind the scenes. The result is the most design freedom available on Shopify, but it adds a connector subscription ($20–$100+/mo), requires developer setup, and means two systems to keep in sync.

Subdomain split keeps Shopify and Webflow entirely separate. Webflow runs on brand.com and www, while Shopify runs on shop.brand.com via a CNAME to shops.myshopify.com. Setup is faster — no connector, no Storefront API — but you maintain two sites, the Shopify storefront uses Shopify themes rather than Webflow design, and the subdomain split dilutes domain authority between two properties.

Most high-design DTC brands choose headless when the marketing budget supports it; most content-led brands running a smaller store choose the subdomain split for speed and simplicity.

How to set up Shopify on a Webflow subdomain

This is the faster architecture and needs no connector app.

1. Create and configure your Shopify store — add products, set up Shopify Payments or another gateway, and configure shipping and taxes.
2. In your DNS provider (wherever your Webflow domain's DNS lives), add a CNAME record with the name shop pointing to shops.myshopify.com.
3. In Shopify Admin, go to Settings → Domains, click Connect existing domain, and enter shop.yourdomain.com.
4. Wait for Shopify to verify the domain. Verification usually completes in minutes but can take several hours depending on DNS propagation.
5. Optionally set shop.yourdomain.com as the primary domain in Shopify so checkout URLs stay on your subdomain.
6. Keep Webflow on the apex (yourdomain.com) and www; only the shop subdomain points to Shopify.
7. Add a "Shop" link in your Webflow nav pointing to shop.yourdomain.com and a "Back to site" link in Shopify pointing to your Webflow root, then test checkout end to end and publish both sites.

How to build a headless Shopify + Webflow storefront

The headless path gives you full design control and needs a connector app plus developer setup.

1. Create a Shopify store and add your products, collections, pricing, shipping, and tax configuration.
2. Install the Headless sales channel in Shopify Admin, then create a store app and generate Storefront API access tokens under Apps → Develop apps.
3. Install a connector — Storesynk (formerly Shopyflow), Smootify, or Looop — from the Shopify App Store and connect it to both Shopify and your Webflow project using the Storefront API token.
4. Let the connector sync your Shopify catalog into Webflow CMS collections (products, variants, collections), mapping Shopify fields to Webflow fields.
5. Build your product, collection, and cart templates in the Webflow Designer using the connector's pre-built components — product cards, buy buttons, cart drawers — bound to the synced Shopify data.
6. Configure the checkout handoff so add-to-cart and checkout route to Shopify's checkout on your domain, then test a real transaction end to end before publishing.

Shopify + Webflow pricing

There is no bundled pricing. You pay for Shopify, the connector (if headless), and Webflow separately, plus transaction fees on every sale unless you use Shopify Payments.

Shopify vs. Webflow Ecommerce

For small catalogs and design-led single-product stores, Webflow's native Ecommerce can be enough. For anything larger or more operationally complex, Shopify pulls ahead on every commerce axis.

Best use cases

High-design DTC brands

Run a pixel-perfect headless storefront where Webflow designs every product and collection page and Shopify handles checkout, inventory, and multi-channel sales.

Brand marketing site plus full store

Keep the editorial Webflow site on the root domain and send shoppers to shop.brand.com on Shopify — the fastest pattern for established brands adding commerce.

B2B catalog with quote handoff

Present a large catalog on Webflow with custom layouts, then hand off quote requests and bulk orders to Shopify checkout and inventory.

Subscription commerce

Use Shopify Subscriptions on a headless storefront so customers browse and manage recurring orders through Webflow-designed pages.

International, multi-language stores

Combine Webflow Localization for the marketing site with Shopify Markets for localized pricing, taxes, and checkout across regions.

Limitations to know

• Not native. Every Shopify Webflow integration depends on a third-party connector (Storesynk, Smootify, Looop) for headless builds, which adds cost and a vendor dependency — Storesynk itself rebranded from Shopyflow in 2026, illustrating vendor churn.
• Two sites to maintain. Both architectures mean you run two platforms, two billing relationships, and two publish workflows, with no shared cart between Webflow pages and the Shopify store.
• Checkout styling is limited. Shopify retired checkout.liquid across 2024 and 2025 and now requires Checkout Extensibility, so even on Shopify Plus your checkout design is constrained to approved app extensions rather than full custom code.
• Subdomain splits SEO authority. Routing shop.* to Shopify means product-page SEO lives with Shopify, not Webflow, splitting domain authority between two properties.

Related Webflow integrations

• Stripe — the lighter native alternative for simple catalogs and single-product checkout without a second platform.
• Mailchimp — sync Shopify and Webflow customers into email campaigns and abandoned-cart flows.
• Blog: 20 Best Webflow Integrations to Use in 2026.
• Blog: Best ecommerce Webflow templates 2026.