Overview

1. Create a product collection in Webflow
2. Add products from Shopify
3. Add an embed component to your collection list in Webflow
4. Replace unique ID's

Create a product collection in Webflow

Once you have a Shopify account up and products set up, you'll need to create a 'products' collection in Webflow. In this example, we will be selling different gym memberships

Create the following fields:

• Name (Plain text)
• Description (Rich text field)
• Product image (image field)
• Price (Number field)
• Product component (Plain text)
• Product ID (Plain text)

The product component and product ID are 'unique identifiers,', which will enable Webflow to pull in the correct product from Shopify for each collection item.

Now add your Shopify products into the Webflow 'products' collection:

Grab the product component and ID from Shopify

First, you need to generate an embed code for your products in Shopify by creating a 'Buy' button. To generate the buy button option, click the + icon under the sales channels in the left hand menu:

‍

Now generate the embed code:

1. Click Buy Button
2. Select a product
3. Click 'Next' or 'Generate Code'

There are a number of ways you can style your buy button, from 'Add to Cart' which may be useful if you want to enable a user to purchase multiple products, or a direct to checkout option to enable a quick checkout. along with options for full product descriptions from Shopify to a

standalone button. A few options are highlighted below. For this example we want to keep all of our styling in Webflow to give us the most customizability, so we have gone for the basic button.

‍

In the code generated you will find the product ID and product component here:

‍

Copy these values from the generated code in Shopify and paste them into the corresponding fields for your product in the Webflow CMS collection. Make sure you do this for each product as the codes will differ for each one

Add an embed component to your product collection in Webflow

Create a collection list or collection page for your products in Webflow. In this example we will use a collection list. Add an embed to your collection list where you want your Buy Button to be.

‍

Copy the embed code from Shopify and paste it into the embed (use the same steps we used to get the unique identifiers).

Here you can choose your button style. You can select an option to pull in the product, image and name from Shopify whilst the other or a simple buy button (we chose the latter in this example). Paste the embed code into our HTML embed in Webflow.

Now we will need to replace the unique ID's in our dynamic embed to the relevant fields we created in our collection item. This will ensure each product in Webflow is linked to the relevant product in Shopify and avoid all the collection items linking to the same Shopify product.

Highlight the Product component (which appears twice) and product ID , then click +Add Field to to use the dynamic fields we created in our collection item.

‍

Save & close and hit publish. Done!