Shopify Mega Menu in Dawn Theme

December 27, 2021

Compatibility: Dawn version 2.5 and lower

For updated code that works with any Shopify 2.0 Free themes, see link here.

A well-designed navigation bar is essential for any website, and Shopify stores are no exception. A mega menu can be a great way to improve the navigation of your Shopify store, especially if you have a lot of products or categories.

What is a mega menu?

A mega menu is a type of drop-down menu that allows you to display a large amount of information in a user-friendly way. This can be helpful for Shopify stores that have a lot of products or categories, as it can make it easier for customers to find what they are looking for.

Why is mega menu used in Shopify websites?

Improved navigation for stores with a large number of categories or products: Mega menus can help users find what they are looking for more easily by displaying all of the categories and subcategories in one place. This can be especially helpful for stores with a wide variety of products.

Better user experience: By making it easier for users to navigate your store, mega menus can lead to a better overall user experience. This can result in increased sales and customer satisfaction.

Marketing Powerhouse: Mega menus go beyond just navigation. They offer a prime location to showcase special offers, highlight new products, and promote specific collections. You can even incorporate high-quality images or short videos to grab attention and drive sales.

Flexibility and Customization: Many Shopify themes allow for mega menu customization. You can tailor the layout, colors, and content to seamlessly integrate with your brand identity and marketing goals.

Additional tips

When creating your mega menu, prioritize organization and clear navigation.
Use concise and descriptive language for menu items.
Consider incorporating high-quality images to visually represent your products.
Leverage the marketing potential by highlighting promotions and new arrivals.

By following these tips, you can create a mega menu that enhances both user experience and marketing efforts on your Shopify store.

[]

Steps on how to add Mega Menu to Dawn theme?

Step #1. Open your code editor

From you Admin page, go to Online store, then Themes. Choose the theme you want to edit, then click the three dots, then Edit code

Step #2. Open the file and find the code

Under the Sections folder, open the header.liquid file and "menu-drawer__navigation" with <nav> tag and delete the code, replace it with the code below.

<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. Find the code in the same file.

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, '')).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>

Step #4. Add the schema

Go all the way down, before the last "]", add the code below.

,{
"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"
}
]
}

Step #5. Add a new asset file

Open the Asset folder, and Add a new asset. Name it ''mega-header", and paste the code below. Change the root colors to personalize.

: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: white;
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 ======*/
 
.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;
}
 
.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%;
display: flex;
align-items: center;
justify-content: center;
}
.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 {
d: path("M5,6 L5,6 L2,3 L5,6 L5,6 L8,3");
}
 
.megaDrawer:hover .drawerbtn--tablet > svg {
stroke: var(--light-color);
}
 
.megaLinkBox--tablet:hover label {
color: var(--light-color);
background-color: var(--gray-color); /* background color of the tabs when hovered */
}
 
.drawerbtn--tablet {
width: 30px;
height: 30px;
position: relative;
}
 
.arrowDown {
width: 30px;
height: 30px;
position: relative;
display: flex;
}
 
.arrowDown svg > path {
transition: all 1s ease-out;
}
.childSvgClose {
display: none;
}
 
.megaLinkBox--tablet:hover .childSvgDd path {
d: path("M2,2 L5,5 L8,8 L5,5 L8,2 L2,8");
}
.megaLinkBox--tablet:hover .childSvgClose path {
d: path("M5,6 L5,6 L2,3 L5,6 L5,6 L8,3");
}
 
.megaLinkBox--tablet:hover .arrowDown> svg {
stroke: var(--light-color);
}
 
.megaLinkBox--tablet > input:checked ~ label > span.arrowDown > svg.childSvgDd {
display: none;
}
.megaLinkBox--tablet > input:checked ~ label > span.arrowDown > svg.childSvgClose {
display: block;
}
.megaLinkImage {
width: 100%;
display: flex;
justify-content: center;
}
.megaLinkImage img{
width: 100px;
aspect-ratio: 1;
}

Step #6. Add the stylesheet

In the header.liquid, paste the code at the top. See the video.

Step #7. Save the changes

Once you've added the code, save your changes to the theme code by clicking the SAVE button on the right hand upper corner.

Step #8. Customize theme

Go to the theme editor by clicking three dots on your left hand upper corner, then Customize theme to add your images. See video on how to add the images. Make sure to SAVE once you are done customizing.

Conclusion

Mega menus offer a valuable combination of improved navigation, a better user experience, and built-in marketing capabilities. If you have a Shopify store with a large product selection or want to incorporate strategic marketing elements into your navigation, a well-designed mega menu can be a game-changer.

6 comments

Hi,

Please check the compatibility before following the tutorial.

Made4Uo • August 2, 2023

it is not working dawn-9. My website voova.com

Fawez • June 24, 2023

Menu isnt showing on mobile

goh • November 3, 2022

Hi @Ali,
The code might not be working on a newer version of Dawn.

Hi @Phillip,
There should be an option in your theme editor to change the color of the header as shown on the video

Made4Uo • September 2, 2022

Code works for the most part, but the background color seems to be transparent, how can I change that

Phillip j Cheney • August 31, 2022

The code for some reason isn’t showing correctly. Please fix it!

Ali • January 13, 2022

Shopify Mega Menu in Dawn Theme

What is a mega menu?

Why is mega menu used in Shopify websites?

Additional tips

Steps on how to add Mega Menu to Dawn theme?

Step #1. Open your code editor

Step #2. Open the file and find the code

Step #3. Find the code in the same file.

Step #4. Add the schema

Step #5. Add a new asset file

Step #6. Add the stylesheet

Step #7. Save the changes

Step #8. Customize theme

Conclusion

6 comments

Leave a comment

Your cart is empty

Your cart is empty

Country/Region

Language

Country/Region

Language

Shopify Mega Menu in Dawn Theme

What is a mega menu?

Why is mega menu used in Shopify websites?

Additional tips

Steps on how to add Mega Menu to Dawn theme?

Step #1. Open your code editor

Step #2. Open the file and find the code

Step #3. Find the code in the same file.

Step #4. Add the schema

Step #5. Add a new asset file

Step #6. Add the stylesheet

Step #7. Save the changes

Step #8. Customize theme

Conclusion

6 comments

Leave a comment