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).
- Create a Shopify account
- Create a Collection for your products in Webflow
- Add your products from Shopify
- Add an Embed component to a Collection List or a Collection Page
- Get the embed code from Shopify
- Replace the Unique IDs
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.
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)
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.
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.
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.
- 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
Add an Embed component to a Collection List or a Collection Page
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.
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.
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.
Your Dynamic Embed’s all set up.
To add more products in the future, just:
- Create a new Item in your Products Collection
- Grab the unique identifiers
- Paste them into the corresponding fields