How To Add Mega-Menu In Shopify Without App

Feb 04, 2023

How To Add Mega-Menu In Shopify Without App

A mega menu allows you to show several menus items from one dropdown in your store’s main navigation. amd 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 Appbut 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 tfirst 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

{% 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 %}

{% 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 %}

{% if block.settings.mega_link != blank %}

</svg>

</svg>

{% endif %}

</label>

{% if block.settings.title != blank %}

<h2>{{block.settings.header_title}}</h2>

</div>

{% else %}

{% endif %}

{% if block.settings.mega_link != blank %}

{% for link in block.settings.mega_link.links %}

{% if link.links == blank %}

<a class="megaLink" href="{{link.url}}">{{ link.title | escape }}</a>

{% else %}

<span >{{ link.title | escape }}</span>

</svg>

</svg>

</span>

</label>

{% endif %}

{% for child_link in link.links %}

<a href="{{child_link.url}}">{{child_link.title | escape }}</a>

{% endfor %}

</div>

{% endfor %}

</div>

{% endif %}

</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 %}

{% for block in section.blocks %}

{% if block.settings.title == 'Home' %}

<a class="megaA drawerbtn" href="/">{{block.settings.title}}</a>

{% else %}

{% if block.settings.mega_url == blank %}

<button class="drawerbtn">{{block.settings.title}}

</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 %}

{% if block.settings.mega_link != blank %}

{% for link in block.settings.mega_link.links %}

</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 %}

{%- assign product_media = block.settings.mega_product.selected_or_first_available_variant.featured_media | default: block.settings.mega_product.featured_media -%}

</div>

<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>

</a>

{% endif %}

{% if block.settings.mega_image != blank %}

{% if block.settings.mega_image_link != blank %}

{% endif %}

</div>

{% if block.settings.mega_image_link != blank %}</a>{% endif %}

{% endif %}

</div>

{% endif %}

</div>

{% endif %}

{% endfor %}

</div>

</nav>

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, '')).map(s => s.split('.'));

const megaImgJSON = Object.fromEntries(megaImgSplit);

const megaLink = "{{sample_img}}";

window.onload = function () {

const megaImage = document.querySelectorAll('.megaLinkImage');

megaImage.forEach(function(image) {

for(const img in megaImgJSON) {

const imageBox = document.querySelector(`[data-mega-image="${img}"]`);

if (image.dataset.megaImage == img) {

const imgUrl = `${[img]}.${megaImgJSON[img]}`

const assetImgUrl = megaLink.split('?')[0] + `${imgUrl}`;

imageBox.insertAdjacentHTML(

'beforeend',

`<img src="${assetImgUrl}" alt="${assetImgUrl} + '.' + 'alt'">`);

}

})

}

</script>

Then go down and seach the "]" and paste the below schema code before that

"type": "richtext",

"id": "mega_drawer_image",

"label": "Enter the mega-link images",

"default": "<p> first-second-third.jpg, firstname.png, Firstname.gif<\/p>",

"info": "Use '-' if it is a two-word image name. File extension must match the file uploaded. Separate the image with comma. See default"

}

"blocks": [

{

"name": "mega header",

"type": "mega_header",

"settings": [

{

"type": "checkbox",

"id": "mega_width",

"default": false,

"label": "Drawer full-width"

{

"type": "url",

"label": "mega url",

"id": "mega_url",

"info": "Provide link if no drawer"

{

"type": "text",

"label": "mega url title",

"id": "title"

{

"type": "text",

"label": "mega header",

"id": "header_title"

{

"type": "color",

"label": "header color",

"id": "header_bg"

{

"type": "image_picker",

"label": "mega image",

"id": "mega_image"

{

"type": "range",

"label": "mega image size",

"id": "mega_image_size",

"default": 15,

"max": 100,

"min": 10

{

"type": "link_list",

"label": "mega link",

"id": "mega_link"

{

"type": "product",

"label": "mega product",

"id": "mega_product"

}

]

}

Then create the new CSS file under the Assets folder name mega-header.css and paste the below code.

:root {

--drawer-background: #f0eff1;

--parent-link-bg: black;

--dark-color: black; /* font color and icon color */

--light-color: white; /* font color and icon color when hovered */

--gray-color: #b1b0b5; /* background color when hovered */

}

/* CSS in header */

.header {

padding-top: 0 !important;

padding-bottom: 0 !important;

}

.megaContainer > * {

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

color: var(--dark-color);

}

.megaContainer--tablet > * {

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

color: var(--dark-color);

}

.megaContainer {

display: flex;

}

.megaHeader {

overflow: hidden;

font-family: Arial, Helvetica, sans-serif;

display: flex;

}

.megaHeader > a {

float: left;

font-size: 16px;

color: var(--dark-color);

text-align: center;

padding: 0 10px;

text-decoration: none;

}

.megaDrawer {

float: left;

overflow: hidden;

display: flex;

}

.megaDrawer .drawerbtn {

font-size: 16px;

border: none;

outline: none;

padding: 0 10px;

font: inherit;

margin: 0;

display: flex;

background: transparent;

align-items: center;

}

.megaHeader > a:hover, .megaDrawer:hover .drawerbtn {

color: black;

background-color: var(--parent-link-bg); /* background color of the tabs when hovered */

}

.megaDrawerContent {

display: none;

max-width: 95%; /* width of the whole dropdown container */

border-radius: 5px;

overflow: hidden;

box-shadow: 0px 10px 10px 0px rgb(0 0 0);

z-index: 4;

background-color: var(--drawer-background); /* background color of the drawer */

}

/* ====== HELPERS ======*/

.absolutePosition {

position: absolute;

left: 50%;

top: 70%;

transform: translateX(-50%);

}

.alignCenter {

align-items: center;

justify-content: center;

}

/* ====== HELPERS ======*/

.absolutePosition {

position: absolute;

left: 50%;

top: 70%;

transform: translateX(-50%);

}

.alignCenter {

align-items: center;

justify-content: center;

}

/* ====== HELPERS ======*/

.megaDrawerContent .megaDrawerHeader {

padding: 5px 10px;

color: var(--light-color);

}

.megaDrawerHeader {

white-space: nowrap;

}

.megaDrawerHeader h2 {

margin: 0;

font-size: 20px;

}

@media only screen and (min-width: 1000px) {

.megaDrawer:hover .megaDrawerContent {

display: block;

}

.megaLinkBox {

float: left;

line-height: 1;

}

.megaLinkContainer {

display: flex;

justify-content: center;

}

.megaLink{

font-weight: 600;

}

.megaLink:hover {

text-decoration: underline;

}

.megaLinkBox > a {

float: none;

color: var(--parent-link-bg);

padding: 5px;

text-decoration: none;

display: block;

font-size: clamp(14px, 1vw, 16px);

overflow-wrap: break-word;

}

.megaLinkBox a:not(:first-of-type):not(:first-child):hover {

background-color: var(--gray-color);

}

.megaLink {

text-align: center;

}

.megaDrawerWrapper {

display: flex;

justify-content: space-around;

flex-direction: column;

overflow: auto;

background-color: #ffffff;

}

.megaProduct {

display: flex;

gap: 15px;

margin: 10px;

}

.megaProductImage {

display: flex;

flex-direction: column;

justify-content: center;

}

.megaProductInfo {

display: flex;

flex-direction: column;

justify-content: center;

white-space: nowrap;

}

.megaProductInfo > * {

font-size: clamp(1rem, 1vw, 1.6rem);

}

.megaImage {

width: 100%;

align-items: center;

/* display:flex; */

justify-content: center;

position: relative;

bottom: 122px;

}

.megaImage img {

margin: 1%;

}

@media screen and (max-width: 1000px) {

.megaContainer {

display: none;

}

/*==== TABLET size ====*/

.megaHeader--tablet {

width: 100%;

flex-direction: column;

align-items: flex-start;

padding: 5%;

}

.megaA {

text-decoration: none;

color: var(--dark-color);

}

.megaDrawer {

align-items: flex-start;

flex-direction: column;

}

.megaDrawer > input {

display: none;

}

.megaDrawer > input:checked + .megaDrawerContent--tablet{

display: block;

}

.megaDrawerContent--tablet {

display: none ;

width: 100%;

padding: 5%;

}

.megaDrawerHeader--tablet

display: flex;

justify-content: center;

}

.megaDrawer:hover .drawerbtn svg{

stroke: var(--light-color);

}

.megaDrawerWrapper--tablet {

display: flex;

}

.arrowDown > *{

width: 20px;

margin-left: 5px;

}

.childLinkContainer {

display: none;

flex-direction: column;

margin-left: 10%;

white-space: initial;

}

.megaLinkBox--tablet a {

text-decoration: none;

color: var(--dark-color);

}

.megaLinkBox--tablet > a {

font-weight: 600;

}

.megaLinkBox--tablet a:hover {

text-decoration: underline;

}

.megaLinkBox--tablet > input {

display: none;

}

.megaLinkBox--tablet > label > span {

font-weight: 600;

}

.megaLinkBox--tablet > label {

display: flex;

padding: 0 5%;

justify-content: space-between;

}

.megaLinkBox--tablet > label:hover {

color: var(--light-color);

background-color: var(--gray-color);

}

.megaLinkContainer > .megaLinkBox--tablet > input:checked + .childLinkContainer {

display: flex;

}

/*======= ICONs ======*/

.megaSvg {

fill: none;

stroke: var(--dark-color);

display: flex;

width: 25px;

}

.drawerbtn--tablet svg > path {

transition: all 700ms ease-out;

}

.svgClose {

display: none;

}

.megaDrawer:hover .svgDd path {

d: path("M2,2 L5,5 L8,8 L5,5 L8,2 L2,8");

}

.drawerbtn:hover .svgClose path {&

Blog Detail

How To Add Mega-Menu In Shopify Without App

You may also like

Continue Reading