Add Shopify products to your Webflow site

Add products from Shopify to Webflow to create a customized store design.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

With a dynamic Shopify Buy button, you can add products from your Shopify account to your Webflow site. This lets you create a custom ecommerce store without relying on a prebuilt Shopify template. 

Before you get started: If you haven’t already, create a Shopify account and at least 1 item to sell. 

In this lesson, you’ll learn: 

  1. How to create a Webflow Collection for your Shopify products
  2. How to add your Shopify products to the Webflow CMS
  3. How to create a dynamic embed

How to create a Webflow Collection for your Shopify products

First, you’ll need to create a CMS Collection to store your Shopify products (e.g., “Shopify products,” “Shopify listings,” etc.) along with their product components and IDs (i.e., the unique identifiers for your Shopify products). Note that you can’t name your Collection “Products” since this name is reserved for Webflow Ecommerce products.

To create a Collection with the necessary Collection fields: 

  1. Open the CMS panel
  2. Click the “Create new Collection icon
  3. Give your Collection a name (e.g., “Shopify products,” “Shopify listings,” etc.) 
  4. Click Add new field 
  5. Choose Plain text 
  6. Name your field “Product component”
  7. Click Save field
  8. Click Add new field
  9. Choose Plain text
  10. Name your field “Product ID” 
  11. Click Save field
  12. (Optional) Add any additional Collection fields (e.g., price, description, image, etc.) 
  13. Click Create Collection, and keep this tab open for later reference! 

How to add your Shopify products to the Webflow CMS

To add your Shopify products to the Webflow CMS, you’ll need your product components and IDs from Shopify. These act as unique identifiers for your Shopify products and ensures that Webflow pulls in the correct product for each Collection item. You can pull the product components and IDs from your Shopify embed code. 

Generate your Shopify embed code 

To generate your Shopify embed code: 

  1. Go to the Buy Button sales channel in the Shopify App Store
  2. Click Add app
  3. Choose your Shopify account 
  4. Click Add sales channel
  5. Click Create a Buy Button
  6. Click Product Buy Button
  7. Choose your product 
  8. Click Select 
  9. Customize your buy button product widget however you like (e.g., layout style, action when people click, etc.) 
  10. Click Next
  11. Click Copy code, and keep this tab open for later reference! 

Then, you can find your product component and product ID within the embed code. We recommend using a code editor like Sublime Text or Visual Studio Code to navigate the code and find these values more easily. 

Note: If you closed the tab where your Webflow site was open, go to the CMS panel and choose your Shopify products Collection from the previous steps.

Create your product with product component and ID

To get the value for your product component and product ID and add them to a product in Webflow: 

  1. Paste your embed code into a code editor (e.g., Sublime Text or Visual Studio Code)
  2. Highlight and copy the string of numbers and letters after “product-component-” in the code — it should look something like this:
    <div id='product-component-4f4049cfca7'></div> 
  3. Return to your Shopify products Collection in Webflow
  4. Create a new Collection item to represent a product
  5. Paste the string of numbers and letters you copied from your code editor into the Product component field 
  6. Return to your embed code in the code editor 
  7. Highlight and copy the string of numbers between the single quotation marks after “id” — it should look something like this:
    id: '9192428739'
  8. Return to your Shopify products Collection item in Webflow
  9. Paste the string of numbers you copied from your code editor into the Product ID field 
  10. Click Create

Repeat the steps for generating your embed code and creating a product with a product component and ID for each Shopify product you want to add to Webflow (that is, to add more products in the future, you’ll need create a new Collection item, pull the unique identifiers (i.e., product component and product ID) from the Shopify embed code, and paste them into the corresponding Collection fields). 

Shopify product embed code open in a code editor. The product component appears highlighted in 2 places. The product ID appears highlighted once. 

How to create a dynamic embed

Dynamic embeds only work with dynamic content, which means you can only add them on Collection pages or in a Collection list on a static page. Since you’re referencing your Shopify products Collection, you’ll need to add your embed to the Collection page associated with your Shopify products Collection, or connect a Collection list to your Shopify products Collection. 

Note: If you closed the tab where your Shopify embed code was open, go to Shopify and copy the embed code you created in the previous steps.

To create a dynamic embed, you’ll need to add the Shopify embed code to your Webflow site and replace the product component and product ID in the embed with their corresponding Collection fields: 

  1. Go to Add panel > Advanced
  2. Add an embed element to the canvas where you want the Buy button to appear
  3. Paste the Shopify embed code in the Webflow code editor 
  4. Highlight the string of numbers and letters after the first mention of “product-component-” in the code
  5. Click Add field
  6. Choose your Product component field 
  7. Find the second place where “product-component-” appears in the code
  8. Highlight the string of numbers and letters after “product-component-” 
  9. Click Add field
  10. Choose your Product component field 
  11. Highlight the string of numbers between brackets after “id” 
  12. Click Add field
  13. Choose your Product ID field 
  14. Click Save & close 

When you’re ready, publish your site to check out your new embedded Shopify products.

Note: Your Shopify products won’t render on the Designer canvas — that is, you won’t be able to preview the embedded Shopify products in the Designer, and a placeholder will be shown in its place. Once you publish or export your site, the products will render (i.e., display) where you placed them. If you need to preview the embed before going live with your site on a custom domain, you can publish your site to the webflow.io staging subdomain

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top