Shopify

What is Shopify: Shopify is an ecommerce platform that manages products, inventory, payments, and orders. Its Buy Button sales channel generates embeddable product widgets, including product cards and checkout buttons, that you can place on any website, including Webflow.

Community apps for Shopify–Webflow integration

The Buy Button method in this integration guide works for adding individual products to an existing Webflow site, but requires manual setup for each product. If you need a more complete storefront, Webflow's app ecosystem includes tools built specifically for Shopify–Webflow workflows:

• Shopyflow: Syncs Shopify products into Webflow CMS automatically and provides pre-built components for carts, product pages, and customer accounts. Design your storefront in Webflow while Shopify handles checkout and inventory. No Webflow ecommerce plan required.
• Liquiflow: Converts Webflow designs into Shopify 2.0 theme files using custom HTML attributes. The store runs entirely on Shopify's infrastructure after conversion, no ongoing sync required.

If the Buy Button approach fits your needs, here's how to set it up.

How to integrate Shopify with Webflow

This Shopify-Webflow integration uses Webflow's CMS and Code Embed elements to display Shopify products dynamically on Collection Pages and Collection Lists. Shopify handles checkout and order management; Webflow controls the design and layout.

This integration stores Shopify product identifiers in Webflow CMS collections and uses them to render the correct Buy Button for each Collection Item.

The setup follows these steps in sequence:

1. Create a Shopify account
2. Create a CMS collection for your products in Webflow
3. Add your products from Shopify
4. Add a Code Embed element to a Collection List or Collection Page
5. Get the embed code from Shopify
6. Replace the unique IDs with CMS fields

Let’s dive in!

Create a Shopify account

Set up a Shopify account and add the products you want to sell.

Once your store is ready, move on to step 2.

Create a collection for your products in Webflow

Create a CMS collection in Webflow to hold your product data.

In this example, the collection is named Products and includes these fields:

• Price (Number Field)
• Brief Description (Rich Text Field)
• Long Description (Rich Text Field)
• Thumbnail Image (Image)
• *Product ID (Plain Text Field)
• *Product Component (Plain Text Field)

*Unique identifier

The Product ID and Product Component fields act as unique identifiers that link each Webflow Collection Item to the correct Shopify product. You'll pull these values from the embed code Shopify generates, covered in step 3.

Add your products from Shopify

For each product, create a new item in your Webflow collection and fill in the Product ID and Product Component fields using the values from Shopify's embed code. Here's how to find them.

Get the Product ID and Product Handle

In your Shopify admin, go to Sales channels → Buy Button. If Buy Button doesn't appear in your sidebar, add it first from the Shopify App Store.

Then, follow these steps in sequence:

1. Click Create a Buy Button
2. Select Product Buy Button
3. Choose a product from your catalog
4. Customize the button layout and checkout behavior, then click Next
5. Copy the generated embed code

You'll find the Product Component and Product ID in the embed code. Copy each value and paste it into the corresponding fields in your Webflow collection:

• Product Component: the string of numbers and letters after product-component-
• Product ID: the string of numbers in brackets after id: in the embed code

Add a Code Embed element to a Collection List or Collection Page

Dynamic Embeds require a Collection Page or Collection List: they only work with dynamic content. In this example, a Code Embed element is added to a Collection List, but the same approach applies to a Collection Page.

Place the Code Embed element where you want the Buy Button to appear inside the Collection List.

Add a Code Embed element from the Add panel.

Get the embed code from Shopify

Return to Shopify's Buy Button channel and generate the embed code for each product following the same steps in the previous section.

Two embed types are available.

One includes the product image, name, and price pulled from Shopify. The other generates just the Buy Button.

For maximum layout control in Webflow, the button-only option is best; it lets you design the product display in Webflow and handle the purchase action in Shopify.

Copy the embed code and paste it into the Code Embed element added in the previous step. Paste the Buy Button code into the Code Embed element.

Replace the unique IDs with CMS fields

Without this step, every Buy Button on the page will point to the same product.

To connect each button to its corresponding Shopify product, replace the hardcoded Product Component and Product ID values in the embed code with the CMS fields created in step 2.

Select each value individually (the Product Component appears twice in the embed code) and use Add Field to replace it with the matching CMS field.

The Buy Button renders on the published site. It won't appear in Webflow's editor.

The button will appear on publish, but not in the editor.

‍

To add more products in the future:

1. Create a new item in your Products collection
2. Grab the unique identifiers from Shopify's embed code
3. Paste them into the corresponding collection fields

What you can build with the Shopify Webflow integration

Connecting Shopify's Buy Button with Webflow lets you add purchase functionality to an existing Webflow site without rebuilding your storefront or switching platforms.

Here are a few things you can build with this integration:

• Product showcase pages: Design custom product listing pages in Webflow's CMS with your own layouts, typography, and imagery, with a Shopify Buy Button handling checkout for each item
• Content-commerce hybrids: Add Buy Buttons to blog posts, editorial pages, or lookbooks so readers can purchase products without leaving the page
• Landing pages with embedded checkout: Build campaign or product-specific landing pages in Webflow with a single embedded Buy Button pointed at one Shopify product or collection

Portfolio or agency sites with light commerce: Add a small product catalog to an existing Webflow site (digital downloads, merchandise, or services) without setting up a full Shopify storefront