//add setting file - settings_schema.json
{
"name": "Header Settings",
"settings": [
{
"type": "checkbox",
"id": "global_transparent_header",
"label": "Enable Transparent Header Globally",
"default": false
},
{
"type": "textarea",
"id": "transparent_pages",
"label": "Pages No Transparent Header",
"info": "Add page handles separated by commas (e.g., 'about-us, contact')."
}
]
},
//add class to header - file theme.liquid
{% assign is_transparent_global = settings.global_transparent_header %}
{% assign is_homepage = false %}
{% assign is_specific_page = false %}
{% if template.name == 'index' %}
{% assign is_homepage = true %}
{% endif %}
{% if template.name == 'page' %}
{% assign transparent_pages = settings.transparent_pages | split: ',' %}
{% if transparent_pages contains page.handle %}
{% assign is_specific_page = true %}
{% endif %}
{% endif %}
<body class="gradient{% if settings.animations_hover_elements != 'none' %} animate--hover-{{ settings.animations_hover_elements }}{% endif %}{% unless is_specific_page or request.path contains '/account/' or template.name == 'collection' or request.path contains '/products/' %}{% if is_transparent_global or is_homepage %} transparent{% endif %}{% endunless %}">
//css - file setting.css (css sửa lại theo mỗi deisgn)
body:not(.transparent) .header>.header__heading-link {
filter: brightness(0);
}
body:not(.transparent) .header-wrapper .header__menu-item {
color: #32261E;
}
body:not(.transparent) .header__icon .icon {
filter: brightness(0);
}
body.transparent .header-wrapper{
position: absolute;
background-color: transparent;
width: 100%;
height: auto;
}
.header-wrapper header.transparent.header {
background-color: transparent;
width: 100%;
height: auto;
padding: .5rem 1.25rem;
}
body.transparent .shopify-section-header-sticky.scrolled-past-header .header-wrapper {
transition: all .3s;
background-color: #121212;
}
