diff --git a/assets/base.css b/assets/base.css index 2af5d1ab175..3b86e2cae29 100644 --- a/assets/base.css +++ b/assets/base.css @@ -2175,10 +2175,6 @@ input[type='checkbox'] { } /* section-announcement-bar */ -#shopify-section-announcement-bar { - z-index: 4; -} - .announcement-bar { border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08); color: rgb(var(--color-foreground)); @@ -2215,7 +2211,7 @@ input[type='checkbox'] { } /* section-header */ -#shopify-section-header { +.section-header.shopify-section-group-header-group { z-index: 3; } @@ -2232,10 +2228,18 @@ input[type='checkbox'] { transform: translateY(0); } -#shopify-section-header.animate { +.section-header.animate { transition: transform 0.15s ease-out; } +.shopify-section-group-header-group { + z-index: 4; +} + +.section-header ~ .shopify-section-group-header-group { + z-index: initial; +} + /* Main Header Layout */ .header-wrapper { display: block; diff --git a/assets/global.js b/assets/global.js index 11ee05acb67..b2bc15e12ab 100644 --- a/assets/global.js +++ b/assets/global.js @@ -420,7 +420,7 @@ class HeaderDrawer extends MenuDrawer { } openMenuDrawer(summaryElement) { - this.header = this.header || document.getElementById('shopify-section-header'); + this.header = this.header || document.querySelector('.section-header'); this.borderOffset = this.borderOffset || this.closest('.header-wrapper').classList.contains('header-wrapper--border-bottom') ? 1 : 0; document.documentElement.style.setProperty('--header-bottom-position', `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`); this.header.classList.add('menu-open'); diff --git a/assets/predictive-search.js b/assets/predictive-search.js index b6908a82a0f..25593da3c4b 100644 --- a/assets/predictive-search.js +++ b/assets/predictive-search.js @@ -205,7 +205,7 @@ class PredictiveSearch extends SearchForm { } getResultsMaxHeight() { - this.resultsMaxHeight = window.innerHeight - document.getElementById('shopify-section-header').getBoundingClientRect().bottom; + this.resultsMaxHeight = window.innerHeight - document.querySelector('.section-header').getBoundingClientRect().bottom; return this.resultsMaxHeight; } diff --git a/config/settings_data.json b/config/settings_data.json index 9f6271a6607..fd540847415 100644 --- a/config/settings_data.json +++ b/config/settings_data.json @@ -121,77 +121,6 @@ "predictive_search_show_price": false, "currency_code_enabled": true, "sections": { - "announcement-bar": { - "type": "announcement-bar", - "blocks": { - "announcement-bar-0": { - "type": "announcement", - "settings": { - "text": "Welcome to our store", - "color_scheme": "background-1", - "link": "" - } - } - }, - "block_order": [ - "announcement-bar-0" - ] - }, - "header": { - "type": "header", - "settings": { - "color_scheme": "background-1", - "logo_width": 90, - "logo_position": "middle-left", - "menu": "main-menu", - "show_line_separator": true, - "enable_sticky_header": true, - "margin_bottom": 0 - } - }, - "footer": { - "type": "footer", - "blocks": { - "footer-0": { - "type": "link_list", - "settings": { - "heading": "Quick links", - "menu": "footer" - } - }, - "footer-1": { - "type": "link_list", - "settings": { - "heading": "Info", - "menu": "footer" - } - }, - "footer-2": { - "type": "text", - "settings": { - "heading": "Our mission", - "subtext": "
Share contact information, store details, and brand content with your customers.<\/p>"
- }
- }
- },
- "block_order": [
- "footer-0",
- "footer-1",
- "footer-2"
- ],
- "settings": {
- "color_scheme": "background-1",
- "newsletter_enable": true,
- "newsletter_heading": "Subscribe to our emails",
- "show_social": true,
- "enable_country_selector": true,
- "enable_language_selector": true,
- "payment_enable": true,
- "margin_top": 48,
- "padding_top": 36,
- "padding_bottom": 36
- }
- },
"main-password-header": {
"type": "main-password-header",
"settings": {
diff --git a/layout/theme.liquid b/layout/theme.liquid
index a3829a73e86..f99323db09c 100644
--- a/layout/theme.liquid
+++ b/layout/theme.liquid
@@ -245,13 +245,13 @@
{%- render 'cart-drawer' -%}
{%- endif -%}
- {% section 'announcement-bar' %}
- {% section 'header' %}
+ {% sections 'header-group' %}
+
Share contact information, store details, and brand content with your customers.<\/p>" + } + } + }, + "block_order": [ + "footer-0", + "footer-1", + "footer-2" + ], + "settings": { + "color_scheme": "background-1", + "newsletter_enable": true, + "newsletter_heading": "Subscribe to our emails", + "show_social": true, + "enable_country_selector": false, + "enable_language_selector": false, + "payment_enable": true, + "margin_top": 48, + "padding_top": 36, + "padding_bottom": 36 + } + } + }, + "order": [ + "footer" + ] +} diff --git a/sections/footer.liquid b/sections/footer.liquid index b1c0ccf70c6..23fa6a8ab5d 100644 --- a/sections/footer.liquid +++ b/sections/footer.liquid @@ -57,6 +57,8 @@ {%- endif -%} {%- case block.type -%} + {%- when '@app' -%} + {% render block %} {%- when 'text' -%}