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!

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

3 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 : )

Hi all,

I’m facing this issue on a client’s website. I’m displaying a products list by category. Everything works amazingly well but every category containing more than 5 items just won’t show more than 5 items… this limitation really is surprising.

Any news on this Webflow team?

Thank you for your code! Could you share a read-only link so I can have a look at how it is used on the site?

1 Like

Hey Timothy, hope you are well. That project can’t be shared because of my companies’ policy, but here’s the HTML structure. (You should be able to create something from this)

Both scripts can be cleaned up depending on what you need, but this is the structure that I had for my specific project

<div data-theme-movement-boundary=true>
  <!-- Themes: Nested collection items will come from here -->
  <div class="webflow-collection-list-wrapper">
    <div class="webflow-collection-list">
      <div class="w-dyn-item">
        <p>Nike</p>
        <span style="display: none;" data-theme-mega-theme="stores"></span>
      </div>
      <div class="w-dyn-item">
        <p>Adidas</p>
        <span style="display: none;" data-theme-mega-theme="stores"></span>
      </div>
      <div class="w-dyn-item">
        <p>Olive Garden</p>
        <span style="display: none;" data-theme-mega-theme="restaurants"></span>
      </div>
      <div class="w-dyn-item">
        <p>Subway</p>
        <span style="display: none;" data-theme-mega-theme="restaurants"></span>
      </div>
    </div>
  </div>

  <!-- Mega themes: Nested collection items will go here -->
  <div class="webflow-collection-list-wrapper">
    <div class="webflow-collection-list">
      <div class="w-dyn-item">
        <div>
          <div>
            <div data-mega-theme-locator="restaurants"></div>
            <div data-theme-movement-target="true"></div>
          </div>
        </div>
      </div>
      <div class="w-dyn-item">
        <div>
          <div>
            <div data-mega-theme-locator="stores"></div>
            <div data-theme-movement-target="true">
              <!-- Your nested collection items will land here -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Check the HTML code above please

Thank you very much! That is so helpful.

1 Like