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 Collection List, and another that uses it on a Collection Page (i.e., the product detail page).
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.
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:
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.
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.
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:
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.
Dynamic Embeds only work with dynamic content, so you need a Collection Page or a Collection List to hold your embed.
For this example, we’ll use a Collection List, but adding your embed to a Collection Page is very similar.
So to get started, we’ll drop an Embed Component into a Collection List we’ve designed for our Products, placing it where we want the Buy Button to be.
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.
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.
Your Dynamic Embed’s all set up.
To add more products in the future, just: