Streaming live at 10am (PST)

Adding Selectable Options to Dynamic Products


#1

Hello everyone,

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)


#2

Hey @kvdkn :wave:

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 :slight_smile:

Hope this helps!


#3

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.


#4

@magicmark Thank you for the ping. :slight_smile:

@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.

Thanks,
Josh


#5

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… :thinking:

But it all works great now. Thank you for the very thorough guide!


#6

Hi @kvdkn.
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.

Thanks,
Josh