How to dynamically embed Shopify products with Webflow CMS

With Dynamic Embeds, you can add products from your Shopify account to your Webflow sites using an embedded Shopify widget. This lets you create a custom ecommerce store, without relying on a pre-built Shopify template.

We’ll show you two examples in this article: one that demonstrates this feature within a Dynamic List, and another that uses it on a Collection Template page (i.e., the product detail page).

If you’d like, you can check out the final product in Webflow.

1. Create a Shopify account

To set this up on your site, you’ll need a Shopify account and a few items to sell. Once you’ve done that, you’ll be ready for step 2.

2. Create a Collection for your products in Webflow

Next, you’ll need to create a Webflow Collection to hold your products.

In this example, I’m creating a Collection named Products, with these Fields:

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

*Unique identifier

The Name, Product ID, and Product Handle act as “unique identifiers” for your Shopify products, ensuring that Webflow pulls in the right product for each Collection Item. We’ll cover how to find the Product ID and Product Handle in a later step.

3. Add your products from Shopify

For this step, simply add your products to the Collection you just created in step 2, using the instructions below to find the Name, Product Handle, and Product ID for each item.

How to get the Product ID and Product Handle

The Name, Product ID, and Product Handle act as unique identifiers for each of your products. You’ll pull them from the embed code you generate in Shopify for each item.

Here’s how to generate your embed code in Shopify:

Click Buy Button in your main dashboard’s left-hand navigation
Click Create a Buy Button in the upper right
Select a product
Click Generate embed code (in this example, we’ll use the Buy button only option)

You’ll find the Name, Product ID, and Product Handle in the embed code (screenshot below). Just copy these values from the code, and paste them into the corresponding fields you created in Step 2.

Name: grab the text inside the quotation marks following data-product_name=
Product Handle: grab the text inside the quotations marks following data-product_handle=
Product ID: grab the string of numbers after cart/ and before the colon in the URL at the end of the embed code

4. Add an Embed component to a Dynamic List or a Collection Template Page

Dynamic Embeds only work with dynamic content, so you need a Collection Template page or a Dynamic List to hold your embed.

For this example, we’ll use a Dynamic List, but adding your embed to a Collection Template Page is very similar.

So to get started, we’ll drop an Embed Component into a Dynamic List we’ve designed for our Products, placing it where we want the Buy Button to be.

5. Get the embed code from Shopify

Now it’s time to get the embed code from Shopify, following the same steps we took to find the unique identifiers in step 3.

There are two types of embeds you can use. One pulls in the product image, name, and price from Shopify, while the other option just creates the Buy button.

Which one you use depends on how customizable you want your store to be. For ultimate customizability, we’ll go with the button-only option.

Once we have the code copied to our clipboard, we’ll paste it into the embed we just added in Step 4.

5. Replace the Unique IDs

If we were to test our page now, each button would be exactly the same. Not what we want.

To link each Buy button to a distinct product, we need to replace the Name, Product Handle, and Product ID in our Dynamic Embed with our Collection fields.

To do this, just highlight the Name, Product Handle, and Product ID values individually, and click +Add Field to replace the content with our own values.

6. Done!

Your Dynamic Embed’s all set up.

To add more products in the future, you’ll just create a new Item in your Products Collection, grab the unique identifiers, and paste them into the corresponding fields.