Mega menu

Hey @Seth, the best way so far would be using Metaobjects, as Shopify does not provide a native way to create Mega Menus. So you would create the different levels as a Metaobject and then reference the levels upwards. For example: Navigation Level 1 is referencing Navigation Level 2 and so on. Then you just have to loop though it and use conditions as you need. If you only go one level deep, you can just create one metaobject and in there create all the items in the dropdown.
li-for="NAME in shop.metaobjects.NAVIGATION_LEVEL_NAME.values" would be the first level. And if you go deeper, li-for="NAME2 in NAME.KEY.value"

Got it, so something like this ChatGPT code wouldn't work?:

<ul class="grid-uniform">
{% for link in linklists.links %}
<li class="grid__item small--one-third medium--one-fifth">
<a href="{{ link.url }}">
{% if link.type == "collection_link" %}
{% assign collection = link.object %}
<div class="collection-products">
{% for product in collection.products limit: 4 %}
<div class="product-item">
<a href="{{ product.url }}">
<img src="{{ product.featured_image | img_url: 'small' }}" alt="{{ product.title }}">
<p>{{ product.title }}</p>
</a>
</div>
{% endfor %}
</div>
{% else %}
<p>{{ link.title }}</p>
{% endif %}
</a>
</li>
{% endfor %}
</ul>

That also works very well if you don't need the flexibility of the metaobject. So if you just want to show the products of that collection, your solution would probably be the better one

For future onlookers, I'm going to try a variation of:

{% for link in linklists[collection.handle].links %}
<a href="{{ link.url }}">

<!-- Display the product image only if it's a product link -->
{% if link.type == 'product_link' %}
<img src="{{ link.object.featured_image | img_url: 'small' }}" alt="{{ link.title }}">
{% endif %}

<!-- Display the link title -->
<span>{{ link.title }}</span>
</a>
{% endfor %}

Hi @Seth, actually i didnt knew that was possible with liquid. Cheked it in the docs and it is !! 🤯