Can Webflow's e-commerce variant accommodate a website with a single main product and 2-4 add-on products that can be included in the order in any quantity?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

Yes, Webflow's e-commerce variant can accommodate a website with a single main product and 2-4 add-on products that can be included in the order in any quantity. Here's how you can set it up:

Set up your product catalog:

Create a new collection in Webflow for your main product.
Add fields to the collection for the product's name, description, price, and any other relevant details.
Add another collection for the add-on products, with similar fields.

Create product variants:

In the collection for the main product, add a field for variants. This could be a multi-reference field or a plain text field where you specify the available variants, such as size or color.
In the collection for the add-on products, add a reference field to the main product collection. This will establish the relationship between the main product and the add-ons.

Design your product page:

Create a dynamic template page for your main product collection.
Set up the page to display the main product's details, including the variants.
Use conditional visibility or custom code to display the add-on products based on the selected variants.

Customize the add-on options:

Add a form element to your product page where customers can select the quantity of the add-on products.
Use interactions or custom code to update the total price dynamically based on the selected quantities.

Set up the shopping cart and checkout:

Add a cart element to your product page or create a separate cart page.
Use Webflow's e-commerce functionality to manage the cart and the checkout process.
Make sure to include the main product and the selected quantities of the add-on products in the cart.

By following these steps, you can create a website with a single main product and multiple add-ons that can be included in the order in any quantity, using Webflow's e-commerce variant.

Additional Questions:

How do I create variants for my products in Webflow's e-commerce?
Can Webflow handle complex e-commerce websites with multiple products and categories?
Is it possible to integrate third-party payment gateways with Webflow's e-commerce?

Can Webflow accommodate a shop with products that have no listed price and the ability to accept orders without shipping the products?

What issues did the person encounter after migrating their store from Shopify to Webflow and using ShipStation for fulfillment?

Can I create a button on my Webflow homepage that redirects users to the checkout page, and if so, how can I set a fixed price on the checkout page?

Is it possible to add a phone number to the checkout on Webflow?

Is there a fix or setting in Webflow to prevent the entire site from shrinking within the browser when pinch-zooming?

For a UX designer who does occasional freelance work, wants to design multiple websites, and needs CMS for clients, what is the best plan option on Webflow to accommodate these needs?

Can European consumers use Debit cards to pay for goods on a Webflow ecommerce store?

Is there a way to verify if a website was created using Webflow even if the source code does not contain any Webflow tags?

How can I set up weight-based shipping rates for products in my E-Commerce store using Webflow?

Has anyone successfully found a solution to displaying prices in the local currency for different countries using Webflow's Ecommerce feature?