A mega menu allows you to show several menus items from one dropdown in your store’s main navigation. and its located in the Header.
If the visitors can see what your products look like before going to product pages, they can choose the right one quickly. This reduces the likelihood of customers leaving your store because it is too hard to find what they want.
Some ecommerce have lots of products and they want to show all the products tag into the menu that time they good to use the mega menu.
Adding mega menu is too complicated into the shopify theme without App but here we show you to how to add the megamenu in the shopify without any App.
Step 1: In order to create the mega menu first set the menu structure into the navigation and set all the menu
From your Shopify admin, go to Online Store > Navigation > Add menu
Here set the all the menu
Step 2: Then after go to shopify admin > Themes > Actions > Edit code
search the header.liquid file into the section folder the search the “menu-drawer__navigation” with <nav> tag and delete all the code and paste the below code
|
<nav class=”megaContainer–tablet”> <div class=”megaHeader megaHeader–tablet”> {% for block in section.blocks %} {% assign blockIndex = forloop.index0 %} {% if block.settings.title == ‘Home’ %} <a class=”megaA” href=”/” style=”width: 100%; text-align: left;”>{{block.settings.title}}</a> {% else %} <div class=”megaDrawer” style=”width: 100%;”> {% if block.settings.mega_url != blank %} <a class=”drawerbtn megaA” href=”{{block.settings.mega_url}}” style=”width: 100%; justify-content: space-between;”>{{block.settings.title}}</a> {% else %} <label for=”megaDrawerInput–{{forloop.index0}}” class=”drawerbtn drawerbtn–tablet” style=”width: 100%; justify-content: space-between;”> {{block.settings.title}} {% if block.settings.mega_link != blank %} <svg viewBox=”0 0 10 10″ class=”svgDd megaSvg” data-svg=”svgDd–{{forloop.index0}}”> <path d=”M5,6 L5,6 L2,3 L5,6 L5,6 L8,3″ /> </svg> <svg viewBox=”0 0 10 10″ class=”svgClose megaSvg” data-svg=”svgClose–{{forloop.index0}}”> <path d=”M2,2 L5,5 L8,8 L5,5 L8,2 L2,8″ /> </svg> {% endif %} </label> <input type=”checkbox” id=”megaDrawerInput–{{forloop.index0}}” onclick=”checkInput(this)” data-input=”{{forloop.index0}}”> <div class=”megaDrawerContent–tablet”> {% if block.settings.title != blank %} <div class=”megaDrawerHeader megaDrawerHeader–tablet” style=”background-color: {{block.settings.header_bg}}”> <h2>{{block.settings.header_title}}</h2> </div> {% else %} <div class=”megaDrawerHeader megaDrawerHeader–tablet” style=”background-color: inherit;”></div> {% endif %} <div class=”megaDrawerWrapper–tablet”> {% if block.settings.mega_link != blank %} <div class=”megaLinkContainer” style=”flex-direction: column; width: 100%;”> {% for link in block.settings.mega_link.links %} <div class=”megaLinkBox–tablet” {% if link.links == blank %} style=”padding: 0 5%” {% endif %}> {% if link.links == blank %} <a class=”megaLink” href=”{{link.url}}”>{{ link.title | escape }}</a> {% else %} <label for=”megaLink–{{blockIndex}}-{{forloop.index0}}”> <span >{{ link.title | escape }}</span> <span class=”arrowDown”> <svg viewBox=”0 0 10 10″ class=”childSvgDd megaSvg” data-svg=”childSvgDd–{{blockIndex}}-{{forloop.index0}}”> <path d=”M5,6 L5,6 L2,3 L5,6 L5,6 L8,3″ /> </svg> <svg viewBox=”0 0 10 10″ class=”childSvgClose megaSvg” data-svg=”childSvgClose–{{blockIndex}}-{{forloop.index0}}”> <path d=”M2,2 L5,5 L8,8 L5,5 L8,2 L2,8″ /> </svg> </span> </label> <input type=”checkbox” id=”megaLink–{{blockIndex}}-{{forloop.index0}}” onclick=”checkInput(this)” data-child-input=”{{blockIndex}}-{{forloop.index0}}”> {% endif %} <div class=”childLinkContainer”> {% for child_link in link.links %} <a href=”{{child_link.url}}”>{{child_link.title | escape }}</a> {% endfor %} </div> </div> {% endfor %} </div> {% endif %} </div> </div> {% endif %} </div> {% endif %} {% endfor %} </div> </nav>
|
Step 3: Then after find “header__inline-menu”, delete the code as shown in the video. Paste the code below.
|
{% assign mega_img_file = section.settings.mega_drawer_image | strip_html | downcase | parse_json | append: ‘}’ | prepend: ‘{‘ %} {% assign sample_img = sample | file_url %} <nav class=”megaContainer” style=”{% if section.settings.logo_position == ‘top-center’ %} grid-area: 2/-3; {% endif %} “> <div class=”megaHeader alignCenter”> {% for block in section.blocks %} {% if block.settings.title == ‘Home’ %} <a class=”megaA drawerbtn” href=”/”>{{block.settings.title}}</a> {% else %} <div class=”megaDrawer alignCenter” style=”height: 50px”> {% if block.settings.mega_url == blank %} <button class=”drawerbtn”>{{block.settings.title}} <span> <svg viewBox=”0 -.5 11 10″ class=”megaSvg”> <path d=”M5,6 L5,6 L2,3 L5,6 L5,6 L8,3″ /> </svg> </span> </button> {% else %} <a class=”megaA drawerbtn” href=”{{block.settings.mega_url}}”>{{block.settings.title}}</a> {% endif %} {% if block.settings.mega_link != blank %} <div class=”megaDrawerContent absolutePosition” style=”width: {% if block.settings.mega_width == true %} 95% {% else %} min-content {% endif %}; {% if section.settings.logo_position != ‘middle-left’ %} top: 100%{% endif %}; “> {% if block.settings.title != blank %} <div class=”megaDrawerHeader” style=”background-color: {{block.settings.header_bg}}”> <h2>{{block.settings.header_title}}</h2> </div> {% else %} <div class=”megaDrawerHeader” style=”background-color: inherit;”></div> {% endif %} <div class=”megaDrawerWrapper”> {% if block.settings.mega_link != blank %} <div class=”megaLinkContainer”> {% for link in block.settings.mega_link.links %} <div class=”megaLinkBox” style=”padding: 10px”> <div class=”megaLinkImage” data-mega-image=”{{link.title | downcase | replace: ‘ ‘, ‘-‘ }}” > </div> <a {% if link.links == blank %} class=”megaLink” href=”{{link.url}}” {% else %} style=”font-weight:600; text-align: center”{% endif %}>{{ link.title | escape }}</a> {% for child_link in link.links %} <a href=”{{child_link.url}}”>{{child_link.title | escape }}</a> {% endfor %} </div> {% endfor %} </div> {% endif %} {% if block.settings.mega_product != blank %} <a href=”{{block.settings.mega_product.url}}” style=”text-decoration: none”> <div class=”megaProduct”> {%- assign product_media = block.settings.mega_product.selected_or_first_available_variant.featured_media | default: block.settings.mega_product.featured_media -%} <div class=”megaProductImage”> <img src=”{{product_media | img_url: master }}” alt=”{{product_media.alt | escape }}”> </div> <div class=”megaProductInfo”> <h4 style=”margin: 0 0 5%;”>{{block.settings.mega_product.title | escape}}</h4> <p style=”margin: 0;”>{{block.settings.mega_product.price | money}}</p> </div> </div> </a> {% endif %} {% if block.settings.mega_image != blank %} {% if block.settings.mega_image_link != blank %} <a href=”{{block.settings.mega_image_link}}”> {% endif %} <div class=”megaImage”> <img src=”{{block.settings.mega_image | img_url: ‘master’}}” alt=”{{block.settings.mega_image.alt | escape }}” style=”width: {{block.settings.mega_image_size}}%;”> </div> {% if block.settings.mega_image_link != blank %}</a>{% endif %} {% endif %} </div> </div> {% endif %} </div> {% endif %} {% endfor %} </div> </nav> <script> function checkInput (input){ const inputNum = input.dataset.input; const childInputNum = input.dataset.childInput; if(inputNum) { console.log(inputNum); if(input.checked == true) { document.querySelector(`[data-svg=”svgDd–${inputNum}”]`).style.display = “none”; document.querySelector(`[data-svg=”svgClose–${inputNum}”]`).style.display = “block”; } else { document.querySelector(`[data-svg=”svgDd–${inputNum}”]`).style.display = “block”; document.querySelector(`[data-svg=”svgClose–${inputNum}”]`).style.display = “none”; } } if(childInputNum) { console.log(childInputNum); if(input.checked == true) { document.querySelector(`[data-svg=”childSvgDd–${childInputNum}”]`).style.display = “none”; document.querySelector(`[data-svg=”childSvgClose–${childInputNum}”]`).style.display = “block”; } else { document.querySelector(`[data-svg=”childSvgDd–${childInputNum}”]`).style.display = “block”; document.querySelector(`[data-svg=”childSvgClose–${childInputNum}”]`).style.display = “none”; } } } const megaImgRaw = “{{mega_img_file}}”; const megaImgSplit = megaImgRaw.split(/[,]/).map(col => col.replace(/[“s{}]/g |
