Navigation custom iteration object

New Member
1 0 0

Hi Shopify Team & users,


We're trying to create an iterative custom object in Shopify Navigation Menu.


Below, I'm sending over a screenshot which includes a custom "Bestseller" item:

Screenshot 2019-12-12 at 13.44.51.png


Please find the process described below:

  1. We want to create one custom theme for multiple shops.
  2. We had whole navigation as hard-coded .liquid section, different for desktop and mobile, both approx. 2500 lines which were unmaintainable for any changes.
  3. We wanted to change the navigation from hard-coded to iteration through an object. But Shopify has its own objects (like shop, product, etc.), but you cannot define your custom ones like in different programming languages (let variable = { here you have object })
  4. We could use Shopify object (navigation) but we don't want to add more than 80 items for every shop we want to use the theme for. (And I don't know exactly if we can do nested navs...)
  5. So... after all, we used a "hard-coded" object in JS like:
let thisIsObject = {
menuCategory: {
menuSubcategory: {
menuSubcategories: [...]
and we're iterating over it to render HTML elements. Purpose: for each category/subcategory etc. have exactly the same elements nested in each other.
6. Now we want to add "Bestseller" to our navigation view. But for that, we need to use Shopify section.settings and {{ collections[...].products[...]}} things. What's more, we have a ready template for it's look in one of the snippets and it would be perfect to use it (normally in liquid it's
{% include 'snippetName' %}
7. We do not know how and if it's even possible to use snippet and section.settings in this JS render.
Would you recommend any solution to that? Would really appreciate your help.