How to add images to megamenu ( Shopify Dawn Theme 15.1.0 )

dreamtechzone_5 · ‎09-10-2024

Hello Everyone!

I am using Shopify Dawn Theme 15.1.0. I want to add image to megamenu. I have added this code to my previous Dawn Themes version 11. It worked well. How can I fix this? It would be very helpful if someone could give instructions. Then everyone will be helped. Hope you can help me. Thank you very much.

https://dream-tech-zone.myshopify.com/

Password: Admin

But this code is not working in Dawn theme version 15.1.0.

{%- if settings.cart_type == "drawer" -%}
{{ 'component-cart-drawer.css' | asset_url | stylesheet_tag }}
{{ 'component-cart.css' | asset_url | stylesheet_tag }}
{{ 'component-totals.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-discounts.css' | asset_url | stylesheet_tag }}
{%- endif -%}
{%- if section.blocks.size >= 2 -%}
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
media="print"
onload="this.media='all'"
/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js" defer="defer"></script>
{%- endif -%}
<style>
header-drawer {
justify-self: start;
margin-left: -1.2rem;
}

{%- if section.settings.sticky_header_type == 'reduce-logo-size' -%}
.scrolled-past-header .header__heading-logo-wrapper {
width: 75%;
}
{%- endif -%}

{%- if section.settings.menu_type_desktop != "drawer" -%}
@media screen and (min-width: 990px) {
header-drawer {
display: none;
}
}
{%- endif -%}

.menu-drawer-container {
display: flex;
}

.list-menu {
list-style: none;
padding: 0;
margin: 0;
}

.list-menu--inline {
display: inline-flex;
flex-wrap: wrap;
}

summary.list-menu__item {
padding-right: 2.7rem;
}

.list-menu__item {
display: flex;
align-items: center;
line-height: calc(1 + 0.3 / var(--font-body-scale));
}

.list-menu__item--link {
text-decoration: none;
padding-bottom: 1rem;
padding-top: 1rem;
line-height: calc(1 + 0.8 / var(--font-body-scale));
}

@media screen and (min-width: 750px) {
.list-menu__item--link {
padding-bottom: 0.5rem;
padding-top: 0.5rem;
}
}
{%- comment -%} mega-menu-images-style {%- endcomment -%}
.mega_menu_img img{
max-width:100%;
height: auto;
display: block;
margin-right: auto;
margin-left: auto;
object-fit: cover;
text-decoration: none;
transition: transform var(--duration-long) ease;
}
.mega_menu_img{
padding-bottom: 20px;
}
.mega_menu_img .mega-menu__link{
padding-top: 0;
}
.mega_menu_img div{
text-align: center;
overflow: hidden;
padding: 0;
margin: 0;
}

.mega_menu_img .title{
padding-top: 0.8rem;
font-size: 1.5rem;
}
.mega_menu_img img{
transition: transform 0.5s ease;
}
.mega_menu_img:hover img{
transform: scale(1.03);
}
.mega-menu__list {
gap: 0;
display: flex;
padding: 0;
flex-wrap: wrap;
justify-content: center;
row-gap: 20px;
}
@media (min-width: 768px) {
.mega-menu__list > li{
list-style: none;
display: block;
flex: 0 0 20%;
max-width: 25%;
padding-right: 15px;
}
}
.mega_menu_img.slide{
flex: 0 0 260px;
max-width: 100%;
margin: 0;
padding-right: 15px;
scroll-snap-align: start;
}
.mega_menu_img.slide:first-child{
padding-left: 0;
}
.js .menu-drawer__submenu{
z-index: 2;
}
.swiper{
margin-top: 15px;
padding: 0 3rem;
}

.swiper .mega-menu__link .title{
text-align: start;
}
</style>
{%- style -%}
.header {
padding: {{ section.settings.padding_top | times: 0.5 | round: 0 }}px 3rem {{ section.settings.padding_bottom | times: 0.5 | round: 0 }}px 3rem;
}

.section-header {
position: sticky; /* This is for fixing a Safari z-index issue. PR #2147 */
margin-bottom: {{ section.settings.margin_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-header {
margin-bottom: {{ section.settings.margin_bottom }}px;
}
}

@media screen and (min-width: 990px) {
.header {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

{%- liquid
for block in section.blocks
if block.type == '@app'
assign has_app_block = true
endif
endfor
-%}

<{% if section.settings.sticky_header_type != 'none' %}sticky-header data-sticky-type="{{ section.settings.sticky_header_type }}"{% else %}div{% endif %} class="header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %}">
{%- liquid
assign social_links = false
assign localization_forms = false

if settings.social_twitter_link != blank or settings.social_facebook_link != blank or settings.social_pinterest_link != blank or settings.social_instagram_link != blank or settings.social_youtube_link != blank or settings.social_vimeo_link != blank or settings.social_tiktok_link != blank or settings.social_tumblr_link != blank or settings.social_snapchat_link != blank
assign social_links = true
endif

if localization.available_countries.size > 1 and section.settings.enable_country_selector or section.settings.enable_language_selector and localization.available_languages.size > 1
assign localization_forms = true
endif
-%}
<header class="header header--{{ section.settings.logo_position }} header--mobile-{{ section.settings.mobile_logo_position }} page-width{% if section.settings.menu_type_desktop == 'drawer' %} drawer-menu{% endif %}{% if section.settings.menu != blank %} header--has-menu{% endif %}{% if has_app_block %} header--has-app{% endif %}{% if social_links %} header--has-social{% endif %}{% if shop.customer_accounts_enabled %} header--has-account{% endif %}{% if localization_forms %} header--has-localizations{% endif %}">
{%- if section.settings.menu != blank -%}
{% comment %}
Renders a header drawer menu for mobile and desktop.
Usage:
{% render 'header-drawer' %}
{% endcomment %}
<header-drawer data-breakpoint="{% if section.settings.menu_type_desktop == 'drawer' %}desktop{% else %}tablet{% endif %}">
<details id="Details-menu-drawer-container" class="menu-drawer-container">
<summary
class="header__icon header__icon--menu header__icon--summary link focus-inset"
aria-label="{{ 'sections.header.menu' | t }}"
>
<span>
{% render 'icon-hamburger' %}
{% render 'icon-close' %}
</span>
</summary>
<div id="menu-drawer" class="gradient menu-drawer motion-reduce color-{{ section.settings.menu_color_scheme }}">
<div class="menu-drawer__inner-container">
<div class="menu-drawer__navigation-container">
<nav class="menu-drawer__navigation">
<ul class="menu-drawer__menu has-submenu list-menu" role="list">
{%- for link in section.settings.menu.links -%}
<li>
{%- assign imagesPresent = false -%}
{%- for block in section.blocks -%}
{%- if block.settings.link_name == link.title -%}
{%- assign imagesPresent = true -%}
{%- endif -%}
{%- endfor -%}
{%- if link.links != blank or imagesPresent -%}
<details id="Details-menu-drawer-menu-item-{{ forloop.index }}">
<summary
id="HeaderDrawer-{{ link.handle }}"
class="menu-drawer__menu-item list-menu__item link link--text focus-inset{% if link.child_active %} menu-drawer__menu-item--active{% endif %}"
>
{{ link.title | escape }}
{% render 'icon-arrow' %}
{% render 'icon-caret' %}
</summary>
<div
id="link-{{ link.handle | escape }}"
class="menu-drawer__submenu has-submenu gradient motion-reduce"
tabindex="-1"
>
<div class="menu-drawer__inner-submenu">
<button class="menu-drawer__close-button link link--text focus-inset" aria-expanded="true">
{% render 'icon-arrow' %}
{{ link.title | escape }}
</button>
<ul class="menu-drawer__menu list-menu" role="list" tabindex="-1">
{%- for childlink in link.links -%}
<li>
{%- if childlink.links == blank -%}
<a
id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}"
href="{{ childlink.url }}"
class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if childlink.current %} menu-drawer__menu-item--active{% endif %}"
{% if childlink.current %}
aria-current="page"
{% endif %}
>
{{ childlink.title | escape }}
</a>
{%- else -%}
<details id="Details-menu-drawer-{{ link.handle }}-{{ childlink.handle }}">
<summary
id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}"
class="menu-drawer__menu-item link link--text list-menu__item focus-inset"
>
{{ childlink.title | escape }}
{% render 'icon-arrow' %}
{% render 'icon-caret' %}
</summary>
<div
id="childlink-{{ childlink.handle | escape }}"
class="menu-drawer__submenu has-submenu gradient motion-reduce"
>
<button
class="menu-drawer__close-button link link--text focus-inset"
aria-expanded="true"
>
{% render 'icon-arrow' %}
{{ childlink.title | escape }}
</button>
<ul
class="menu-drawer__menu list-menu"
role="list"
tabindex="-1"
>
{%- for grandchildlink in childlink.links -%}
<li>
<a
id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
href="{{ grandchildlink.url }}"
class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if grandchildlink.current %} menu-drawer__menu-item--active{% endif %}"
{% if grandchildlink.current %}
aria-current="page"
{% endif %}
>
{{ grandchildlink.title | escape }}
</a>
</li>
{%- endfor -%}
</ul>
</div>
</details>
{%- endif -%}
</li>
{%- endfor -%}
<div class="swiper">
<div class="swiper-wrapper">
{%- for block in section.blocks -%}
{%- if link.title == block.settings.link_name -%}
<li class="mega_menu_img slide swiper-slide">
<a class="mega-menu__link" href="{{ block.settings.link_url}}">
<div>
{{ block.settings.link_image | image_url: width: 500 | image_tag }}
</div>
<div class="title">{{ block.settings.link_title}}</div>
</a>
</li>
{%- endif -%}
{%- endfor -%}
</div>
<div class="swiper-pagination"></div>
</div>
{%- if section.blocks.size >= 2 -%}
<script>
document.addEventListener("DOMContentLoaded", function(){
var swiper = new Swiper(".swiper", {
slidesPerView: "auto"
});
});
document.addEventListener("shopify:section:load", function(){
var swiper = new Swiper(".swiper", {
slidesPerView: "auto"
});
});
</script>
{%- endif -%}
</ul>
</div>
</div>
</details>
{%- else -%}
<a
id="HeaderDrawer-{{ link.handle }}"
href="{{ link.url }}"
class="menu-drawer__menu-item list-menu__item link link--text focus-inset{% if link.current %} menu-drawer__menu-item--active{% endif %}"
{% if link.current %}
aria-current="page"
{% endif %}
>
{{ link.title | escape }}
</a>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</nav>
<div class="menu-drawer__utility-links">
{%- if shop.customer_accounts_enabled -%}
<a
href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}"
class="menu-drawer__account link focus-inset h5 medium-hide large-up-hide"
>
<account-icon>
{%- if customer and customer.has_avatar? -%}
{{ customer | avatar }}
{%- else -%}
{% render 'icon-account' %}
{%- endif -%}
</account-icon>
{%- liquid
if customer
echo 'customer.account_fallback' | t
else
echo 'customer.log_in' | t
endif
-%}
</a>
{%- endif -%}
{%- if localization.available_countries or localization.available_languages -%}
<div class="menu-drawer__localization header-localization">
{%- if localization.available_countries and localization.available_countries.size > 1 -%}
<localization-form>
{%- form 'localization', id: 'HeaderCountryMobileForm', class: 'localization-form' -%}
<div>
<h2 class="visually-hidden" id="HeaderCountryMobileLabel">
{{ 'localization.country_label' | t }}
</h2>
{%- render 'country-localization', localPosition: 'HeaderCountryMobile' -%}
</div>
{%- endform -%}
</localization-form>
{% endif %}

{%- if localization.available_languages and localization.available_languages.size > 1 -%}
<localization-form>
{%- form 'localization', id: 'HeaderLanguageMobileForm', class: 'localization-form' -%}
<div>
<h2 class="visually-hidden" id="HeaderLanguageMobileLabel">
{{ 'localization.language_label' | t }}
</h2>
{%- render 'language-localization', localPosition: 'HeaderLanguageMobile' -%}
</div>
{%- endform -%}
</localization-form>
{%- endif -%}
</div>
{%- endif -%}
<ul class="list list-social list-unstyled" role="list">
{%- if settings.social_twitter_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_twitter_link }}" class="list-social__link link">
{%- render 'icon-twitter' -%}
<span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_facebook_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_facebook_link }}" class="list-social__link link">
{%- render 'icon-facebook' -%}
<span class="visually-hidden">{{ 'general.social.links.facebook' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_pinterest_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_pinterest_link }}" class="list-social__link link">
{%- render 'icon-pinterest' -%}
<span class="visually-hidden">{{ 'general.social.links.pinterest' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_instagram_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_instagram_link }}" class="list-social__link link">
{%- render 'icon-instagram' -%}
<span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_tiktok_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_tiktok_link }}" class="list-social__link link">
{%- render 'icon-tiktok' -%}
<span class="visually-hidden">{{ 'general.social.links.tiktok' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_tumblr_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_tumblr_link }}" class="list-social__link link">
{%- render 'icon-tumblr' -%}
<span class="visually-hidden">{{ 'general.social.links.tumblr' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_snapchat_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_snapchat_link }}" class="list-social__link link">
{%- render 'icon-snapchat' -%}
<span class="visually-hidden">{{ 'general.social.links.snapchat' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_youtube_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_youtube_link }}" class="list-social__link link">
{%- render 'icon-youtube' -%}
<span class="visually-hidden">{{ 'general.social.links.youtube' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_vimeo_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_vimeo_link }}" class="list-social__link link">
{%- render 'icon-vimeo' -%}
<span class="visually-hidden">{{ 'general.social.links.vimeo' | t }}</span>
</a>
</li>
{%- endif -%}
</ul>
</div>
</div>
</div>
</div>
</details>
</header-drawer>
{%- endif -%}

{%- liquid
if section.settings.logo_position == 'top-center' or section.settings.menu == blank
render 'header-search', input_id: 'Search-In-Modal-1'
endif
-%}

{%- if section.settings.logo_position != 'middle-center' -%}
{%- if request.page_type == 'index' -%}
<h1 class="header__heading">
{%- endif -%}
<a href="{{ routes.root_url }}" class="header__heading-link link link--text focus-inset">
{%- if settings.logo != blank -%}
<div class="header__heading-logo-wrapper">
{%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%}
{%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
{% capture sizes %}(max-width: {{ settings.logo_width | times: 2 }}px) 50vw, {{ settings.logo_width }}px{% endcapture %}
{% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %}
{{ settings.logo | image_url: width: 600 | image_tag:
class: 'header__heading-logo motion-reduce',
widths: widths,
height: logo_height,
width: settings.logo_width,
alt: logo_alt,
sizes: sizes,
preload: true
}}
</div>
{%- else -%}
<span class="h2">{{ shop.name }}</span>
{%- endif -%}
</a>
{%- if request.page_type == 'index' -%}
</h1>
{%- endif -%}
{%- endif -%}

{% if section.settings.menu != blank %}
{% if section.settings.menu_type_desktop == 'dropdown' %}
{% render 'header-dropdown-menu' %}
{% elsif section.settings.menu_type_desktop != 'drawer'%}
{%- comment -%} header-mega-menu {%- endcomment -%}
<nav class="header__inline-menu">
<ul class="list-menu list-menu--inline" role="list">
{%- for link in section.settings.menu.links -%}
<li>
{%- assign imagesPresent = false -%}
{%- for block in section.blocks -%}
{%- if block.settings.link_name == link.title -%}
{%- assign imagesPresent = true -%}
{%- endif -%}
{%- endfor -%}
{%- if link.links != blank or imagesPresent -%}
<header-menu>
<details id="Details-HeaderMenu-{{ forloop.index }}" class="mega-menu">
<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-{{ forloop.index }}"
class="mega-menu__content color-{{ section.settings.menu_color_scheme }} 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 -%}
{%- for block in section.blocks -%}
{%- if link.title == block.settings.link_name -%}
<li class="mega_menu_img">
<a class="mega-menu__link" href="{{ block.settings.link_url}}">
<div>
{{ block.settings.link_image | image_url: width: 500 | image_tag }}
</div>
<div class="title">{{ block.settings.link_title}}</div>
</a>
</li>
{%- endif -%}
{%- endfor -%}
</ul>
</div>
</details>
</header-menu>
{%- 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>
{%- comment -%} header-mega-menu ends {%- endcomment -%}
{% endif %}
{% endif %}

{%- if section.settings.logo_position == 'middle-center' -%}
{%- if request.page_type == 'index' -%}
<h1 class="header__heading">
{%- endif -%}
<a href="{{ routes.root_url }}" class="header__heading-link link link--text focus-inset">
{%- if settings.logo != blank -%}
<div class="header__heading-logo-wrapper">
{%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%}
{%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
{% capture sizes %}(min-width: 750px) {{ settings.logo_width }}px, 50vw{% endcapture %}
{% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %}
{{ settings.logo | image_url: width: 600 | image_tag:
class: 'header__heading-logo',
widths: widths,
height: logo_height,
width: settings.logo_width,
alt: logo_alt,
sizes: sizes,
preload: true
}}
</div>
{%- else -%}
<span class="h2">{{ shop.name }}</span>
{%- endif -%}
</a>
{%- if request.page_type == 'index' -%}
</h1>
{%- endif -%}
{%- endif -%}

<div class="header__icons{% if section.settings.enable_country_selector or section.settings.enable_language_selector %} header__icons--localization header-localization{% endif %}">
<div class="desktop-localization-wrapper">
{%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
<localization-form class="small-hide medium-hide" data-prevent-hide>
{%- form 'localization', id: 'HeaderCountryForm', class: 'localization-form' -%}
<div>
<h2 class="visually-hidden" id="HeaderCountryLabel">{{ 'localization.country_label' | t }}</h2>
{%- render 'country-localization', localPosition: 'HeaderCountry' -%}
</div>
{%- endform -%}
</localization-form>
{% endif %}

{%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
<localization-form class="small-hide medium-hide" data-prevent-hide>
{%- form 'localization', id: 'HeaderLanguageForm', class: 'localization-form' -%}
<div>
<h2 class="visually-hidden" id="HeaderLanguageLabel">{{ 'localization.language_label' | t }}</h2>
{%- render 'language-localization', localPosition: 'HeaderLanguage' -%}
</div>
{%- endform -%}
</localization-form>
{%- endif -%}
</div>
{% render 'header-search', input_id: 'Search-In-Modal' %}

{%- if shop.customer_accounts_enabled -%}
<a href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}" class="header__icon header__icon--account link focus-inset{% if section.settings.menu != blank %} small-hide{% endif %}">
<account-icon>
{%- if customer and customer.has_avatar? -%}
{{ customer | avatar }}
{%- else -%}
{% render 'icon-account' %}
{%- endif -%}
</account-icon>
<span class="visually-hidden">
{%- liquid
if customer
echo 'customer.account_fallback' | t
else
echo 'customer.log_in' | t
endif
-%}
</span>
</a>
{%- endif -%}

{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when '@app' -%}
{% render block %}
{%- endcase -%}
{%- endfor -%}

<a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">
{%- liquid
if cart == empty
render 'icon-cart-empty'
else
render 'icon-cart'
endif
-%}
<span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>
{%- if cart != empty -%}
<div class="cart-count-bubble">
{%- if cart.item_count < 100 -%}
<span aria-hidden="true">{{ cart.item_count }}</span>
{%- endif -%}
<span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
</div>
{%- endif -%}
</a>
</div>
</header>
</{% if section.settings.sticky_header_type != 'none' %}sticky-header{% else %}div{% endif %}>

{%- if settings.cart_type == "notification" -%}
{%- render 'cart-notification', color_scheme: section.settings.color_scheme, desktop_menu_type: section.settings.menu_type_desktop -%}
{%- endif -%}

{% javascript %}
class StickyHeader extends HTMLElement {
constructor() {
super();
}

connectedCallback() {
this.header = document.querySelector('.section-header');
this.headerIsAlwaysSticky = this.getAttribute('data-sticky-type') === 'always' || this.getAttribute('data-sticky-type') === 'reduce-logo-size';
this.headerBounds = {};

this.setHeaderHeight();

window.matchMedia('(max-width: 990px)').addEventListener('change', this.setHeaderHeight.bind(this));

if (this.headerIsAlwaysSticky) {
this.header.classList.add('shopify-section-header-sticky');
};

this.currentScrollTop = 0;
this.preventReveal = false;
this.predictiveSearch = this.querySelector('predictive-search');

this.onScrollHandler = this.onScroll.bind(this);
this.hideHeaderOnScrollUp = () => this.preventReveal = true;

this.addEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
window.addEventListener('scroll', this.onScrollHandler, false);

this.createObserver();
}

setHeaderHeight() {
document.documentElement.style.setProperty('--header-height', `${this.header.offsetHeight}px`);
}

disconnectedCallback() {
this.removeEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
window.removeEventListener('scroll', this.onScrollHandler);
}

createObserver() {
let observer = new IntersectionObserver((entries, observer) => {
this.headerBounds = entries[0].intersectionRect;
observer.disconnect();
});

observer.observe(this.header);
}

onScroll() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

if (this.predictiveSearch && this.predictiveSearch.isOpen) return;

if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
this.header.classList.add('scrolled-past-header');
if (this.preventHide) return;
requestAnimationFrame(this.hide.bind(this));
} else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
this.header.classList.add('scrolled-past-header');
if (!this.preventReveal) {
requestAnimationFrame(this.reveal.bind(this));
} else {
window.clearTimeout(this.isScrolling);

this.isScrolling = setTimeout(() => {
this.preventReveal = false;
}, 66);

requestAnimationFrame(this.hide.bind(this));
}
} else if (scrollTop <= this.headerBounds.top) {
this.header.classList.remove('scrolled-past-header');
requestAnimationFrame(this.reset.bind(this));
}

this.currentScrollTop = scrollTop;
}

hide() {
if (this.headerIsAlwaysSticky) return;
this.header.classList.add('shopify-section-header-hidden', 'shopify-section-header-sticky');
this.closeMenuDisclosure();
this.closeSearchModal();
}

reveal() {
if (this.headerIsAlwaysSticky) return;
this.header.classList.add('shopify-section-header-sticky', 'animate');
this.header.classList.remove('shopify-section-header-hidden');
}

reset() {
if (this.headerIsAlwaysSticky) return;
this.header.classList.remove('shopify-section-header-hidden', 'shopify-section-header-sticky', 'animate');
}

closeMenuDisclosure() {
this.disclosures = this.disclosures || this.header.querySelectorAll('header-menu');
this.disclosures.forEach(disclosure => disclosure.close());
}

closeSearchModal() {
this.searchModal = this.searchModal || this.header.querySelector('details-modal');
this.searchModal.close(false);
}
}

customElements.define('sticky-header', StickyHeader);
{% endjavascript %}

{%- if request.page_type == 'index' -%}
{% assign potential_action_target = request.origin | append: routes.search_url | append: "?q={search_term_string}" %}
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"name": {{ shop.name | json }},
"potentialAction": {
"@type": "SearchAction",
"target": {{ potential_action_target | json }},
"query-input": "required name=search_term_string"
},
"url": {{ request.origin | append: page.url | json }}
}
</script>
{%- endif -%}

{% schema %}
{
"name": "t:sections.header.name",
"class": "section-header",
"settings": [
{
"type": "select",
"id": "logo_position",
"options": [
{
"value": "top-left",
"label": "t:sections.header.settings.logo_position.options__2.label"
},
{
"value": "top-center",
"label": "t:sections.header.settings.logo_position.options__3.label"
},
{
"value": "middle-left",
"label": "t:sections.header.settings.logo_position.options__1.label"
},
{
"value": "middle-center",
"label": "t:sections.header.settings.logo_position.options__4.label"
}
],
"default": "middle-left",
"label": "t:sections.header.settings.logo_position.label",
"info": "t:sections.header.settings.logo_help.content"
},
{
"type": "link_list",
"id": "menu",
"default": "main-menu",
"label": "t:sections.header.settings.menu.label"
},
{
"type": "select",
"id": "menu_type_desktop",
"options": [
{
"value": "dropdown",
"label": "t:sections.header.settings.menu_type_desktop.options__1.label"
},
{
"value": "mega",
"label": "t:sections.header.settings.menu_type_desktop.options__2.label"
},
{
"value": "drawer",
"label": "t:sections.header.settings.menu_type_desktop.options__3.label"
}
],
"default": "mega",
"label": "t:sections.header.settings.menu_type_desktop.label",
"info": "t:sections.header.settings.menu_type_desktop.info"
},
{
"type": "select",
"id": "sticky_header_type",
"options": [
{
"value": "none",
"label": "t:sections.header.settings.sticky_header_type.options__1.label"
},
{
"value": "on-scroll-up",
"label": "t:sections.header.settings.sticky_header_type.options__2.label"
},
{
"value": "always",
"label": "t:sections.header.settings.sticky_header_type.options__3.label"
},
{
"value": "reduce-logo-size",
"label": "t:sections.header.settings.sticky_header_type.options__4.label"
}
],
"default": "on-scroll-up",
"label": "t:sections.header.settings.sticky_header_type.label"
},
{
"type": "checkbox",
"id": "show_line_separator",
"default": true,
"label": "t:sections.header.settings.show_line_separator.label"
},
{
"type": "header",
"content": "t:sections.header.settings.header__1.content"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
},
{
"type": "color_scheme",
"id": "menu_color_scheme",
"label": "t:sections.header.settings.menu_color_scheme.label",
"default": "scheme-1"
},
{
"type": "header",
"content": "t:sections.header.settings.header__3.content",
"info": "t:sections.header.settings.header__4.info"
},
{
"type": "checkbox",
"id": "enable_country_selector",
"default": false,
"label": "t:sections.header.settings.enable_country_selector.label"
},
{
"type": "header",
"content": "t:sections.header.settings.header__5.content",
"info": "t:sections.header.settings.header__6.info"
},
{
"type": "checkbox",
"id": "enable_language_selector",
"default": false,
"label": "t:sections.header.settings.enable_language_selector.label"
},
{
"type": "header",
"content": "t:sections.header.settings.mobile_layout.content"
},
{
"type": "select",
"id": "mobile_logo_position",
"options": [
{
"value": "center",
"label": "t:sections.header.settings.mobile_logo_position.options__1.label"
},
{
"value": "left",
"label": "t:sections.header.settings.mobile_logo_position.options__2.label"
}
],
"default": "center",
"label": "t:sections.header.settings.mobile_logo_position.label"
},
{
"type": "header",
"content": "t:sections.all.spacing"
},
{
"type": "range",
"id": "margin_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.header.settings.margin_bottom.label",
"default": 0
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 36,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 20
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 36,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 20
}
],
"blocks": [
{
"type": "@app"
},
{
"type": "menu-image",
"name": "Menu image",
"settings": [
{
"label": "Link name",
"type": "text",
"id": "link_name",
"info": "The name of the top-level link that you want the image to appear on."
},
{
"label": "Menu image",
"type": "image_picker",
"id": "link_image"
},
{
"label": "Title",
"type": "text",
"id": "link_title"
},
{
"label": "Link",
"type": "url",
"id": "link_url"
}
]
}
]
}
{% endschema %}

## It looks like this

## Previous Theme Dawn Theme 11.

BSSCommerce-B2B · ‎09-10-2024

Hi @dreamtechzone_5 ,

I have checked your website, and it seems to be missing the liquid file "icon-caret" which you use in Dawn theme 15.1: "{% render 'icon-caret' %}" (as highlighted in the image below):

I think you should create a new snippet named 'icon-caret.liquid' and add the contents of this file when you set up the Dawn Theme version 11.

I hope this will solve your issue.

If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.

B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.

B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.

BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

dreamtechzone_5 · ‎09-10-2024

I have created the snippet 'icon-caret.liquid' file and pasted this code.

## Now it looks like this

Please help me. Thank you.

BSSCommerce-B2B · ‎09-10-2024

Hi @dreamtechzone_5 ,

You've already solved part of the missing files.

Please do the same with the other missing files such as snippets file: "icon-cart-empty.liquid" and "icon-account.liquid."

Hope it helps!!

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.

B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.

B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.

BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

dreamtechzone_5 · ‎09-10-2024

In desktop mode it is fixed. But in mobile mode it looks like this. Thank you very much.

BSSCommerce-B2B · ‎09-10-2024

@dreamtechzone_5 , dear my friend,

I have checked your website on mobile view, everything look good.

Error missing file was disapeared.

If my instructions are helpful, please give us likes and mark as the solution.

Have a nice day sir!

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.

B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.

B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.

BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

Sangeetanahar · ‎09-10-2024

hello @dreamtechzone_5

f you give me access to the Collaborator I will do this, it will be very easy to code

thanks

Was I helpful?

Buy me a coffee

❤

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -sangeetarahuldhiman@gmail.com - Skype: live:sangeetarahuldhiman -Whatsapp: +917009811712
Checkout Some Free Sections Here

dreamtechzone_5 · ‎09-10-2024

8069

How to add images to megamenu ( Shopify Dawn Theme 15.1.0 )

How to add images to megamenu ( Shopify Dawn Theme 15.1.0 )

Buy me a coffee

Community Blog Articles