Adding social proof to your product pages can significantly increase trust and conversion rates. In this tutorial, we'll show you how to add a stylish Verified Testimonials block to your Shopify store using the Dawn theme . This block displays user avatars, names, and a verified icon—all customizable from the theme editor. ✅ Step 1: Open the main-product.liquid file Go to your Shopify Admin. Navigate to: Online Store → Themes → Edit code . Open the file: sections/main-product.liquid . Now add this code exactly as I’ve shown in the video — and yes, make sure to test it on a duplicate theme first! Full Code {%- when 'verified-testimonials' -%} <style> .verified-testimonials-container-{{block.id}} .verified-testimonials-user-icon-img-class { width: {{block.settings.verified_use...
Creating an intuitive and comprehensive navigation menu is crucial for an effective online store. Shopify's Dawn theme offers flexibility to add both a mega menu and a dropdown menu in your header. This guide will walk you through the steps to integrate these menus seamlessly.
Step 1: Add the Required HTML Structure
First, you need to update your theme's HTML structure to support both mega menus and dropdown menus. Here’s the updated HTML structure for your navigation menu. Please open the snippets/header-mega-menu.liquid and paste the code given below
<nav class="header__inline-menu">
<ul class="list-menu list-menu--inline" role="list">
{%- for link in section.settings.menu.links -%}
<li>
{%- if link.links != blank -%}
{%- assign is_mega_menu = false -%}
{%- for block in section.blocks -%}
{%- if block.type == 'menu' and block.settings.mega_menu_name == link.title -%}
{%- assign is_mega_menu = true -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- if is_mega_menu -%}
<!-- Mega Menu -->
<header-menu>
<details id="Details-HeaderMenu-{{ link.handle }}" class="mega-menu">
<div class="mega-menu-connector"><holder></holder></div>
<summary
id="HeaderMenu-{{ link.handle }}"
class="header__menu-item list-menu__item link focus-inset"
>
<span
{%- if link.child_active %}
class="header__active-menu-item"
{% endif %}
>
{{- link.title | escape }}
</span>
{% render 'icon-caret' %}
</summary>
<div
id="MegaMenu-Content-{{ link.handle }}"
class="mega-menu__content gradient motion-reduce global-settings-popup"
tabindex="-1"
>
<ul
class="mega-menu__list page-width{% if link.levels == 1 %} mega-menu__list--condensed{% endif %}"
role="list"
>
{%- for childlink in link.links -%}
<li>
<a
id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"
href="{{ childlink.url }}"
class="mega-menu__link mega-menu__link--level-2 link{% if childlink.current %} mega-menu__link--active{% endif %}"
{% if childlink.current %}
aria-current="page"
{% endif %}
>
{{ childlink.title | escape }}
</a>
{%- if childlink.links != blank -%}
<ul class="list-unstyled" role="list">
{%- for grandchildlink in childlink.links -%}
<li>
<a
id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
href="{{ grandchildlink.url }}"
class="mega-menu__link link{% if grandchildlink.current %} mega-menu__link--active{% endif %}"
{% if grandchildlink.current %}
aria-current="page"
{% endif %}
>
{{ grandchildlink.title | escape }}
</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</div>
</details>
</header-menu>
{%- else -%}
<!-- Dropdown Menu -->
<header-menu>
<details id="Details-HeaderMenu-{{ link.handle }}">
<summary
id="HeaderMenu-{{ link.handle }}"
class="header__menu-item list-menu__item link focus-inset"
>
<span
{%- if link.child_active %}
class="header__active-menu-item"
{% endif %}
>
{{- link.title | escape }}
</span>
{% render 'icon-caret' %}
</summary>
<ul
id="HeaderMenu-MenuList-{{ link.handle }}"
class="header__submenu list-menu list-menu--disclosure gradient caption-large motion-reduce global-settings-popup"
role="list"
tabindex="-1"
>
{%- for childlink in link.links -%}
<li>
{%- if childlink.links == blank -%}
<a
id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"
href="{{ childlink.url }}"
class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if childlink.current %} list-menu__item--active{% endif %}"
{% if childlink.current %}
aria-current="page"
{% endif %}
>
{{ childlink.title | escape }}
</a>
{%- else -%}
<details id="Details-HeaderSubMenu-{{ link.handle }}-{{ childlink.handle }}">
<summary
id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"
class="header__menu-item link link--text list-menu__item focus-inset caption-large"
>
<span>{{ childlink.title | escape }}</span>
{% render 'icon-caret' %}
</summary>
<ul
id="HeaderMenu-SubMenuList-{{ link.handle }}-{{ childlink.handle }}"
class="header__submenu list-menu motion-reduce"
>
{%- for grandchildlink in childlink.links -%}
<li>
<a
id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
href="{{ grandchildlink.url }}"
class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if grandchildlink.current %} list-menu__item--active{% endif %}"
{% if grandchildlink.current %}
aria-current="page"
{% endif %}
>
{{ grandchildlink.title | escape }}
</a>
</li>
{%- endfor -%}
</ul>
</details>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</details>
</header-menu>
{%- endif -%}
{%- else -%}
<a
id="HeaderMenu-{{ link.handle }}"
href="{{ link.url }}"
class="header__menu-item list-menu__item link link--text focus-inset"
{% if link.current %}
aria-current="page"
{% endif %}
>
<span
{%- if link.current %}
class="header__active-menu-item"
{% endif %}
>
{{- link.title | escape }}
</span>
</a>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</nav>
Step 2: Style the Menus with CSS
Next, you'll need to add some CSS to ensure that the menus display correctly. Here are the styles you need to include:
<style>
/* Ensure submenus are hidden by default */
.header__submenu {
display: none;
}
.header__submenu li{
position: relative;
}
/* Show submenus when their parent <details> element is open */
details[open] > ul.header__submenu {
display: block;
}
/* Style for nested submenus to align correctly */
.header__submenu .header__submenu {
position: absolute;
left: 100%;
top: 0;
background: #fff;
padding-left: 10px; /* Padding for spacing */
margin-left: 1px; /* Counteract padding for proper alignment */
width: 20rem;
min-width: 100%;
border:1px solid #c1c1c1;
}
.mega-menu-connector {
position: relative;
display: flex;
justify-content: center;
}
.mega-menu-connector:after {
content: '';
width: 100%;
position: absolute;
opacity: 0;
padding-top: 2.4rem;
padding-bottom: 2.4rem;
}
.menu-6 ul.mega-menu__list.page-width.mega-menu__list--condensed {
display: block !important;
}
</style>
Step 3: Add Interactivity with JavaScript
To make the menus interactive, you need to add some JavaScript. Here’s the script you should include:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.mega-menu').hover(
function() {
$(this).find('.mega-menu__content').toggleClass('mega-menu-open');
}
);
document.querySelectorAll(".header__inline-menu details.mega-menu").forEach(item => {
const toggleOpen = (state) => item.toggleAttribute("open", state);
item.addEventListener("mouseover", () => toggleOpen(true));
item.addEventListener("mouseleave", () => toggleOpen(false));
item.querySelector(".mega-menu__content").addEventListener("mouseover", () => toggleOpen(true));
item.querySelector(".mega-menu__content").addEventListener("mouseleave", () => toggleOpen(false));
});
});
</script>
<script>
$(document).ready(function() {
$(".header__inline-menu details").on("mouseover", function() {
$(this).attr("open", true);
});
$(".header__inline-menu details").on("mouseleave", function() {
$(this).removeAttr("open");
});
$(".header__inline-menu details ul").on("mouseleave", function() {
$(this).closest("details").removeAttr("open");
});
});
</script>
Step 4: Add the Schema to the Header File
This schema will allow you to define and customize the mega menu from the Shopify admin interface.
{
"type": "menu",
"name": "Mega menu",
"settings": [
{
"type": "text",
"id": "mega_menu_name",
"label": "Mega Menu Name",
"default": "Main Menu"
}
]
}
Conclusion
By following these steps, you can add both a mega menu and a dropdown menu to the header of the Shopify Dawn theme. This integration will enhance your store's navigation, providing a better user experience for your customers. Customize the styles and interactivity further to match your store’s design and functionality requirements. Happy coding!
Wow Great. Thank You So Much, This Worked Perfectly!
ReplyDeleteWelcome :)
DeleteThank you so much! Amazing! Works. Q - how to make main sub-menu in menu with Bold font?
ReplyDelete