How to Build a Shopify Product Page Using the Shopyflow Template Library

Introduction

Creating a Shopify product page within Webflow can be a challenging task, but thanks to the Shopyflow Template Library, the process is simplified. Shopyflow uses custom attributes to seamlessly integrate Webflow elements with Shopify store components. This saves you from manually adding attributes and ensures a smoother workflow. In this guide, we will walk through the process of building a Shopify product page using Shopyflow’s pre-built Webflow components.

What is Shopyflow?

Shopyflow is a tool designed to bridge the gap between Webflow and Shopify by providing dynamic store components that work natively within Webflow. With Shopyflow, you can:

• Convert Webflow elements into Shopify-compatible components.
• Use pre-built elements with predefined attributes.
• Automatically sync product details from Shopify, such as product ID, title, description, images, and variants.

Setting Up Your Shopify Product Page with Shopyflow

Step 1: Access the Shopyflow Dashboard

To begin, navigate to your Shopyflow Dashboard. Here, you’ll see the list of Shopify stores connected to your account. Select the store you wish to build a product page for.

1. Click on the Build button next to your store.
2. This will take you to the Shopyflow build screen, where you will find all the essential Webflow components needed to create a product page.
3. Each component is pre-configured with attributes and ready to be copied into Webflow.

Step 2: Select Your Product

Before adding components to Webflow, you need to select the product that will be displayed on your page:

1. Open the Product Dropdown Menu.
2. Select the product from your Shopify store. In our example, we are using Bike 32.
3. Once selected, all Webflow components on the page will be auto-populated with Shopify data.

This means that product attributes such as title, description, gallery images, and variants are automatically updated without requiring manual input.

Step 3: Copy the Buy Module to Webflow

The Buy Module is a ready-made component containing all the necessary elements for a product page. It includes:

• Product Title
• Product Description
• Image Gallery
• Variant options
• Add to Cart button
• Price Display

To add this module to Webflow:

1. Copy the Buy Module from Shopyflow.
2. In Webflow, open the Navigator Panel.
3. Select the Page Container and paste the Buy Module.

Now, your Shopify product page is live in Webflow!

Step 4: Publish and Preview

Before making further modifications, publish your page and test the functionality:

• Ensure the image gallery displays product images correctly.
• Check that the price and variant options update dynamically.
• Verify that the Add to Cart button works as expected.

Simplify Your Shopify-Webflow Integration! Get started with Shopyflow here and build stunning product pages effortlessly.

Understanding the Key Components

To customize your product page further, it’s essential to understand how the key components and attributes work.

1. Product Container

The Product Container is a required element that stores the Shopify Product ID. It is assigned an attribute called:

sf-product=”[Shopify Product ID]”

Shopyflow automatically fills in this value, so you don’t need to manually retrieve the Product ID from Shopify.

2. Add to Cart Button

The Add to Cart button is another required component. It uses the following attributes:

sf-add-to-cart=”1″

This tells Webflow that clicking the button should add the selected product variant to the Shopify cart.

3. Quantity Changer

To allow users to select a quantity, Shopyflow provides a Quantity Changer Component. It consists of three elements:

• Decrease button: sf-change-quantity-dec
• Quantity display: sf-show-quantity
• Increase button: sf-change-quantity-inc

You can replace the text block element with an input field for direct quantity entry by setting:

sf-change-quantity=”true”

4. Variant Selector

For products with multiple variants (e.g., color options), Shopyflow includes a Variant Option Selector. This is a Webflow single select field with the attribute:

sf-change-option=”[Option Name]”

For example, if the option is color, the attribute would be:

sf-change-option=”color”

Step 5: Updating Product Information

If you update product details in Shopify (e.g., change color names or add new variants), the Shopyflow integration ensures your Webflow page reflects these changes automatically. However, you may need to hard refresh the published site to see the updates.

Step 6: Customizing Your Layout

Shopyflow provides full flexibility to customize your product page layout:

• Rearrange elements within the Product Container.
• Apply custom Webflow styles.
• Add animations and interactions.
• Use multiple Buy Modules on the same page if needed.

Unlock the Full Potential of Shopify and Webflow Integration

Are you looking for expert assistance in integrating Shopify with Webflow? Axiabits specializes in Webflow development and Shopify integrations. From setting up dynamic product pages to customizing layouts and ensuring seamless eCommerce functionality, we handle it all. Book now and let’s get started!

Conclusion

Using Shopyflow’s Template Library, you can quickly and efficiently create a Shopify product page in Webflow. With its pre-built components and automatic attribute assignment, you no longer need to input Shopify data into Webflow elements manually.

Why Use Shopyflow?

• Time-saving: No need to manually add attributes.
• Dynamic updates: Changes in Shopify are reflected in Webflow.
• Flexibility: Full control over design and layout.

By following this step-by-step guide, you can seamlessly integrate Shopify products into Webflow and create a dynamic shopping experience for your customers. Effortless Shopify Store Setup in Webflow! Start using Shopyflow and launch your online store faster.

Disclaimer 

This article features affiliate links, which indicates that if you click on any of the links and make a purchase, we may receive a small commission There’s no extra cost to you and it aids in supporting our blog, enabling us to keep delivering valuable content. We solely endorse products or services that we think will benefit our audience.

Frequently Asked Questions