Creating different URLs for each tab

Design help General
1

Hi!! So I have a shop page with 4 tabs: New, Originals, Prints and Apparel. But they are all under one URL. I want to create a different URL for each tab. I watched older videos, but the whole settings panel looks different…!

Let me know if you know how to do this!

https://preview.webflow.com/preview/kk-canvases?utm_medium=preview_link&utm_source=designer&utm_content=kk-canvases&preview=b15fb4a85a18f16593cd6953f1657b3a&pageId=65e4c978fcf2b6d85145b836&workflow=preview

Thanks so much

2

@kkcanvases Did you ever figure this out? Running into the same issue on a site right now and any insight would be appreciated!

3

@Port_of_Folio just shared this in another thread.

4

@memetican Thanks so much! This is great. Do you know if there is a way to alter this to give each tab a definitive URL? So for example, instead of ending the url with /pagename#tabname, ending it with /pagename/tabname?

5

Webflow wouldn’t know those as legitimate URLs.

You could hack this by setting up redirects e.g. /pagename/tabname → /pagename#tabname but the user would see that change in the URL.

You could further hack this so that when the user lands on /pagename you have some custom JS modify the browser history so that the displayed URL appears as /pagename/tabname.

All of that will work but you may run into two issues-

  • Conflicts with the Memberstack code above, which will likely update the URL when you click a tab
  • Potential SEO weirdness, though Google will probably just ignore the browser history change which is what you’d want in this case.
6

Good to know, thank you!