I need my product section to display the correct color when I click the associated color button. (Blue button displays blue product).BUT When I click on a different color, I need the previous color to disappear with the new color in its place. What is the best way to do this?
Color1
You would need a different watch with the colors… OR … use one watch in a vector graphic program, create shape overlays that are the same as the “color shapes” on the watch. Those different shapes can have the colors to show in interactions or slider.
But either way, you’ll need multiple watches OR multiple graphics. Another option, use photo filters on the watch in PS or another photo editing program. It’s not the most specific option because colors won’t be exact.
I would choose the graphic route, because you can simply load the watch in AI, PS, Inkscape, DrawPlus (anything that exports SVG). Then use the pen tool to outline the shapes on their own layer until you get a complete watch face. Then group, add color, copy, repeat.
Hope that helps!
Thanks Gary, But I know how to change the colors in a creative suite, I don’t know how to change the colors in webflow when I click a button. I am trying to click a blue button and have a blue product appear, click a green button and have a green product appear while the previous color (blue) disappears. This is my dilemma, I think tabs might work for this.
Oh oh… ha… my bad… 
Do you have a read-only link to view?
The best way to accomplish this is:
This works because you can simple set each to have an initial appearance of 0% opacity, and you won’t have to animate, you’ll simply go 100% opacity.
However, if they’re gonna have details show with each new color, that’s different. But it looks like the details on the watch are hardware related, so product variant is on color only, if that’s correct?
Yes, that is a good idea, but the problem lies in making the image go back to 0% at the same time another image goes to 100% in its place when another button is pressed. I’m not actually using a watch that was just an example.
Oh yeah I had that issue too… Use the Legacy IX1 interactions if you get stumped, its more steps but sometimes easier to setup. IX2 is little challenging with this type of effect. It would be better if I could see your page. IX2 would work great if you structure all your “classes” specifically for this, then set “1 interaction that overlaps the next one”. I know it’s hard to visualize, and I understand what you’re trying to do, I just need to see the page to go further.
I think the tabs are the easiest way to go about this. Tabs are already linked to a separate pane that disappears when the next tab appears so it works well, I just rearranged the style so it displays like the fitbit watch. I don’t know how to show you the page lol sorry, thank you for your time man!
No problem… good luck with it!
