How to dynamically embed Shopify products with Webflow CMS

Updated 
May 5, 2017
 

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 or preview this site in the Designer.

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:

  • 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 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.

The structure of the Collection in this example.
The structure of the Collection in this example.

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 Product Handle and Product Component 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:

  1. Click Buy Button in your main dashboard’s left-hand navigation
  2. Click Create a Buy Button in the upper right
  3. Select a product
  4. 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.

  • Product Component: grab the string of numbers and letters after "product-component-"this is where you find the component
  • Product ID: grab the string of numbers between brackets after the "id:" [this is where you find the ID] on line 34 of the embed

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.

Add an HTML embed component to your site where you want the buy button to be.
Add an HTML embed component from the Add panel.

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.

Paste in the embed code.
Paste the buy button code into the HTML embed.

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 Product Component and Product ID in our Dynamic Embed with our Collection fields.

To do this, just highlight the Product Component (it appears twice!) and Product ID values individually, and click +Add Field to replace the content with our own values.

Replace the Product Component and Product ID with fields from your Product Collection.
The button will appear on publish, but not in the Designer.

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.