CMS Dynamic Links

Design help CMS
1

Hello everyone, I am a newbie to webflow and need some help. How can I make when clicking on the drop name the equivalent cms drop images appear?

READ ONLY LINK: Webflow - H24

Thanks in advance.

2

Hi Kyriacos,

You’re using terms that I’m not familiar with.
In the link you’ve sent you’re pointing at your Lookbook page. I’m going to guess that these are the “drop names” you’re referring to and then you want the images below them to change.

image
image1051Ă—683 50.7 KB

Looking at your setup, you’re using ECommerce and those are Product names which have images associated with each.

OPTION 1 - TABS
If your products don’t change often and you won’t be adding many, then the easiest way to set this up is to build it as a tab element. Each tab would have the product name hand typed, and then the tab body would contain a collection list for each product to display the images.

You’ll be able to style it similarly, but there may be a line or gap between “lookbook” and your tabs.

OPTION 2 - INTERACTIONS
This is more complex but more versatile approach;

  • Collection list of products, contains the tab buttons at the top
  • It also contains a nested collection list of the images for that product ( 5 max )
  • Positioning that photo section requires some creative work with relative/absolute positioning.

I have a cloneable here that shows the technique.

3

Hey Michael, you got it all correct haha thank you. I think I am going to have to go with the second option as the client will be adding items often. Should I go step by step with the video you provided to achieve that or what’s the best way to go for it in your opinion?

1 Like
4

The video and cloneable will show you the technique but you’ll have to adjust it for your situation. The demo is already built for the CMS which is good, but I think you have three main differences-

  • Your expandable area is below
  • This means the positioning relative to the button needs to be considered, as more buttons → taller tabs area.
  • Click rather than hover

If you want to go with option 2, I’d recommend you walk through a build process using my demo to really understand the mechanics, there are several important ones in there including how the interactions targeting works and how the detail pane is positioned.

Also you might be able to make option 1 work with Finsweet’s CMS tabs lib, I have never actually used it but I suspect it could be made to work here.

5

Really good video but I was worried a bit on the responsiveness so I tried the finsweet attribute method from here Dynamic Webflow Tabs with Webflow CMS Collection List.

Took the steps normal, then added another attribute to the nested list (list-2) and I think its getting closer.

The only thing is for some reason the pictures is not in the lookbook down part when I publish as supposed to be from the designer. Also struggle to make the pics same size, 100% height
doesn’t apply when I put it :confused:

READ ONLY LINK: Webflow - H24