Compatibility: Dawn version 2.5 and lower
For updated code that works with any Shopify 2.0 Free themes, see link here.
Add a mega menu or header in your Dawn Shopify theme. No app or subscription needed. Personalized the mega-header to your liking. Add multiple images.
Creating a mega menu without an app made possible.
1. Go to Admin Shopify store > Themes > Actions > Edit Code.
2. In Section folder, create a new section, and name it "mega-header".
3. Open the header.liquid under the Section folder.
4. Find the "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> |
5. 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> |
6. 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" } ] } |
7. 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; } |
8. In the header.liquid, paste the code at the top. See the video.
| {{ 'mega-header.css' | asset_url | stylesheet_tag }} |
That's it. All you need is to is edit the theme editor and add your images. See video on how to add the images
4 comentários
Menu isnt showing on mobile
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
Code works for the most part, but the background color seems to be transparent, how can I change that
The code for some reason isn’t showing correctly. Please fix it!