Pulling Multiple Collection Data

We’re building our largest eCommerce store yet using Webflow and the Shopify buy button.

What I’m having trouble with is working out the following…

We have multiple Collections for each product category, but we also have static pages that focus on the recipient or price range to make it easier for users to shop. For example a user might go right to the category they want, or they might decide to see what products are available in that price range.

In a little more detail we have Collections such as:

  • Driving
  • Flying
  • Dining

And static pages such as:

  • Under $100
  • Gifts for Men
  • Gifts for Women

How can I pull in items from multiple Collections that would fit under one of those static page categories? For example, how would I pull in every product under $100 from every Collection we’ve made?

I know I can filter a single Collection list, but how can I pull in multiple lists?


Here is my public share link: https://preview.webflow.com/preview/golden-moments-usa?utm_medium=preview_link&utm_source=designer&utm_content=golden-moments-usa&preview=82707adabb0301ce37b6af024b561847&pageId=5e2eccc286f4172de72e811c&itemId=5eb18fdad41fed6acf87ec45&mode=preview
(how to access public share link)

Hey @radicalrooster, looks like you have gone about the Collections wrong (or not the way I would do it). I went through each of your Category Templates and they are all using the same design. Ideally, whenever a Category shares a design, you should merge them into 1 collection. Then, use the a multi-reference collection to filter/sort them out.

I hope that makes a little bit of sense.

1 Like

Thanks for the reply @dennyhartanto.

The reason why we use multiple Collections is for the URL… If we had all our separate Collections merged into one, they’d all follow the same /[same collection]/[collection item name] url structure, which wouldn’t be ideal given the number of different product types we have.

Right now for example, our collections look like this:

Driving products: /driving/product
Flying products: /flying/product
Train products: /trains/product

If we were to merge them all into one big collection, it would look like: /all-products/product

I know URLs aren’t as important for SEO these days, but still I think it makes better sense (and to keep things organised) if our products were organised into categories. Plus our train products do have different templates and the others may do in the future.

Another reason we didn’t do this is because of the limit of Collection References we have. Our trains products for example use about 8 Collection Reference fields, and if we wanted to put all our products in one Collection, we’d need to add more filters such as Recipient, Occasion etc, all which wouldn’t fit into categories already close to the limit of Collection Reference fields.

Any other ideas how we could do this?

If this is what you’re after, I can’t think of a solution.

I would arrange it as such:/products/british-pullman-... and if you want to group trains then it’ll be /categories/trains

This will allow you to mix and match products for selected product promotions without creating another Collection. e.g. You have a promotion going on that applies to British Pullman Train and Nascar. You can just create a new Category and reference the category for the selected products.

I realise you have a category page, but it is not being used as a template just as a filter.

Example: Available Tours: Tours Tour Categories: Tour Summer | Best Holiday Tours

This is all the category

You can filter by date, by promotion, by price ranges etc. without creating a new collection.

In regards to reference fields, I think you can reduce them further. For static informations, example: Price Range can be a Select dropdown instead in CMS. Same may be applied to Departure Dates as well.

I see what you mean, I think if we had a smaller, less filter-able range of products having everything in one Collection could work.

If we wanted to do it this way, we’d need the following number of Collection Reference fields, simply because a lot of products fall into more than one category. We can’t use Multi-Reference because our Mixitup filter can’t read Multi-Reference fields.

We’d need:

  • Departure date 1
  • Departure date 2
  • Departure date 3
  • Product Category
  • Product Price Range
  • Product Location
  • Produce Departure (for trains)
  • Product Destination (for trains)
  • Recipient 1
  • Recipient 2
  • Recipient 3
  • Occasion 1
  • Occasion 2
  • Occasion 3

Which is more than Webflow allow, and even the above limits each product to only being in three occasion filters and three recipient filters.

I think we’re facing three limitations:

  • Mixitup not being able to use Multi-Reference Fields
  • Webflow only allowing a maximum of 10 Reference Fields
  • Not having customisable URLs for Collections (e.g. they all share the same parent folder)

Hmm…

Also secondary question…

How does Webflow handle loading one, massive Collection and filtering it?

Say we had 4,000 products in one, single Collection although paginated, would this affect load times?

An example being having a page where the user could browse literally all the products we offer.

Okay, I’m sure you have tried and chose the best option for your products.

Anyway, if you want to pull multiple list, @Finsweet recently released a custom JS pack which allows you to combine multiple list. Note that you are limited to 20 collections in a page. F'in sweet CMS Library for Webflow!

As long as it is paginated, it’ll be fine because webflow will only load 1 page at a time. The CMS library i linked above has a load more function which lazy loads too.

Thanks for all your help @dennyhartanto!

I think for this one, we need to keep going as we’re already too far in…

However we have many more of these sites to build for different countries, so I may try your method of having one Collection for products that share the same template.

1 Like

No problem @radicalrooster. I’m sure there is a 100% practical method, I don’t necessarily know either because I never looked into it.

Yeah… Good luck with the other builds!

Hey Radical Rooster (cool name by the way)

Yes, CMS Library is great for combining collections from different lists. Using our Combine component, you can combine as many different lists from different collections as you’d like. We built this specifically for filtering! Could be a solid solution for you!