I’m currently testing Shopify for a store that functions more like a menu-style catalog rather than a traditional e-commerce setup.
The catalog includes hundreds (or potentially thousands) of items, each with simple info, and the main user behavior is heavy category browsing instead of product-focused shopping.
As the catalog grows, I’m running into performance and usability issues such as:
Long collection pages becoming slow
Theme sections taking longer to render
Navigation feeling awkward on mobile
Wanting to avoid heavy apps and keep the theme lightweight
From a technical perspective, what’s the best approach for building this kind of structure in Shopify?
Great question..! this is a common challenge when you’re using Shopify more as a browsable catalog than a traditional product store. I’ve built a few setups like this so here’s what I’d recommend.
First, worth noting that the reference site you linked (dbrosmenu.com) is actually a WordPress content site, not Shopify. The browsing experience there is built around blog-style category pages with image cards, which is why it feels so fast and lightweight. The good news is you can absolutely replicate that feel in Shopify.. you just need to approach it differently than a standard product catalog.
The approach I’d take:
Don’t rely on one massive collection page with hundreds of products. That’s where the performance issues you’re seeing come from — Shopify has to render product cards, images, variant data, and pricing for every item, even if all you really need is a name, description, and image.
Instead, structure it as a collection-of-collections pattern:
Create a collection for each category (e.g., “Coffee Classics”, “Seasonal Drinks”, “Kids Menu” — similar to how the reference site organizes it)
Build a custom landing page that displays category cards linking to each collection — this is the fast, browsable hub
Keep individual collection pages paginated at around 24-48 items per page
For the landing page, you have two options depending on your theme:
Use a Collection list section if your theme supports it — most modern themes do, and it renders quickly because it’s just pulling collection titles and images, not full product data
Or build a custom section using metaobjects for each category card (image, title, link, description) — this gives you full control over the layout without any product rendering overhead
The metaobject route is especially worth considering if your items don’t need cart functionality (since this sounds more like a browsable catalog). You’d store your items as metaobject entries rather than products, which is significantly lighter on rendering and gives you more flexible content fields.
For mobile navigation specifically:
Use a sticky category nav bar at the top of the landing page (horizontal scrollable tabs for each category) this is what makes sites like your reference feel snappy on mobile
You can build this with a custom section or even just anchor links within the page
Avoid deep nested mega menus for hundreds of items .. they’re a UX nightmare on mobile
Performance tips:
Lazy load images below the fold
Use Shopify’s native image CDN with proper srcset and sizes attributes .. let Shopify serve the right resolution per device
If you’re using collection pages, keep products_per_page at 24 max and use AJAX-based “load more” instead of traditional pagination for a smoother browsing feel
Avoid apps that inject JavaScript on every page .. if you need filtering, Shopify’s native Storefront Filtering (Search & Discovery app) is far lighter than third-party filter apps
The honest answer is that the architecture decision up front matters more than any individual optimization. Getting the collection structure and template hierarchy right from the start will save you a lot of headaches as the catalog grows.
Happy to go deeper on any of this if you’d like .. feel free to reach out at admin@shopifyartisans.com.