Algolia Menu Widget for Shopify using named tags?

Is it possible to build a hierarchical menu widget for Shopify?
##Would we do it with Named Tags? For ex, would the below tags be able to translate into this?:

CATEGORIES
Womens
  Tops
  Bottoms
Sale
  Tops

(Since collections are not available as a facet in Shopify)

{
  tags: [
    'type:womens',
    'womens:tops',
    'womens:bottoms',
    'type:sale',
    'sale:tops',
  ],
  named_tags: {
    type: [
      'womens',
      'sale'
    ],
    womens: [
      'tops',
      'bottoms'
    ]
  }
}

##Or, how would i be able to write a tag that satisfies the below structure? as outlined in this Menu Documentation?

Excerpt: "The attribute used for faceting must be an object that follows a specific convention.
For example, to build the example menu, our objects are defined like this:

{
  "objectID": 4815162342,
  "hierarchicalCategories": {
    "lvl0": "Appliances"
    "lvl1": "Appliances > Air Conditioners"
    "lvl2": "Appliances > Air Conditioners > Portable Air Conditioners"
  }
}

All attributes (hierarchicalCategories.lvl0/1/2) should be defined as attributesForFaceting in your index configuration. Each level must repeat the parent breadcrumb."

So you would indeed need to use either Metafields or Named tags (I’d personally recommend Named Tags).
You almost got it right in your first example. You’d need, here, to merge the two blocks of code of your first message.

Here are the named tags I could recommend you to use for one product:

tags: [
  'hierarchy_lvl0:Women',
  'hierarchy_lvl1:Women > Sale'
]

Then, in your Shopify app, you’d indeed need to set them as attributesForFaceting. The easy way to do that with the ability of adding a custom facet to handle them would be to drag them in Enabled in the Search options tab, and in Edit, set it as hidden.

1 Like