I am currently in the process of building a shop page built on the CMS that uses a FoxyCart integration. On each product page, I need to have a dropdown with options to select a product color. The problem is that these colors change depending on the product.
So, what I have done is create two CMS Collections: one for the products and one for all the colors available. Then, in the Products Collection, I created a multi-reference field and chose all the possible colors available for that product. Pretty straight-forward and I believe I have done all of that correctly.
But here comes the problem: creating a dropdown on the Product template page to select the color. So far, I have created a dropdown on the Product template page, placed a dynamic list inside the Dropdown List and added a text link into the Collection Item. This has gotten me pretty close. Basically, now I have a dropdown that shows all the available colors for that product, but the text links link to the Colors template page. I need the colors to just be selectable options (similar to a Select element in a form).
I don’t really need anything special to happen when a color is selected, such as a price change. I just need a color to be selectable and my client to know which color was selected. I apologize for being so wordy on this one—just wanted to be as thorough as possible. Thank you!
On my read-only link, navigate to the “Three Tiny Knots Products Template” page and then change the product item to “Limited Edition Harper”.
This will require a little setup with Josh or Adam at @foxy but you will need to set up a text field on the product page called “color”.
To add the dropdown and have that item added to the cart, you will add the colours into that field, so Product 1 maybe Red,Blue,Yellow and product 2 maybe Green,Blue you can also add price modifiers if it affects the price, and is pretty straight forward once you get the hang of it.
I’ve used Foxycart for a few projects and the support from the team there are great, I’ve ping them in so they can reach out to help. Of course Webflow e-commerce is here shortly, it won’t feature product variants on the first beta release
I’m glad to know that it is a possibility. If it wasn’t, I was going to just separate each color into different products which is definitely not the best UX choice.
@kvdkn Nice to meet you. I’m sending over step-by-step instructions on how to setup product variants in Webflow. Please don’t hesitate to reach out if you need anything at all.
Thank you so much, @foxy! That worked perfectly! Sorry for the delay in response, I was trying to get the price variants to work based on a size selection. Turns out I was just missing the piece of Javascript for that…
But it all works great now. Thank you for the very thorough guide!
It would be very helpful to have an example of this type of solution onlline. Using the results of a selection from one list as a filter for the available options from a second list is a classic relational database issue and would good to have a technique available using only Webflow’s CMS system.
Hi @imshaiksaif.
Thank you for getting in touch. Mind sending us a quick email with your Webflow Read-only Link and details on any specific needs you have? hello@foxy.io
