we’re diving into implementing the highly-requested transparent header feature with the ability to change the logo on scroll for your Shopify store. The beauty of the transparent header lies in its versatility. Not only can you enable or disable it across your entire website, but you also have the flexibility to control its visibility on specific pages. Want it only on the homepage? No problem. Prefer it across the entire website? You got it. The power is in your hands.
Step 1: Add schema code
Add the following schema code in header.liquid file below "settings": [
{
"type": "checkbox",
"id": "enable_transparent-header",
"label": "Enable Transparent Header",
"default": false
},
{
"type": "text",
"id": "color-transparent",
"label": "Transparent Color"
},
{
"type": "checkbox",
"id": "only-homepage",
"default": true,
"label": "Enable only on Homepage"
},Step 2: Add CSS code
Add the following CSS code below {%- style -%}
{% unless settings.logo %}
.header__heading-link .h2{
display: block !important;
}
.header__heading-link .header__heading-logo-wrapper{
display: none;
}
{% endunless %}
{% if section.settings.enable_transparent-header and section.settings.color-transparent %}
.header-wrapper{
background: transparent;
position: absolute;
width: 100%;
top: 0px;
}
.scrolled-past-header sticky-header{
background: var(--gradient-background) !important;
/* color: rgba(var(--color-foreground), 0.75); */
}
/* .scrolled-past-header sticky-header .header__icon.link,.scrolled-past-header sticky-header .header__active-menu-item,.scrolled-past-header sticky-header .disclosure__button,.header__heading-link .h2{
color: rgba(var(--color-foreground), 0.75) !important;
} */
.scrolled-past-header sticky-header .header__heading-link{
display: block !important;
}
.scrolled-past-header sticky-header .logo-transparent{
display: none !Important;
}
.header__heading-link{
display: none;
}
.logo-transparent{
display: block;
}
@media only screen and (min-width: 600px) {
.list-menu__item, details[open]>.header__submenu {
color: {{section.settings.color-transparent}} !important;
background: transparent;
}
.header__icon.link,.header__active-menu-item,.disclosure__button,.header__heading-link .h2{
color: {{section.settings.color-transparent}} !important;
}
.scrolled-past-header sticky-header .list-menu__item, details[open]>.header__submenu
{
color: rgba(var(--color-foreground), 0.75) !important;
}
.scrolled-past-header sticky-header .header__icon.link,.scrolled-past-header sticky-header .header__active-menu-item,.scrolled-past-header sticky-header .disclosure__button,.header__heading-link .h2{
color: rgba(var(--color-foreground), 0.75) !important;
}
{% endif %}
{% if section.settings.enable_transparent-header and section.settings.only-homepage and template != 'index' %}
.header-wrapper{
position: relative;
background: var(--gradient-background);
}
.header__icon.link,.header__active-menu-item,.disclosure__button,.header__heading-link .h2{
color: rgba(var(--color-foreground), 0.75);
}
{% endif %}
{% if section.settings.color-transparent and section.settings.only-homepage and section.settings.enable_transparent-header and template != 'index' %}
@media only screen and (min-width: 600px) {
.list-menu__item, details[open]>.header__submenu {
color: rgba(var(--color-foreground), 0.75) !important;
background: transparent;
}
}
.header__icon.link,.header__active-menu-item,.disclosure__button,.header__heading-link .h2{
color: rgba(var(--color-foreground), 0.75) !important;
}
.header__heading-link{
display: block;
}
.logo-transparent{
display: none;
}
{% endif %}Step 3: Add HTML Code
Below this code:
<span class="h2">{{ shop.name }}</span>
{%- endif -%}
</a>Add the following code:
{% if section.settings.enable_transparent-header %}
<a href="{{ routes.root_url }}" class="header__heading-link link link--text focus-inset logo-transparent">
{%- if settings.logo-transparent != blank -%}
<div class="header__heading-logo-wrapper">
{%- assign logo_alt = settings.logo-transparent.alt | default: shop.name | escape -%}
{%- assign logo_height = settings.logo_width | divided_by: settings.logo-transparent.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-transparent | 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>
{% endif %}Step 4: Add schema in settings_schema
Add the following code in settings_schema.json below
"label": "t:settings_schema.logo.settings.logo_image.label"
},
{
"type": "image_picker",
"id": "logo-transparent",
"label": "Logo Transparent"
},Header.liquid after changes
<link rel="stylesheet" href="{{ 'component-list-menu.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-search.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-menu-drawer.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-cart-notification.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-cart-items.css' | asset_url }}" media="print" onload="this.media='all'">
{%- if settings.predictive_search_enabled -%}
<link rel="stylesheet" href="{{ 'component-price.css' | asset_url }}" media="print" onload="this.media='all'">
{%- endif -%}
{%- if section.settings.menu_type_desktop == 'mega' -%}
<link rel="stylesheet" href="{{ 'component-mega-menu.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'component-mega-menu.css' | asset_url | stylesheet_tag }}</noscript>
{%- endif -%}
{%- 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 -%}
<noscript>{{ 'component-list-menu.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-search.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-menu-drawer.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-cart-notification.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-cart-items.css' | asset_url | stylesheet_tag }}</noscript>
<style>
{% unless settings.logo %}
.header__heading-link .h2{
display: block !important;
}
.header__heading-link .header__heading-logo-wrapper{
display: none;
}
{% endunless %}
{% if section.settings.enable_transparent-header and section.settings.color-transparent %}
.header-wrapper{
background: transparent;
position: absolute;
width: 100%;
top: 0px;
}
.scrolled-past-header sticky-header{
background: var(--gradient-background) !important;
/* color: rgba(var(--color-foreground), 0.75); */
}
/* .scrolled-past-header sticky-header .header__icon.link,.scrolled-past-header sticky-header .header__active-menu-item,.scrolled-past-header sticky-header .disclosure__button,.header__heading-link .h2{
color: rgba(var(--color-foreground), 0.75) !important;
} */
.scrolled-past-header sticky-header .header__heading-link{
display: block !important;
}
.scrolled-past-header sticky-header .logo-transparent{
display: none !Important;
}
.header__heading-link{
display: none;
}
.logo-transparent{
display: block;
}
/* @media only screen and (min-width: 600px) {
.list-menu__item, details[open]>.header__submenu {
color: rgba(var(--color-foreground), 0.75) !important;
background: transparent;
}
} */
@media only screen and (min-width: 600px) {
.list-menu__item, details[open]>.header__submenu {
color: {{section.settings.color-transparent}} !important;
background: transparent;
}
.header__icon.link,.header__active-menu-item,.disclosure__button,.header__heading-link .h2{
color: {{section.settings.color-transparent}} !important;
}
.scrolled-past-header sticky-header .list-menu__item, details[open]>.header__submenu
{
color: rgba(var(--color-foreground), 0.75) !important;
}
.scrolled-past-header sticky-header .header__icon.link,.scrolled-past-header sticky-header .header__active-menu-item,.scrolled-past-header sticky-header .disclosure__button,.header__heading-link .h2{
color: rgba(var(--color-foreground), 0.75) !important;
}
{% endif %}
{% if section.settings.enable_transparent-header and section.settings.only-homepage and template != 'index' %}
.header-wrapper{
position: relative;
background: var(--gradient-background);
}
.header__icon.link,.header__active-menu-item,.disclosure__button,.header__heading-link .h2{
color: rgba(var(--color-foreground), 0.75);
}
{% endif %}
{% if section.settings.color-transparent and section.settings.only-homepage and section.settings.enable_transparent-header and template != 'index' %}
@media only screen and (min-width: 600px) {
.list-menu__item, details[open]>.header__submenu {
color: rgba(var(--color-foreground), 0.75) !important;
background: transparent;
}
}
.header__icon.link,.header__active-menu-item,.disclosure__button,.header__heading-link .h2{
color: rgba(var(--color-foreground), 0.75) !important;
}
.header__heading-link{
display: block;
}
.logo-transparent{
display: none;
}
{% endif %}
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;
}
}
</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 -%}
<script src="{{ 'details-disclosure.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'details-modal.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'cart-notification.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'search-form.js' | asset_url }}" defer="defer"></script>
{%- if settings.cart_type == "drawer" -%}
<script src="{{ 'cart-drawer.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
<svg xmlns="http://www.w3.org/2000/svg" class="hidden">
<symbol id="icon-search" viewbox="0 0 18 19" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.03 11.68A5.784 5.784 0 112.85 3.5a5.784 5.784 0 018.18 8.18zm.26 1.12a6.78 6.78 0 11.72-.7l5.4 5.4a.5.5 0 11-.71.7l-5.41-5.4z" fill="currentColor"/>
</symbol>
<symbol id="icon-reset" class="icon icon-close" fill="none" viewBox="0 0 18 18" stroke="currentColor">
<circle r="8.5" cy="9" cx="9" stroke-opacity="0.2"/>
<path d="M6.82972 6.82915L1.17193 1.17097" stroke-linecap="round" stroke-linejoin="round" transform="translate(5 5)"/>
<path d="M1.22896 6.88502L6.77288 1.11523" stroke-linecap="round" stroke-linejoin="round" transform="translate(5 5)"/>
</symbol>
<symbol id="icon-close" class="icon icon-close" fill="none" viewBox="0 0 18 17">
<path d="M.865 15.978a.5.5 0 00.707.707l7.433-7.431 7.579 7.282a.501.501 0 00.846-.37.5.5 0 00-.153-.351L9.712 8.546l7.417-7.416a.5.5 0 10-.707-.708L8.991 7.853 1.413.573a.5.5 0 10-.693.72l7.563 7.268-7.418 7.417z" fill="currentColor">
</symbol>
</svg>
{%- 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 %}">
{%- liquid
if section.settings.menu != blank
render 'header-drawer'
endif
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 section.settings.enable_transparent-header %}
<a href="{{ routes.root_url }}" class="header__heading-link link link--text focus-inset logo-transparent">
{%- if settings.logo-transparent != blank -%}
<div class="header__heading-logo-wrapper">
{%- assign logo_alt = settings.logo-transparent.alt | default: shop.name | escape -%}
{%- assign logo_height = settings.logo_width | divided_by: settings.logo-transparent.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-transparent | 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>
{% endif %}
{%- if request.page_type == 'index' -%}
</h1>
{%- endif -%}
{%- endif -%}
{%- liquid
if section.settings.menu != blank
if section.settings.menu_type_desktop == 'dropdown'
render 'header-dropdown-menu'
elsif section.settings.menu_type_desktop != 'drawer'
render 'header-mega-menu'
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 section.settings.enable_transparent-header %}
<a href="{{ routes.root_url }}" class="header__heading-link link link--text focus-inset logo-transparent">
{%- if settings.logo-transparent != blank -%}
<div class="header__heading-logo-wrapper">
{%- assign logo_alt = settings.logo-transparent.alt | default: shop.name | escape -%}
{%- assign logo_height = settings.logo_width | divided_by: settings.logo-transparent.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-transparent | 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>
{% endif %}
{%- 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 -%}
<noscript class="small-hide medium-hide">
{%- form 'localization', id: 'HeaderCountryMobileFormNoScript', class: 'localization-form' -%}
<div class="localization-form__select">
<h2 class="visually-hidden" id="HeaderCountryMobileLabelNoScript">{{ 'localization.country_label' | t }}</h2>
<select class="localization-selector link" name="country_code" aria-labelledby="HeaderCountryMobileLabelNoScript">
{%- for country in localization.available_countries -%}
<option value="{{ country.iso_code }}" {%- if country.iso_code == localization.country.iso_code %} selected{% endif %}>
{{ country.name }} ({{ country.currency.iso_code }} {{ country.currency.symbol }})
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
<button class="button button--tertiary">{{ 'localization.update_country' | t }}</button>
{%- endform -%}
</noscript>
<localization-form class="small-hide medium-hide no-js-hidden" 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 -%}
<noscript class="small-hide medium-hide">
{%- form 'localization', id: 'HeaderLanguageMobileFormNoScript', class: 'localization-form' -%}
<div class="localization-form__select">
<h2 class="visually-hidden" id="HeaderLanguageMobileLabelNoScript">{{ 'localization.language_label' | t }}</h2>
<select class="localization-selector link" name="locale_code" aria-labelledby="HeaderLanguageMobileLabelNoScript">
{%- for language in localization.available_languages -%}
<option value="{{ language.iso_code }}" lang="{{ language.iso_code }}" {%- if language.iso_code == localization.language.iso_code %} selected{% endif %}>
{{ language.endonym_name | capitalize }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
<button class="button button--tertiary">{{ 'localization.update_language' | t }}</button>
{%- endform -%}
</noscript>
<localization-form class="small-hide medium-hide no-js-hidden" 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 %}">
{% render 'icon-account' %}
<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 %}
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"name": {{ shop.name | json }},
{% if settings.logo %}
"logo": {{ settings.logo | image_url: width: 500 | prepend: "https:" | json }},
{% endif %}
"sameAs": [
{{ settings.social_twitter_link | json }},
{{ settings.social_facebook_link | json }},
{{ settings.social_pinterest_link | json }},
{{ settings.social_instagram_link | json }},
{{ settings.social_tiktok_link | json }},
{{ settings.social_tumblr_link | json }},
{{ settings.social_snapchat_link | json }},
{{ settings.social_youtube_link | json }},
{{ settings.social_vimeo_link | json }}
],
"url": {{ request.origin | append: page.url | json }}
}
</script>
{%- 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",
"max_blocks": 3,
"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": "dropdown",
"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": "enable_transparent-header",
"label": "Enable Transparent Header",
"default": false
},
{
"type": "text",
"id": "color-transparent",
"label": "Transparent Color"
},
{
"type": "checkbox",
"id": "only-homepage",
"default": true,
"label": "Enable only on Homepage"
},
{
"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"
}
]
}
{% endschema %}
