Webflow Shopify Integration: Connect Design with Ecommerce (2025)

Webflow’s visual design capabilities combined with Shopify’s ecommerce infrastructure creates powerful possibilities. Whether you need to embed products in a Webflow marketing site or build a fully custom storefront, this guide covers your options.

Shopify

integrates with

Webflow

CMS

Understanding the Integration Landscape

Related: Internal Link Finder.

Webflow and Shopify serve different primary purposes:

Why integrate both?

• Use Webflow’s superior design for marketing pages
• Leverage Shopify’s checkout for higher conversion
• Access Shopify’s app ecosystem and fulfillment
• Maintain design consistency across marketing and store

Integration Options

Option 1: Buy Button Embeds (Simplest)

Embed Shopify products directly in Webflow pages.

How it works:

1. Create products in Shopify
2. Generate Buy Button code
3. Embed in Webflow pages
4. Customers checkout through Shopify

Best for:

• Adding products to existing Webflow site
• Simple product catalogs
• Landing pages with purchase options
• Testing before full integration

Limitations:

• Cart experience is a popup/slide-out
• Limited customization of buy button appearance
• Products not searchable on Webflow site
• Separate management of content and products

Option 2: Hybrid Site Architecture

Run both platforms with strategic linking.

Site Architecture:
├── Webflow (yoursite.com)
│   ├── Homepage
│   ├── About, Contact, Blog
│   └── Marketing landing pages
│
└── Shopify (shop.yoursite.com or yoursite.com/products)
    ├── Product listings
    ├── Product pages
    ├── Cart and checkout
    └── Customer accounts

Best for:

• Brands wanting both design freedom and robust ecommerce
• Sites with significant non-commerce content
• Gradual migration from one platform to another

Option 3: Headless Commerce (Most Advanced)

Use Shopify as backend with Webflow as custom frontend.

How it works:

1. Webflow displays all content and product info
2. Shopify Storefront API handles cart, checkout, inventory
3. Custom JavaScript connects the two
4. Orders process through Shopify backend

Best for:

• Complete design control requirements
• Custom user experiences
• Brands with development resources
• High-traffic, high-conversion priority sites

Step-by-Step: Buy Button Integration

Step 1: Create Buy Button Channel in Shopify

1. Go to Shopify Admin > Sales Channels
2. Click + Add sales channel
3. Search for Buy Button
4. Click Add channel

Step 2: Generate Buy Button Code

1. Go to Buy Button in sales channels
2. Click Create a Buy Button
3. Select product(s) to embed
4. Customize appearance:
   • Button text
   • Colors
   • Layout (inline, basic, full page)
   • Cart style (popup, page, none)
5. Click Generate code
6. Copy the embed code

Step 3: Add to Webflow

1. In Webflow Designer, go to your page
2. Add an Embed element where you want the product
3. Paste the Shopify Buy Button code
4. Publish your Webflow site

Step 4: Test the Integration

1. Visit your Webflow page
2. Click the Buy Button
3. Add product to cart
4. Complete test checkout
5. Verify order appears in Shopify

Advanced: Hybrid Architecture Setup

Configure Subdomains

Option A: Shopify on subdomain

yoursite.com → Webflow (DNS A record)
shop.yoursite.com → Shopify (CNAME)

Option B: Shopify on subfolder (requires proxy)

yoursite.com → Webflow
yoursite.com/shop/* → Shopify (reverse proxy)

Subfolder approach is SEO-optimal but technically complex.

Link Navigation

Ensure seamless navigation between platforms:

<!-- In Webflow navigation -->
<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/blog">Blog</a>
  <a href="https://shop.yoursite.com">Shop</a>
</nav>

Tips:

• Use consistent header/footer styling
• Match brand colors exactly
• Use same fonts (custom font loading may differ)
• Maintain consistent navigation structure

Style Consistency

Create a shared design system:

Advanced: Headless Commerce Setup

Architecture Overview

┌─────────────────────────────────────────────┐
│                  Webflow                     │
│         (Frontend / Presentation)            │
│                                              │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  │
│  │ Product  │  │   Cart   │  │ Checkout │  │
│  │  Pages   │  │  Widget  │  │  Button  │  │
│  └────┬─────┘  └────┬─────┘  └────┬─────┘  │
└───────┼─────────────┼─────────────┼─────────┘
        │             │             │
        ▼             ▼             ▼
┌─────────────────────────────────────────────┐
│         Shopify Storefront API               │
│                                              │
│  Products │ Collections │ Cart │ Checkout   │
└─────────────────────────────────────────────┘
        │
        ▼
┌─────────────────────────────────────────────┐
│            Shopify Admin                     │
│  Orders │ Inventory │ Customers │ Analytics │
└─────────────────────────────────────────────┘

Implementation Requirements

Technical requirements:

• Storefront API access token
• Custom JavaScript development
• Cart state management (localStorage or cookies)
• Checkout URL generation

Sample product fetch:

// Fetch product from Shopify Storefront API
async function getProduct(handle) {
  const query = `
    query getProduct($handle: String!) {
      product(handle: $handle) {
        id
        title
        description
        images(first: 5) {
          edges {
            node {
              url
              altText
            }
          }
        }
        variants(first: 10) {
          edges {
            node {
              id
              title
              price {
                amount
                currencyCode
              }
              availableForSale
            }
          }
        }
      }
    }
  `;

  const response = await fetch('https://your-store.myshopify.com/api/2024-01/graphql.json', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Shopify-Storefront-Access-Token': 'your-storefront-token'
    },
    body: JSON.stringify({ query, variables: { handle } })
  });

  return response.json();
}

Third-Party Solutions

Tools that simplify Webflow-Shopify headless:

SEO Considerations

Single Domain Benefits

If possible, keep everything on one domain:

• All SEO equity consolidated
• Simpler Google Search Console
• Cleaner analytics
• Better user experience

If Using Subdomains

shop.yoursite.com setup:
├── Add to Google Search Console separately
├── Set up cross-domain tracking in GA4
├── Ensure consistent meta tags
├── Build internal links between properties
└── Use canonical URLs appropriately

Product Page SEO

Whether using Buy Buttons or hybrid:

• Product pages should live on Shopify
• Use proper schema markup (Shopify handles this)
• Build links to product pages
• Include products in XML sitemap

When to Choose Each Approach

Use Buy Buttons When:

• You have an existing Webflow site
• Only need to sell a few products
• Want minimal development work
• Testing product-market fit

Use Hybrid Architecture When:

• Both marketing and commerce are priorities
• You have 50+ products
• Want full Shopify ecommerce features
• Can manage two platforms

Use Headless When:

• Design control is paramount
• You have development resources
• Performance is critical
• You need unique customer experiences

Troubleshooting

Buy Button Not Loading

Possible causes:

• JavaScript blocked or error
• Wrong embed code
• Shopify store inactive

Solutions:

1. Check browser console for errors
2. Verify embed code is complete
3. Test in incognito mode
4. Regenerate Buy Button code

Cart Not Syncing

Possible causes:

• Multiple domains (cookie issues)
• Cart channel misconfigured
• Browser blocking third-party cookies

Solutions:

1. Use Shopify’s hosted checkout
2. Enable cross-domain tracking
3. Test in different browsers

Style Conflicts

Possible causes:

• CSS conflicts between platforms
• Webflow custom code interfering
• Iframe styling issues

Solutions:

1. Use Shopify’s appearance customization
2. Wrap embeds in styled containers
3. Use CSS specificity to override

Cost Comparison

Note: Headless development can cost $10,000-50,000+ depending on complexity.

Best Practices

Design Consistency

• Create a shared style guide
• Use same fonts and colors
• Match button and form styles
• Consistent photography style

Performance

• Optimize images on both platforms
• Minimize JavaScript on Webflow
• Use Shopify CDN for product images
• Monitor page load times

Analytics

• Set up cross-domain tracking
• Track funnel through both platforms
• Monitor conversion by traffic source
• Compare Shopify and Webflow analytics

2025 Snapshot

Quick benchmarks for the Webflow workflow. Use these as planning ranges, then validate against your own data.

Next Steps

After planning your integration:

1. Audit your needs - List all pages and features required
2. Choose approach - Buy Button, hybrid, or headless
3. Start simple - Test with Buy Buttons first
4. Measure results - Track conversion and user experience
5. Iterate - Expand integration based on data

# List the 5 most recent orders (GraphQL)
curl -X POST "https://your-store.myshopify.com/admin/api/2025-01/graphql.json" \
  -H "X-Shopify-Access-Token: $SHOPIFY_ADMIN_TOKEN" \
  -H "Content-Type: application/json" \
  -d "{\"query\":\"{ orders(first: 5, sortKey: CREATED_AT, reverse: true) { edges { node { id name createdAt totalPriceSet { shopMoney { amount currencyCode } } customer { email } } } } }\"}"

Sources

• Webflow on Shopify App Store
• Shopify: Headless commerce overview
• Shopify: Landing page guide

Need pure Shopify design flexibility? Consider Shopify 2.0 themes with sections everywhere. For marketing automation, see Klaviyo Shopify integration.