Integrate a Shopify store into your Webflow website

1. Create a Shopify account

In this tutorial, Sacha, cofounder of the Gemeos Webflow agency, shows you how to integrate a Shopify store into your Webflow site.

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

‍

2. Create a collection for your products in Webflow

In this example, I’m creating a collection called 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 like unique identifiers for your Shopify products, making sure Webflow pulls the right product for each collection item. I’ll explain how to find the Product ID and Product Component in a later step.

‍

3. Add your products from Shopify

1. Go to the Buy Button tab and click “Create a Buy Button”

‍

2. Select the product you want to sell on Webflow

‍

3. Generate the Shopify embed code

‍

4. Copy the Product Component in the Shopify embed code

‍

5. Paste the Product Component into the matching field

‍

6. Copy the Product ID in the Shopify embed code

‍

7. Paste the Product ID into the matching field

‍

4. Add the Shopify module in Webflow

1. Add an Embed component to your page or collection list (place it wherever you want the buy button to appear)

‍

2. Replace the Product Component and Product ID in your Embed with your Collection fields to link each buy button to a separate product. To do this, simply highlight the Product Component values (it appears twice!) and the Product ID, then click + Add Field to replace the content with your own values.

‍

5. Publish and wait for your first sales

Your Dynamic Embed is set up — now all you have to do is wait for those first sales with Webflow ecommerce.

‍