Shopify: Add more than 7 Mega Menus on Turbo Theme in 5 steps

There are 7 Mega Menus we have on Turbo Theme by default.

To add more than 7 Mega Menus you need to follow these 5 following steps.

1- Login to your Shopify Store:
– Online Store
– Themes
– Live Theme >> Actions >> Edit Code

2- Layout

– theme.liquid
– Find following code <div class=”mega-menu-container”>
– Within this div you will find 7 Mega Menus
– Just replicate code for upto desired Mega Menus
{% if settings.mega_menu_7 %}
{% section ‘mega-menu-7’ %}
{% endif %}
change number 7 to 8 and so on
– Save file

3- Sections
– Find file mega-menu-7.liquid, copy all code of this file and then close it
– Add New Section save with name mega-menu-8.liquid paste all code here and Save file
– Find following code in mega-menu-8.liquid
<div class=”dropdown_container mega-menu mega-menu-7″ data-dropdown=”{{ section.settings.parent | handleize }}”>
change this to
<div class=”dropdown_container mega-menu mega-menu-8″ data-dropdown=”{{ section.settings.parent | handleize }}”>

– find following code in same file
“name”: “Mega menu 7”,
change this to
“name”: “Mega menu 8”,
– Save file

4- Config
– Find file settings_schema.json
– Find following code “name”: “Mega menus”,
– Within this code you need to replicate a set of code for upto desired Mega Menus by changing number in each set like
“type”: “checkbox”,
“id”: “mega_menu_8”,
“label”: “Enable mega menu 8”
“type”: “checkbox”,
“id”: “mega_menu_9”,
“label”: “Enable mega menu 9”
“type”: “checkbox”,
“id”: “mega_menu_10”,
“label”: “Enable mega menu 10”
and so on…
Here just remember to add first comma (,) on start but in the end of code no need comma (,)
– Save file

5- Goto customize theme
You will find your newly added menus there, just enable and use.


Leave a Comments

Your email address will not be published. Required fields are marked *