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”.
Here is my public share link: LINK
(how to access public share link)
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
Hope this helps!
Thank you so much for the reply, @magicmark!
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.
@magicmark Thank you for the ping.
@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.
But it all works great now. Thank you for the very thorough guide!
You are very welcome! Glad things are working as expected now. Please don’t hesitate to reach out if we can help with anything else.
Can I maybe get that instruction guide?
Absolutely. Instructions have been sent. They include how to handle variant based pricing. Let us know if we can help with anything.
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.
Please post an example.
@foxy Can I please request the step-by-step guide as well. I need this for a client project. Thanks.
Absolutely! Instructions sent. Let us know if you have any questions.
Hi @foxy, I’m building something similar today - would be grateful if you could send the instructions through to me as well please. Many thanks!
No problem at all. Instructions sent. Let us know if you have any questions.
Hello, Foxy. I have the similar problem with a lot of sizes - could you send the instructions please?
For sure. Just messaged you.
Could you send me instructions?
@foxy i forgott to “@” you
Thanks for getting in touch. I just responded to your email.
Hi @foxy, I’m building something similar today. would be grateful if you could send the instructions to me.
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? email@example.com