Streaming live at 10am (PST)

Work around on 5 items on nested collection

For some reason there is a 5 item limit on the items in a nested collection! Why is this and how do you get around it?


Here is my public share link: https://preview.webflow.com/preview/stumptown-lodgings?utm_medium=preview_link&utm_source=designer&utm_content=stumptown-lodgings&preview=85c660f1b0159a49c4897eb102932af0&mode=preview

Hi again @Mark_Mark!

The 5 item limit is set by Webflow to maintain performance. They’ll increase it in the future.

Hello @Mark_Mark do you have any news on this topic? It’s really limiting me for the moment too.

No we coded this manually. I havent seen software that has limits on things like this for many years. The old days we werent able to dynamically set how many objects were needed. But these days its easy. If they dont want to do this on the fly they should make a site setting for the number needed. But thats even weird. Sorry no good news here

1 Like

What’s even the point of this feature if they limit it to 5 items? This is crazy!

2 Likes

I seriously hope @Webflow increase this highly restrictive limit of 5 items in a nested collection ASAP. I agree with others that 5 is an impossibly small number to make it useful.

2 Likes

Well, its been a while… Any updates on this Webflow Staff?

Ok, so for anyone who knows code and wants to create a tutorial from my workaround, feel free to do so… Quite busy over here so I can’t devote a lot of time to explaining it:

Just some context: We have a mega themes collection list, that have several individual themes inside them. Those inner themes are also collection items.

const themeMegaThemesSpans = $('[data-theme-mega-theme]');

themeMegaThemesSpans.each(function () {
  const thisMegaThemeSlug = $(this).attr('data-theme-mega-theme');
  const thisTheme = $(this).parents('.w-dyn-item');

  const themeMovementBoundary = $(thisTheme).closest(
    '[data-theme-movement-boundary]',
  );

  const targetMegaThemeContainer = themeMovementBoundary
    .find(`[data-mega-theme-locator='${thisMegaThemeSlug}']`)
    .parent()
    .parent()
    .find('[data-theme-movement-target]');

  targetMegaThemeContainer.append(thisTheme.clone());
});

1 Like

Hey @Jeandcc I’m looking for a solution to this issue, does your workaround enable more than 5 nested collection items? If so I’d appreciate a screenshot of your class structure [in the designer] - I’m fairly certain I can reverse engineer from there : )