Hey @Ahsan_ANC
Please see below 🙂
{%- liquid
assign search_t = 'layout.header.search' | t
assign account_t = 'layout.header.account' | t
assign cart_icon = section.settings.cart--icon
assign logo_image = section.settings.logo
assign logo_height = section.settings.logo-height
assign logo_center = section.settings.header-logo-center
assign menu_center = section.settings.header-menu-center
assign menu = section.settings.menu
assign mobile_logo_height = section.settings.mobile-logo-height
assign transparent_menu = section.settings.transparent-menu
assign locale_enabled = false
assign region_enabled = false
if section.settings.show-region-selector and localization.available_countries.size > 1
assign region_enabled = true
endif
if section.settings.show-locale-selector and localization.available_languages.size > 1
assign locale_enabled = true
endif
-%}
<header-root
class="header--root"
data-section-id="{{ section.id }}"
data-section-type="header-section"
data-spacing="none"
data-center-logo="{{ logo_center }}"
data-center-menu="{{ menu_center }}"
{% if request.page_type == 'index' and transparent_menu %}
data-transparent-menu="true"
{% else %}
data-transparent-menu="false"
{% endif %}
>
<div class="header--y-menu-for-off-canvas" style="display:none;">
{% render 'y-menu', handle: menu %}
</div>
{% if locale_enabled or region_enabled %}
<div class="header--localization-for-off-canvas" style="display:none;">
{% render
'localization',
locale_enabled: locale_enabled,
region_enabled: region_enabled,
id: 'off-canvas'
%}
</div>
{% endif %}
<div class="header--top-row">
{% if locale_enabled or region_enabled %}
<div class="header--localization">
{% render
'localization',
locale_enabled: locale_enabled,
region_enabled: region_enabled,
id: 'header'
%}
</div>
{% endif %}
{% if request.page_type == 'index' %}
<h1 class="header--logo">
{%
render 'logo',
logo: logo_image,
height: logo_height,
mobile_height: mobile_logo_height
%}
</h1>
{% else %}
<div class="header--logo">
{%
render 'logo',
logo: logo_image,
height: logo_height,
mobile_height: mobile_logo_height
%}
</div>
{% endif %}
{% if settings.search--show-in-header %}
<a
class="header--search"
href="{{ routes.search_url }}"
role="img"
aria-label="{{ search_t }}"
>
{% render 'icons', icon: 'search' %}
</a>
{% endif %}
{% if section.settings.header-account-show and shop.customer_accounts_enabled %}
<a
class="header--account-icon"
{% if customer %}
href="{{ routes.account_url }}"
{% else %}
href="{{ routes.account_login_url }}"
{% endif %}
aria-label="{{ account_t }}"
>
{% render 'icons', icon: 'account' %}
</a>
{% endif %}
</div>
<div class="header--bottom-row">
{%- liquid
if linklists[menu].links.size > 0
assign menu_alignment = 'left'
if menu_center
assign menu_alignment = 'center'
endif
echo '<div class="header--menu">'
render 'x-menu', align: menu_alignment, overlap_parent: 1, handle: menu
echo '</div>'
endif
echo '<div class="header--cart">'
render 'header-cart', cart_icon: cart_icon
echo '</div>'
-%}
</div>
<div class="header--mobile">
<div class="header--mobile--menu">
<div
tabindex="0"
data-off-canvas--open="left-sidebar"
aria-haspopup="menu"
>
{% render 'icons', icon: 'menu' %}
</div>
</div>
<div class="header--mobile--title">
{%
render 'logo',
logo: logo_image,
height: logo_height,
mobile_height: mobile_logo_height
%}
</div>
<div class="header--mobile--cart" data-item="accent-text">
{% render 'header-cart', cart_icon: cart_icon %}
</div>
</div>
</header-root>
<script type="module">
import "{{ 'header.js' | asset_url }}";
</script>
<noscript>
<style>
@media only screen and (min-width: 768px) {
.x-menu--level-1--container {
display: flex;
flex-wrap: wrap;
}
}
</style>
</noscript>
{% if logo_image %}
<style>
header .logo-image {
max-height: {{ logo_height }}px;
}
.header--top-row {
height: {{ logo_height | plus: 16 }}px;
}
</style>
{% endif %}
{% schema %}
{
"name": "Header",
"class": "section--header",
"settings": [
{
"type": "checkbox",
"id": "transparent-menu",
"label": "Transparent on home page",
"info": "Only recommended with a full width image in top section"
},
{
"type": "checkbox",
"id": "header-account-show",
"label": "Enable customer account links",
"default": true,
"info": "[You will also need to enable customer accounts in your store settings](https:\/\/docs.shopify.com\/manual\/your-store\/customers\/customer-accounts)"
},
{
"type": "select",
"id": "cart--icon",
"label": "Cart icon",
"options": [
{ "label": "Text", "value": "text" },
{ "label": "Bag", "value": "bag" },
{ "label": "Cart", "value": "cart" }
],
"default": "text"
},
{
"type": "header",
"content": "Menu"
},
{
"type": "checkbox",
"id": "header-menu-center",
"label": "Center align"
},
{
"type": "link_list",
"id": "menu",
"label": "Menu",
"default": "main-menu"
},
{
"type": "header",
"content": "Country/region Selector",
"info": "To add a country/region, go to your [payment settings](/admin/settings/payments)."
},
{
"type": "checkbox",
"id": "show-region-selector",
"label": "Show country/region selector",
"default": true
},
{
"type": "header",
"content": "Language Selector",
"info": "To add a language, go to your [language settings](/admin/settings/languages)."
},
{
"type": "checkbox",
"id": "show-locale-selector",
"label": "Show language selector",
"default": true
},
{
"type": "header",
"content": "Logo"
},
{
"type": "checkbox",
"id": "header-logo-center",
"label": "Center align"
},
{
"type": "image_picker",
"id": "logo",
"label": "Image",
"info": "1600 x 200px max"
},
{
"label": "Image height",
"id": "logo-height",
"type": "range",
"min": 15,
"max": 100,
"step": 5,
"default": 50,
"info": "This is referring to the natural height and should be half the height of the image you uploaded to ensure it stays sharp on retina screens."
},
{
"label": "Mobile image height",
"id": "mobile-logo-height",
"type": "range",
"min": 15,
"max": 100,
"step": 5,
"default": 30
}
]
}
{% endschema %}
