{%- comment -%} Layout-level section, rendered by {% section 'header' %} in layout/theme.liquid. Vision-style header (Probiz): - an optional top bar (a small menu on the left, social icons and a note such as the country on the right), - "Stacked" (default): logo and a wide search field on top, the main menu on a row below with a secondary menu on the right; "Left" and "Center, split" keep the single-row layouts, - small badges (e.g. NEW) on menu items, from Menu badge blocks, - a product mega menu (Mega menu products block): the item's sub-collections on the left, and on hover the products of the one pointed at, loaded from that collection's own page, - a mega menu for any top-level link whose children have children of their own, with optional promo image cards (Mega menu promo blocks) attached to a menu item by its title, - transparent over a home-page banner, solid once the page scrolls or the menu is in use, - a drop-down search bar, and Dawn's slide-in drawer on phones. Menus come from store data (linklists), edited in the store admin, not here. Three levels deep. {%- endcomment -%} {%- assign main_links = linklists.main_menu.links -%} {%- assign utility_links = linklists[section.settings.utility_menu].links -%} {%- assign secondary_links = linklists[section.settings.secondary_menu].links -%} {%- assign split = false -%} {%- assign stacked = false -%} {%- if section.settings.logo_position == 'center-split' -%}{%- assign split = true -%}{%- endif -%} {%- if section.settings.logo_position == 'stacked' -%}{%- assign stacked = true -%}{%- endif -%} {%- assign search_links = linklists[section.settings.search_menu].links -%} {%- assign center_left = false -%} {%- if section.settings.logo_position == 'center-left' -%}{%- assign center_left = true -%}{%- endif -%} {%- assign grouped = false -%} {%- if section.settings.dropdown_style == 'grouped' -%}{%- assign grouped = true -%}{%- endif -%} {%- assign badges = section.blocks | where: 'type', 'menu_badge' -%} {%- assign product_megas = section.blocks | where: 'type', 'mega_products' -%} {%- comment -%} Left half gets the extra link when the count is odd. `divided_by: 2.0 | ceil` rather than integer division: LiquidJS divides integers to a fraction (4 + 1 → 2.5, unlike Shopify Liquid), and a fractional split index never matches a loop index, which left the logo out entirely. {%- endcomment -%} {%- assign half = main_links.size | divided_by: 2.0 | ceil -%} {%- assign right_start = half | plus: 1 -%} {%- assign promos = section.blocks | where: 'type', 'mega_promo' -%} {%- comment -%} A promo card belongs to the top-level menu item named in its "Menu item" setting (matched ignoring case and punctuation). Left empty, it goes to the first item that has a dropdown, so a card is never silently attached to nothing. {%- endcomment -%} {%- assign default_promo_key = '' -%} {%- for link in main_links -%} {%- if default_promo_key == blank and link.links.size > 0 -%}{%- assign default_promo_key = link.title | handleize -%}{%- endif -%} {%- endfor -%} {%- assign menu_keys = '' -%} {%- for link in main_links -%} {%- assign menu_key = link.title | handleize -%} {%- assign menu_keys = menu_keys | append: '|' | append: menu_key -%} {%- endfor -%} {%- assign menu_keys = menu_keys | append: '|' -%} {%- capture logo_markup -%} {%- if settings.logo != blank -%}

{%- if settings.logo_inverse != blank -%} {%- endif -%} {%- else -%} {{ shop.name }} {%- endif -%} {%- endcapture -%}

{%- if section.settings.show_utility_bar and utility_links.size > 0 -%}

{{ link.title }}

{%- if section.settings.show_social -%} {% render 'social-icons', settings: settings %} {%- endif -%} {%- if section.settings.utility_text != blank -%} {{ section.settings.utility_text }} {%- endif -%}

{%- endif -%}

{%- comment -%} Phones: menu toggle at the far left. {%- endcomment -%} {%- if section.settings.show_search and stacked == false -%} {%- endif -%} {%- unless split -%}{{ logo_markup }}{%- endunless -%} {%- capture nav_markup -%}

{%- endcapture -%} {%- if stacked -%} {%- if section.settings.show_search -%} {%- comment -%} Vision's wide search field, a plain GET form to the search page. {%- endcomment -%} {%- endif -%} {%- else -%} {{ nav_markup }} {%- endif -%} {%- comment -%} Phones: the split nav is hidden, so the logo needs its own slot. {%- endcomment -%} {%- if split -%}

{%- endif -%}

{%- if settings.scheme_toggle -%} {%- comment -%} Light / dark switch (Motto). theme.js remembers the choice on this device. {%- endcomment -%} {%- endif -%} {%- if section.settings.show_search -%} {%- endif -%} {%- if section.settings.show_wishlist -%} {%- endif -%}

{%- if stacked -%} {%- endif -%} {%- if section.settings.show_search -%} {%- comment -%} Impulse's search bar drops over the menu row. A plain GET form to the platform's search page, so it works with or without JS; theme.js only opens/closes it and refuses an empty query. {%- endcomment -%} {%- endif -%}

{%- comment -%} Theme-editor hint: a Mega menu promo whose "Menu item" matches no top-level menu item would otherwise just not appear, with no clue why. Shown only in the editor's preview. {%- endcomment -%} {%- for promo in promos -%} {%- assign promo_key = promo.settings.menu_item | handleize -%} {%- if promo_key == blank -%}{%- assign promo_key = default_promo_key -%}{%- endif -%} {%- assign promo_probe = '|' | append: promo_key | append: '|' -%} {%- unless menu_keys contains promo_probe and promo_key != blank -%}

Mega menu promo{% if promo.settings.heading != blank %} “{{ promo.settings.heading }}”{% endif %}: menu item “{{ promo.settings.menu_item }}” is not in your main menu, so this card is hidden. Use one of: {% for link in main_links %}{{ link.title }}{% unless forloop.last %}, {% endunless %}{% endfor %}.

{%- endunless -%} {%- endfor -%} {%- comment -%} Phones: Dawn's slide-in drawer — one full-width panel per menu level, the same markup and theme.js actions (drawer-open / drawer-back) as the Base theme. {%- endcomment -%} {%- if settings.cart_type == 'page' -%} {%- comment -%} "Added to cart" notification, filled by theme.js from the bridge's cart. {%- endcomment -%} {%- endif -%} {%- if settings.cart_type != 'page' -%} {%- comment -%} Impulse's cart drawer. Lives in the header so it also works on the Angular pages (account, search, cart) that wear the theme's header. Empty at SSR — the server never knows the cart — and drawn by theme.js from the bridge's cart; every change goes back through the bridge. Line markup is built in JS with textContent only, so product names can never inject HTML. {%- endcomment -%} {%- endif -%}

{% schema %} { "name": "Header", "tag": "div", "class": "site-header-wrapper", "limit": 1, "settings": [ { "type": "select", "id": "logo_position", "label": "Layout", "default": "left", "options": [ { "value": "left-center", "label": "Logo on the left, menu centred" }, { "value": "center-left", "label": "Logo centred, menu on the left" }, { "value": "stacked", "label": "Logo and search on top, menu below" }, { "value": "left", "label": "Logo left, menu beside it" }, { "value": "center-split", "label": "Logo centred, menu split around it" } ]}, { "type": "select", "id": "dropdown_style", "label": "Dropdowns", "default": "mega", "options": [ { "value": "grouped", "label": "Rounded list, sub-menus as groups" }, { "value": "mega", "label": "Full-width mega menu for deep menus" } ]}, { "type": "select", "id": "actions_style", "label": "Search, account and cart", "default": "text", "options": [ { "value": "text", "label": "Words (SEARCH, ACCOUNT, CART 0)" }, { "value": "icons", "label": "Icons" } ]}, { "type": "checkbox", "id": "menu_button_desktop", "label": "Menu button on desktop too", "default": false, "info": "Opens the side menu on large screens as well, with sub-menus in a second panel." }, { "type": "select", "id": "search_style", "label": "Search opens", "default": "drawer", "options": [ { "value": "drawer", "label": "A panel from the right" }, { "value": "bar", "label": "A bar over the header" } ]}, { "type": "text", "id": "search_menu", "label": "Search suggestions menu handle", "default": "", "info": "A menu whose links are shown under the search field (e.g. popular products and collections)." }, { "type": "text", "id": "search_menu_title", "label": "Search suggestions heading", "default": "Commonly searched" }, { "type": "text", "id": "search_placeholder", "label": "Search field text", "default": "Search for anything" }, { "type": "text", "id": "secondary_menu", "label": "Secondary menu handle", "default": "", "info": "Stacked layout: a menu shown on the right of the menu row (e.g. About, Blog, Support), and at the foot of the phone menu." }, { "type": "checkbox", "id": "transparent_home", "label": "Transparent over home page banner", "default": true, "info": "Applies when the home page starts with a hero, shoppable image or media banner." }, { "type": "checkbox", "id": "sticky", "label": "Sticky header", "default": true }, { "type": "checkbox", "id": "show_search", "label": "Show search", "default": true }, { "type": "checkbox", "id": "show_wishlist", "label": "Show wishlist", "default": false }, { "type": "header", "content": "Top bar" }, { "type": "checkbox", "id": "show_utility_bar", "label": "Show top bar", "default": true }, { "type": "text", "id": "utility_menu", "label": "Top bar menu handle", "default": "footer_menu", "info": "Handle of a menu from store settings, e.g. footer_menu." }, { "type": "checkbox", "id": "show_social", "label": "Show social icons in top bar", "default": true }, { "type": "text", "id": "utility_text", "label": "Top bar note", "default": "Sri Lanka (LKR Rs)", "info": "Shown at the right of the top bar, e.g. the country and currency." }, { "type": "paragraph", "content": "Add Mega menu promo blocks to show image cards inside a dropdown, Mega menu products blocks to show products, and Menu badge blocks for labels like NEW." } ], "blocks": [ { "type": "mega_products", "name": "Mega menu products", "settings": [ { "type": "text", "id": "menu_item", "label": "Menu item", "info": "The top-level menu item, typed as it shows in your menu (e.g. Shop). Its sub-menu entries should link to collections." }, { "type": "range", "id": "products", "label": "Products shown", "min": 2, "max": 4, "step": 1, "default": 4 } ] }, { "type": "menu_badge", "name": "Menu badge", "settings": [ { "type": "text", "id": "menu_item", "label": "Menu item", "info": "The top-level menu item, typed as it shows in your menu." }, { "type": "text", "id": "text", "label": "Badge text", "default": "New" }, { "type": "color", "id": "color", "label": "Badge colour", "default": "#d7f0e6" } ] }, { "type": "mega_promo", "name": "Mega menu promo", "settings": [ { "type": "text", "id": "menu_item", "label": "Menu item", "info": "The top-level menu item this card appears under, typed as it shows in your menu (e.g. MEN). Empty: the first menu item with a dropdown. Up to three cards per menu item." }, { "type": "image_picker", "id": "image", "label": "Image" }, { "type": "select", "id": "shape", "label": "Image shape", "default": "arch", "options": [ { "value": "arch", "label": "Arch" }, { "value": "square", "label": "Square" } ]}, { "type": "text", "id": "heading", "label": "Heading" }, { "type": "text", "id": "text", "label": "Text" }, { "type": "text", "id": "button_label", "label": "Button label" }, { "type": "url", "id": "link", "label": "Link", "info": "e.g. /collections/new or /products/… — defaults to the menu item's link." } ] } ], "max_blocks": 16 } {% endschema %}

New Arrivals