From 3ce695d7b9906647bb47cd592907c8f620a19979 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 9 Feb 2026 20:19:50 +0000 Subject: [PATCH] Update header to Kanva-inspired design with centered logo and left nav tabs - Move logo position to center, navigation tabs to left - Add wishlist heart icon to header action icons (heart, cart, account order) - Add 1px bottom border for clean separation - Hide localization selectors from header for cleaner layout - Add Kanva-style CSS: spacious header, refined nav typography, subtle hover effects - Style dropdown caret indicators on menu items with children https://claude.ai/code/session_018vZ3QY4NMNziizEgFGNfrd --- assets/icon-heart.svg | 1 + sections/header-group.json | 8 +- sections/header.liquid | 110 +++++++++++++++++++++++++++ snippets/header-actions.liquid | 131 ++++++++++++++++++++------------- 4 files changed, 196 insertions(+), 54 deletions(-) create mode 100644 assets/icon-heart.svg diff --git a/assets/icon-heart.svg b/assets/icon-heart.svg new file mode 100644 index 000000000..387df508b --- /dev/null +++ b/assets/icon-heart.svg @@ -0,0 +1 @@ + diff --git a/sections/header-group.json b/sections/header-group.json index 99314087e..6aa8cf2b0 100644 --- a/sections/header-group.json +++ b/sections/header-group.json @@ -80,15 +80,15 @@ } }, "settings": { - "logo_position": "left", + "logo_position": "center", "menu_position": "left", "menu_row": "top", "show_search": true, "search_position": "right", "search_row": "top", - "show_country": true, + "show_country": false, "country_selector_style": false, - "show_language": true, + "show_language": false, "localization_font": "heading", "localization_font_size": "0.875rem", "localization_position": "right", @@ -98,7 +98,7 @@ "enable_sticky_header": "always", "divider_width": 0, "divider_size": "page-width", - "border_width": 0, + "border_width": 1, "color_scheme_top": "scheme-1", "color_scheme_bottom": "", "color_scheme_transparent": "scheme-6", diff --git a/sections/header.liquid b/sections/header.liquid index 96005ffe0..facc7a3b7 100644 --- a/sections/header.liquid +++ b/sections/header.liquid @@ -989,6 +989,116 @@ .header__column .localization-form__select { background-color: var(--header-bg-color); } + + /* ===== Kanva-inspired clean header design ===== */ + + /* Increase header height for a more spacious feel */ + body { + --header-height: 70px; + } + + .header { + --header-padding: var(--padding-md); + } + + .header.header--compact { + --header-padding: var(--padding-sm); + } + + /* Clean white background with subtle bottom border */ + .header__row { + background-color: var(--header-bg-color, #fff); + border-bottom-color: rgba(0, 0, 0, 0.08); + } + + /* More generous column spacing */ + .header__columns { + gap: var(--gap-2xl, 2rem); + align-items: center; + min-height: 70px; + } + + /* Ensure left column (nav) has enough room */ + .header__column--left { + gap: var(--gap-lg, 1.5rem); + } + + /* Center column: logo area */ + .header__column--center { + justify-content: center; + } + + /* Right column: icons with tighter but even spacing */ + .header__column--right { + gap: var(--gap-sm, 0.5rem); + } + + /* Navigation tab styling - clean, minimal with refined typography */ + @media screen and (min-width: 750px) { + .header-menu .menu-list__link { + font-size: 0.875rem; + font-weight: 400; + letter-spacing: 0.01em; + text-transform: none; + color: var(--color-foreground); + text-decoration: none; + padding: 0.5rem 0; + transition: opacity 0.2s ease; + } + + .header-menu .menu-list__link:hover { + opacity: 0.65; + } + + /* Dropdown caret for menu items with children */ + .header-menu .menu-list__link[aria-haspopup]::after { + content: ''; + display: inline-block; + width: 0; + height: 0; + margin-left: 5px; + border-left: 3.5px solid transparent; + border-right: 3.5px solid transparent; + border-top: 3.5px solid currentColor; + vertical-align: middle; + opacity: 0.6; + } + + /* If the menu item already has a caret icon, ensure proper styling */ + .header-menu .menu-list__link .icon-caret { + width: 10px; + height: 10px; + opacity: 0.6; + margin-left: 2px; + } + } + + /* Header action buttons - consistent sizing for Kanva icon row */ + .header-actions__action { + --button-color: var(--color-foreground); + width: var(--button-size, 44px); + height: var(--button-size, 44px); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: opacity 0.2s ease; + } + + .header-actions__action:hover { + opacity: 0.65; + } + + .header-actions__action svg { + width: 20px; + height: 20px; + } + + /* Ensure header-actions items are evenly spaced */ + header-actions { + gap: 0; + align-items: center; + } {% endstylesheet %} {% unless request.design_mode %} diff --git a/snippets/header-actions.liquid b/snippets/header-actions.liquid index 85869943b..816502db8 100644 --- a/snippets/header-actions.liquid +++ b/snippets/header-actions.liquid @@ -26,56 +26,15 @@ - {% if shop.customer_accounts_enabled %} - - - - - - {% endif %} + + + {% if settings.cart_type == 'drawer' and template.name != 'cart' %} + + + + + {% endif %} {% stylesheet %} + .header-actions__wishlist { + display: flex; + align-items: center; + justify-content: center; + color: var(--color-foreground); + text-decoration: none; + } + + .header-actions__wishlist .svg-wrapper { + height: var(--button-size); + width: var(--button-size); + display: flex; + align-items: center; + justify-content: center; + } + + .header-actions__wishlist svg { + width: var(--icon-size-md); + height: var(--icon-size-md); + } + .account-popover { --account-popover-min-width: 22rem; --account-actions-max-width: 22rem;