Shopify Mega Menu

Here is how I created a Shopify Mega Menu using bootstrap.js and yamm.js for a client on www.halloweencostumes4u.com

Yamm is a mega menu that is compatible with Bootstrap and offered me as a developer a great starting point for  a mega menu that could be managed using Shopify HTML and Theme settings.

How I built a Shopify Mega Menu

To implement the shopify mega menu I installed Yamm, and ensured Bootstrap.JS was included in the stack. I am including a small snippet to show how I did this..

I created a yamm-content instance and used a bootstrap row. Then because the accessories sub-nav was different. The key to this is displaying six navigation links, and then using the off-set value to output the right Shopify Mega Menu link list using Yamm and Bootstap.

<div class=”yamm-content”>
<div class=”row”>

{% if child_list_handle == ‘accessories’ %}
<ul class=”col-sm-3 list-unstyled”>
{% else %}
<ul class=”col-sm-2 list-unstyled”>
{% endif %}
{% for childlink in linklists[child_list_handle].links limit:6%}
<a href=”{{ childlink.url }}”><li class=”text-center”>{{childlink.title | escape }}</li></a>{% endfor %}

</ul>

{% if child_list_handle == ‘accessories’ %}
<ul class=”col-sm-3 list-unstyled”>
{% else %}
<ul class=”col-sm-2 list-unstyled”>
{% endif %}
{% for childlink in linklists[child_list_handle].links offset:6 limit:6%}
<a href=”{{ childlink.url }}”><li class=”text-center”>{{ childlink.title | escape }}</li></a>{% endfor %}
</ul>

View the video above of a Shopify Mega Menu using Shopify Grid system or Bootstrap Framework.

The menu is managed entirely in Shopify Navigation.

To implement on your website, contact me using the form.

[contact-form-7 id=”170″ title=”Contact form 2″]