Webflow Shopify Integration: How to Set It Up

Shopify handles ecommerce brilliantly. Webflow handles design brilliantly. But using both together? That takes some setup.

Webflow Shopify integration lets you build a custom storefront in Webflow while running your entire online store through Shopify’s backend.

You keep Shopify’s payment processing, inventory management, and checkout. You gain complete design freedom without template limitations.

This guide walks through the complete process: creating your product catalog, setting up CMS Collections, generating embed code, and connecting everything with dynamic embeds.

Eight steps. About 30 minutes of work. No coding required.

By the end, you will have a fully functional headless storefront combining both platforms.

What Is Webflow Shopify Integration?

Webflow Shopify integration connects two platforms: Webflow for custom storefront design and Shopify for backend ecommerce operations.

You get Webflow’s visual website editor paired with Shopify’s payment processing, inventory management, and order fulfillment.

The result? A design-first ecommerce site without sacrificing shopping cart functionality.

This setup works through Shopify Buy Button embed code placed inside Webflow CMS Collections.

Each product syncs via unique identifiers (Product ID and Product Component) that link your Webflow frontend to Shopify’s checkout system.

Store owners typically need this integration when Webflow Ecommerce lacks specific features they require, or when they want complete design freedom while keeping Shopify’s robust sales channel setup.

This guide covers 8 steps, requires 20-45 minutes, and assumes basic familiarity with both platforms.

Prerequisites

Gather these before starting:

• Shopify account (Basic plan minimum, $29/month)
• Webflow account (Basic site plan or CMS plan)
• At least one product added to Shopify with title, description, price, and images
• Access to Shopify admin dashboard
• Access to Webflow Designer

Time estimate: 20-45 minutes depending on product count.

Skill level: Beginner to intermediate.

You should understand how to use Webflow at a basic level, particularly working with CMS Collections and the Elements panel.

Step One: How Do You Create a Shopify Account and Add Products?

Go to shopify.com and start a free trial. Enter your store name, email, and password. Shopify walks you through initial setup.

Adding Your First Product

Navigate to Products > Add product in the Shopify admin dashboard.

Fill in these required fields:

• Title: Product name customers see
• Description: Details, features, specifications
• Price: Set in your store’s currency
• Images: Multiple angles recommended
• Inventory: Stock quantity and SKU

Click Save when finished.

Why This Step Matters

The product catalog you build here becomes the source for everything displayed on your Webflow site.

Shopify handles inventory management, payment gateway connections, and order processing.

Your Webflow frontend simply pulls product data and redirects customers to Shopify checkout when they click buy.

Step Two: How Do You Set Up a Webflow Collection for Products?

Open your project in Webflow Designer. Click the CMS panel icon (database symbol) in the left sidebar.

Creating the Collection Structure

Click Create New Collection.

Name it something like “Shopify Products” or “Store Items.” You cannot use “Products” alone since Webflow reserves that name for its native ecommerce.

Add these Collection fields:

• Name (Plain Text): Product title for display
• Product ID (Plain Text): Unique Shopify identifier
• Product Component (Plain Text): Second unique identifier from embed code
• Brief Description (Plain Text): 40-50 word summary
• Featured Image (Image): Product photo for your design
• Price (Plain Text): Display price on your site

Click Create Collection.

Why This Step Matters

This CMS Collection becomes the bridge between platforms.

Dynamic embeds only work with responsive design elements tied to Collections, so you need this structure before adding any Shopify content to Webflow.

Step Three: How Do You Generate the Shopify Buy Button Embed Code?

Return to your Shopify admin. Look for Sales Channels in the left navigation.

Enabling the Buy Button Channel

If you do not see Buy Button listed, add it first.

Go to Settings > Apps and sales channels > Shopify App Store.

Search “Buy Button channel” and install it. Takes about 30 seconds.

Generating the Embed Code

Click Buy Button in your sales channels.

Select “Create a Buy Button” and choose a single product.

Customize appearance: button color, layout, text. Match your Webflow site’s design system for consistent user experience.

Click Generate code.

You will see a block of JavaScript and HTML. Keep this tab open.

Why This Step Matters

This embed code contains the Product ID and Product Component values you need for Webflow.

The code also loads Shopify’s shopping cart functionality onto your no-code platform site, enabling checkout experience without additional development.

Step Four: How Do You Extract the Product ID and Product Component from Shopify Code?

Copy the entire embed code from Shopify. Paste it into a code editor like Visual Studio Code or Sublime Text for easier reading.

Finding Product Component

Look for a line containing id='product-component- followed by letters and numbers.

Copy only the string after “product-component-” (example: 4f4049cfca7).

Finding Product ID

Scroll to approximately line 34. Find id: followed by numbers in single quotes.

Copy those numbers (example: 9192428739).

Why This Step Matters

These two values act as unique identifiers connecting each Webflow Collection item to the correct Shopify product, ensuring customers see accurate pricing and checkout redirects.

Step Five: How Do You Add Product Data to the Webflow Collection?

Return to Webflow Designer. Open the CMS panel and select your Shopify Products Collection.

Creating Collection Items

Click New Item.

Fill in each field:

• Name: Match your Shopify product title
• Product Component: Paste the string from Step Four
• Product ID: Paste the number from Step Four
• Brief Description: Write 40-50 words
• Featured Image: Upload product photo
• Price: Enter display price

Click Create. Repeat for each product.

Why This Step Matters

Each Collection item represents one product in your catalog. The dynamic content management system pulls these values when rendering your storefront.

Step Six: How Do You Add a Dynamic Embed to Your Webflow Page?

Navigate to the page where products should appear. Press A to open the Add Elements panel.

Adding a Collection List

Drag a Collection List element onto your canvas.

Connect it to your Shopify Products Collection in the settings panel.

Style the Collection List wrapper and individual items to match your user interface design.

Adding the Embed Element

Inside the Collection Item, add an Embed element from Components.

Position it where the buy button should appear. Leave it empty for now.

Why This Step Matters

Collection Lists display dynamic content from your CMS. The embed element inside will hold your Shopify Buy Button code, creating the bridge between custom design and ecommerce functionality.

Step Seven: How Do You Connect the Embed Code to Dynamic Collection Fields?

Click your Embed element. Open the code editor by clicking the gear icon.

Pasting and Modifying the Code

Paste your Shopify embed code into the editor.

Find the Product Component value in the code. Highlight it completely.

Click +Add Field in the top right corner. Select Product Component from your Collection fields.

Repeat for the Product ID value. Highlight it, click +Add Field, select Product ID.

Why This Step Matters

This replacement turns static code into dynamic code. Each Collection item now pulls its own unique identifiers, so every product displays the correct buy button linked to the right Shopify checkout.

Step Eight: How Do You Publish and Test the Integration?

Click the Publish button in the top right corner of Webflow Designer.

Publishing Your Site

Select your domain (staging or production). Click Publish to Selected Domains.

Wait 30-60 seconds for deployment.

Testing the Integration

Visit your published URL. Buy buttons will not appear in the Designer canvas, only on the live site.

Click each product’s buy button. Verify the Shopify checkout opens with correct product name, price, and image.

Test cross-browser compatibility on Chrome, Safari, Firefox, and Edge.

Check mobile viewport functionality on iOS and Android devices.

Verification

Confirm these items after publishing:

• Buy buttons render on live site (not visible in Designer)
• Each button opens Shopify checkout with correct product
• Prices match between Webflow display and Shopify checkout
• Cart adds items correctly when buying multiple products
• Mobile responsiveness works across device sizes
• Call-to-action buttons function on touch screens

Troubleshooting

Buy Button Not Appearing After Publish

Check embed code placement sits inside Collection List. Verify Product Component field contains correct string without extra spaces. Republish site and clear browser cache.

Wrong Product Appears in Checkout

Product ID field in Webflow does not match the id: value from Shopify embed code. Update Collection item with correct numbers. Republish.

Embed Code Not Generating in Shopify

Buy Button channel not installed. Go to Settings > Apps and sales channels > Shopify App Store. Search and add “Buy Button channel.”

Collection List Not Displaying Products

Collection contains zero items, or Collection List connects to wrong Collection. Add at least one Collection item. Verify connection in settings panel.

Checkout Styling Looks Different

Shopify checkout uses its own CSS styles independent of Webflow. Customize checkout appearance in Shopify admin under Online Store > Themes > Customize.

Alternative Integration Methods

Method A: Shopify Buy Button

Time: 20-45 minutes. Complexity: Beginner. Best for small catalogs under 50 products with basic cart needs.

Method B: Third-Party Tools

Shopyflow, Smootify, and Looop offer automated product sync between platforms.

Time: 1-2 hours. Complexity: Intermediate. Best for larger catalogs needing real-time inventory updates.

These tools eliminate manual Collection item creation, pulling product data directly via API connections.

Method C: Shopify Storefront API

Full headless commerce setup requiring custom code development.

Time: 4-8 hours. Complexity: Advanced. Best for custom checkout flows, complex product filtering, or multi-currency support.

Choosing Your Method

Use Method A for simple stores prioritizing design over advanced features.

Use Method B when manual sync becomes tedious or inventory changes frequently.

Use Method C when native solutions cannot meet specific business requirements.

Related Processes

• How to create a form in Webflow for contact and support pages
• How to add Google Analytics to Webflow for conversion tracking
• How to set up 301 redirects in Webflow for URL management
• How to create a blog in Webflow for content marketing
• Connecting Shopify to payment gateways (Stripe, PayPal)
• Using Figma to Webflow workflows for design handoff

FAQ on Webflow Shopify Integration

Can You Connect Webflow to Shopify?

Yes. You connect Webflow to Shopify using the Shopify Buy Button sales channel and Webflow’s dynamic embeds feature.

Products sync through embed code containing unique Product ID and Product Component values stored in Webflow CMS Collections.

Do You Need a Webflow Ecommerce Plan for Shopify Integration?

No. You need a Webflow Basic or CMS site plan, not an Ecommerce plan.

Shopify handles all payment processing and checkout. Webflow only displays products and hosts your custom storefront design.

Where Does Checkout Happen With This Integration?

Checkout happens on Shopify’s platform. When customers click the buy button, they redirect to Shopify’s secure checkout page.

You cannot embed Shopify checkout directly into Webflow pages.

Does Inventory Sync Automatically Between Platforms?

Stock levels update automatically on the Shopify side. Buy buttons pull real-time inventory data.

Product details like titles and prices in Webflow Collections require manual updates unless you use third-party tools like Shopyflow or Smootify.

What Are the Limitations of Webflow Shopify Integration?

Checkout styling stays within Shopify’s control. Advanced features like multi-currency, complex discount codes, and loyalty programs need workarounds.

Managing two platforms increases maintenance compared to single-platform solutions.

How Much Does This Integration Cost?

Costs combine both platform fees. Shopify Basic runs $29/month. Webflow CMS plans start at $23/month.

Third-party integration tools like Shopyflow add additional monthly costs depending on product count and features.

Can You Use Shopify Apps With Webflow?

Most Shopify apps work since checkout and order processing happen on Shopify. Apps affecting storefront display may not transfer to your Webflow landing page design.

Test critical apps before full deployment.

Is Webflow Shopify Integration Good for Large Product Catalogs?

Manual setup becomes tedious beyond 50 products. Each item requires copying embed code and creating Collection items individually.

Large catalogs benefit from automated tools or the Shopify Storefront API approach instead.

How Do You Style the Shopify Buy Button in Webflow?

Customize button appearance in Shopify before generating embed code. Options include colors, fonts, layout, and button text.

Further styling requires custom code added to the embed.

What Happens if a Product Sells Out?

Shopify automatically disables the buy button for out-of-stock items. Customers see “Sold Out” or similar messaging based on your Shopify settings.

No manual Webflow updates needed for inventory changes.

Conclusion

Webflow Shopify integration gives you design-first ecommerce without sacrificing robust sales channel functionality.

You have learned to generate embed code, configure CMS Collections, and connect products using dynamic embeds with unique identifiers.

The Shopify Buy Button method works well for smaller catalogs. Third-party tools like Shopyflow and Smootify handle larger product sync needs. The Storefront API suits advanced custom requirements.

Each approach balances design flexibility against setup complexity differently.

Your next step: decide which method fits your catalog size and technical comfort level. Start with the Buy Button if you have under 50 products. Scale up to automated tools when manual updates become a bottleneck.

Both platforms excel at what they do. Together, they create a custom ecommerce storefront that neither could deliver alone.