E-Commerce Multi Type Variant Per Product : How To Do Cart Line Item?

I wonder if anybody has ever successfully created a Shopify-like or Woocommerce-like e-commerce on Bubble. Upon searching in the forum, not many are talking about this, especially on the multi type variants.

I would like to get some ideas on how to set up variant selector (dynamic variant) on product page and product archive page, cart structure that included multi variants selected per product.

I am sorry I do not follow.

What is a variant?
What is a multi type variant?

1 product could have many sizes, colours, shapes and any other variants.

The idea could be to have a base product, with a fixed price.
Then, you could associate “options” to this product, for colors, sizes,… Options could be mandatory (size,…) or optional (more pepper,…)

And you can add an option price (positive or null, or even negative).

This way, your buyer choose a product, mandatory options (if any), optional options (if any), and the final price of the product will be : base price + each option price.

In terms of database, you’ll have a product datatype, and a option datatype. A product will be linked to 0 or X options (specific or generic).

2 Likes

@faisalkarimstubapp

And as an example you could go with a dB structure for pizza delivery which has different ordering options (size, etc etc)

Or you could study how template authors created their e-commerce store, for which there are plenty of, in the Bubble store

You can build your own e-commerce app with the type of product options, variations, types, classes, etc etc. Up to you how large/small you need it to be :grinning:

2 Likes

Thank you @Christophe_HK and @cmarchan fro pointing me to a good direction.

I wonder how to do this (image below) kind of variant picker on product list page? Any suggestion?

Assuming the variants for each product are not fixed to sizes and colors type only, a product could have more or less variants.

This is like RG in RG in RG. I am having trouble to create cart whenever customer selected variants for any products.

1 Like

@faisalkarimstubapp

Can you give more detail as maybe I can help? screenshot of the workflow or the repeating group?

Look at the visual of product archive page given above. How to create “add to cart” flow when a product has multiple variants, in a product archive page? FYI, I haven’t build the flow yet because I haven’t found the best solution.

*Additional : As you can see above, the first variant option for size and color is auto-selected when page is loaded. How to do that?