How do I add a hierarchical menu or a breadcrumb on my Shopify front-end?

We do not provide such a capability out of the box, but you could indeed build it by indexing additional  named tags or metafields.

They could be structured like this:

{ 
  // ... Other attributes 
  "meta": { 
            "hierarchical_collection": { 
              "lvl0": "clothing", 
              "lvl1": "clothing > shirt" } 
          } 
}

Once the metafields are indexed to Algolia, you will be able to customize your front-end to use these fields as breadcrumbs or as hierarchical menus for navigation. We have InstantSearch widgets for both of these features, which you can see linked above.

We have also written this guide on how to customize your InstantSearch results page and this guide on how to import a non bundled-widget. In particular, you'll need to edit assets/algolia_instant_search.js.liquid to include these widgets.

Last reviewed 25-04-22.