Adding Nested Menu Block In the page (not the header)

Topic summary

Goal: Add a nested, in-page menu on the homepage that lists collections and, upon selection, displays products from that collection. Two screenshots and an external site reference were provided as examples; images are central to understanding the desired design.

Update: A responder confirmed this is feasible in Shopify and shared a demo (foodisha.me), noting it’s achieved via a custom theme section rather than a default header menu.

Request: The original poster agreed the demo matches their goal and asked for the CSS needed to implement it.

Key terms:

  • Collections: Shopify groups of products.
  • Custom section: Theme-specific block (typically Liquid/CSS/JS) used to create bespoke layouts and functionality.
  • Nested menu: In-page navigation with hierarchical items that drives product display.

Outcome/Status: No code or implementation steps have been shared yet; no decisions or completed changes. Next action sought is sharing CSS (and likely section code) to build the nested collections menu. Discussion remains open.

Summarized with AI on January 4. AI used: gpt-5.

Hello @CarloCU

Welcome to Shopify community.

Yes showing all the collection with products on homepage is possible. Please check the demo foodisha.me but it is a custom section created for the theme.

Thanks

1 Like