Shopify. How to add item to megamenu (based on 58030+ templates)

Usually the mega menu consists of 6 menu items. To add one more item, perform the following changes.

1. Open site admin panel and navigate to Online Store > Themes > Edit HTML/CSS.

   

2. Open settings_schema.json file located inside the Config folder and save its copy.

   Add this code after the last megamenu item code, that will be around Line 1700, before the closing ] for the menu section. Since item 6 is no longer the last item in the list, we need to add a comma prior the new code.

   	  
   	  ,
         { 
   "type": "header", 
   "content": "Item 7" 
   }, 
   { 
   "type": "text", 
   "id": "mm7_name", 
   "label": "Item name", 
   "info": "Clear this field to disable Item #1" 
   }, 
   { 
   "type": "text", 
   "id": "mm7_link", 
   "label": "Item URL" 
   }, 
   { 
   "type": "text", 
   "id": "mm7_badge", 
   "label": "Item badge" 
   }, 
   { 
   "type": "paragraph", 
   "content": "———————————————————" 
   }, 
   { 
   "type": "checkbox", 
   "id": "mm7_sub_toggle", 
   "label": "Submenu" 
   }, 
   { 
   "type": "radio", 
   "id": "mm7_sub_content", 
   "options": [ 
   { 
   "value": "links_1", 
   "label": "1. Single menu (linklist)" 
   }, 
   { 
   "value": "links_4", 
   "label": "2. Block of menus (linklists)" 
   }, 
   { 
   "value": "products", 
   "label": "3. Products (collection)" 
   }, 
   { 
   "value": "blog", 
   "label": "4. Blog" 
   } 
   ] 
   }, 
   { 
   "type": "link_list", 
   "id": "mm7_sub_links_1", 
   "label": "1. Choose single menu (linklist)" 
   }, 
   { 
   "type": "link_list", 
   "id": "mm7_sub_links_4_1", 
   "label": "2. Choose Block of menus (linklists)" 
   }, 
   { 
   "type": "image", 
   "id": "img_list7_img_1.jpg", 
   "label": "Image file", 
   "max-width": 255, 
   "max-height": 167, 
   "info": "Maximum slide image dimensions are 255x167px" 
   }, 
   { 
   "type": "link_list", 
   "id": "mm7_sub_links_4_2" 
   }, 
   { 
   "type": "image", 
   "id": "img_list7_img_2.jpg", 
   "label": "Image file", 
   "max-width": 255, 
   "max-height": 167, 
   "info": "Maximum slide image dimensions are 255x167px" 
   }, 
   { 
   "type": "link_list", 
   "id": "mm7_sub_links_4_3" 
   }, 
   { 
   "type": "image", 
   "id": "img_list7_img_3.jpg", 
   "label": "Image file", 
   "max-width": 255, 
   "max-height": 167, 
   "info": "Maximum slide image dimensions are 255x167px" 
   }, 
   { 
   "type": "link_list", 
   "id": "mm7_sub_links_4_4" 
   }, 
   { 
   "type": "image", 
   "id": "img_list7_img_4.jpg", 
   "label": "Image file", 
   "max-width": 255, 
   "max-height": 167, 
   "info": "Maximum slide image dimensions are 255x167px" 
   }, 
   { 
   "type": "collection", 
   "id": "mm7_sub_products", 
   "label": "3. Choose products (collection)" 
   }, 
   { 
   "type": "blog", 
   "id": "mm7_sub_blog", 
   "label": "4. Choose blog" 
   }
   

   

3. Save the changes.

4. In the Snippets > widget-megamenu.liquid file change 6 to 7 in the following code around Line 10:

   {% for i in (1..6) %} 

5. Save the changes.

   

6. In the Locales > en.default.json file add the code for the new menu item around Line 26:

7. Save the changes.

   

8. Save the changes and refresh the site.

   

Take a look at the selection of top-notch Shopify themes.

Feel free to check the detailed video tutorial below: