How to Add Shopify Products to a Webflow Site (Without Webflow Ecommerce)

Most guides for connecting Shopify to Webflow involve setting up CMS collections, extracting product IDs from embed code, using headless tools like Shopyflow or Smootify, or converting your entire Webflow site into a Shopify theme. That’s fine if you’re building a full storefront.

But if you just want to sell a few products from your existing Webflow site (a portfolio, a blog, a landing page) without rebuilding it as a store, there’s a much simpler approach.

Why this matters for Webflow users

Webflow attracts people who care about design. You’ve spent time getting your layout, typography, and spacing exactly right. The last thing you want is a clunky shopping cart widget that doesn’t match anything on your site.

Webflow does have its own ecommerce plans, but they start at $29/month, come with product limits, and require you to manage checkout, payments, taxes, and shipping within Webflow’s system. If you already have a Shopify store handling all of that, paying for Webflow ecommerce too is redundant.

The better setup: keep Webflow as your website, keep Shopify as your commerce backend, and connect them with an embed. Your Webflow site stays exactly how you designed it. Shopify handles everything behind the scenes.

The native Shopify Buy Button on Webflow

Shopify’s built-in Buy Button channel generates an embed code you can paste into a Webflow Embed element. It works, but Webflow users run into the same issues everyone does with the native Buy Button: no cart that persists across pages, no subscriptions, no discount codes, and limited styling that fights against your carefully crafted design system.

The native Buy Button also requires a tedious process if you have more than a couple of products. You need to set up CMS collections in Webflow, extract product component IDs and product IDs from the embed code using a text editor, create dynamic embeds, and replace values with CMS fields. Webflow’s own documentation walks through this, and it’s multiple pages of steps.

For a full storefront, that complexity might be worth it. For selling a handful of products from a content site, it’s overkill.

The simpler approach: Buy Button Plus

Buy Button Plus skips the CMS collection setup entirely. You create a buy button in the Shopify app, copy a single line of embed code, and paste it into a Webflow Embed element on any page. That’s the whole process.

The cart works across your entire Webflow site. A visitor can add a product on one page, navigate to another, add something else, and check out from anywhere. No CMS collections, no product ID extraction, no dynamic embeds.

For Webflow users specifically, the Pro plan’s custom CSS support is worth highlighting. You can write CSS that targets the buy button elements directly, matching your Webflow design system (fonts, spacing, colors, border radius, hover states) with precision.

Step-by-step setup

Matching your Webflow design

Webflow users tend to have specific design systems: particular fonts, spacing scales, color palettes, and interaction patterns. A generic-looking buy button embedded in the middle of a carefully designed page stands out in the wrong way.

Buy Button Plus gives you two levels of customization. In the dashboard, you can set colors, fonts, button text, and layout without writing any code. That covers most cases.

On the Pro plan ($14.99/month), you get full custom CSS. This means you can target the buy button container, the price display, the variant selector, and the add-to-cart button individually. If your Webflow site uses a specific border radius, hover transition, or font stack, you can match it exactly.

When to use this vs Webflow Ecommerce

Webflow’s own ecommerce plans let you manage products, checkout, and payments entirely within Webflow. If you want a full online store designed and managed in Webflow, that’s the right choice.

But Webflow ecommerce starts at $29/month, has product limits (500 items on the Standard plan), and means managing two separate commerce systems if you also have a Shopify store.

If you already use Shopify for your products, inventory, and orders, embedding Buy Button Plus on Webflow lets you keep one source of truth. Products sync automatically. Orders go into your existing Shopify admin. You don’t pay for a second ecommerce platform.

This approach works best for portfolios with a few products for sale, content sites or blogs that want to monetize with products, landing pages for specific campaigns or launches, and creator sites that sell merch or subscriptions alongside content.

Frequently asked questions