Overview
- Create a product collection in Webflow.
- Add Shopify products to the collection.
- Insert an embed component into the Webflow collection list.
- Replace unique IDs.
Creating a Product Collection in Webflow
After setting up a Shopify account and configuring your products, follow these steps to create a "products" collection in Webflow. In this example, we’ll focus on selling gym memberships.
Create the following fields for the collection:
- 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 serve as unique identifiers that allow Webflow to fetch the correct product from Shopify for each collection item.
Now, add your Shopify products into the Webflow "products" collection:
Obtaining the Product Component and ID from Shopify
To generate an embed code for your Shopify products, create a "Buy" button in Shopify. Follow these steps:
- Click the "+" icon under the sales channels in the left-hand menu.
- Select "Buy Button" to generate the embed code.
- Choose a product and proceed with the options.
- Click "Next" or "Generate Code" to finalize.
There are various styling options for the buy button, such as "Add to Cart" for purchasing multiple products or a direct checkout option. In this example, we’ll use the basic button and keep most of the styling in Webflow for flexibility.
In the generated code, locate the product ID and product component:
Copy these values from the Shopify code and paste them into the corresponding fields for each product in the Webflow CMS collection. Remember to do this for every product as the codes will differ.
Adding an Embed Component to the Webflow Product Collection
Create a collection list or collection page in Webflow to showcase your products. In this example, we’ll use a collection list. Follow these steps:
- Insert an embed component into the desired location within the collection list.
- Copy the embed code from Shopify (using the same process as before).
- Paste the embed code into the Webflow embed component.
Here, you can select the button style you prefer. You can choose an option to display product information (image and name) from Shopify or a simple buy button. In this example, we’ll use the latter. Paste the Shopify embed code into the HTML embed component in Webflow.
Next, we need to replace the unique IDs in the dynamic embed with the corresponding fields we created in the collection item. This ensures that each product in Webflow links to the correct product in Shopify, preventing all collection items from pointing to the same Shopify product.
Highlight the Product component (appearing twice) and product ID, then click "+Add Field" to use the dynamic fields from the collection item.
Save, close, and publish. You’re done!