Header

header substitui o cabeçalho completo da loja. Ele exige atenção a navegação, busca, conta, carrinho e comportamento mobile.

Arquivos obrigatórios

Inclua todos estes arquivos para salvar. O componente não é salvo se algum estiver ausente.

Arquivo	Tipo	Papel
_header.liquid	Liquid principal	Markup com container #header.
_header.scss	SCSS principal	Estilos gerais do cabeçalho.
header.js	JavaScript principal	Comportamento, com export default { init() {} }.
menu_mobile.scss	SCSS auxiliar	Estilos do menu mobile. Referenciado via @import-partial 'menu_mobile'; no _header.scss.
menu_desktop.scss	SCSS auxiliar	Estilos do menu desktop. Referenciado via @import-partial 'menu_desktop'; no _header.scss.

No _header.scss, importe os dois auxiliares:

@import-partial 'menu_mobile';
@import-partial 'menu_desktop';

Use schema válido, mesmo que não existam opções editáveis.

Contrato mínimo

Elemento	Contrato
Container	#header.
Logo	{% load_shop_images position: "logo" %} e link para {{ home_url }}.
Busca tradicional	<form action="{{ search_url }}"> e <input name="q">.
Menus	{% load_menus position: 'principal' %}.
Conta	Link com href="{{ account_url }}".
Carrinho	<button type="button" data-toggle-cart>.
Contador de carrinho	Opcional: elemento [data-cart-count] dentro do botão.

O contexto Liquid também oferece component_configs, current_shop, mobile e template.

{% load_menus position: 'principal' %}
<header id="header" class="header">
  <a href="{{ home_url }}">{{ current_shop.name }}</a>
  <form action="{{ search_url }}"><input type="search" name="q" required /></form>
  <nav>{% for menu in loaded_menus %}<a href="{{ menu.url }}">{{ menu.title }}</a>{% endfor %}</nav>
  <a href="{{ account_url }}">Minha conta</a>
  <button type="button" data-toggle-cart>Carrinho <span data-cart-count>0</span></button>
</header>

#header { display: flex; align-items: center; gap: 1rem; }

const Header = { init() {} };
export default Header;

Busca reativa e por voz

Busca reativa e por voz são opcionais, mas exigem markup completo quando usadas. Consulte Busca reativa e por voz para variantes, seletores, markup, abertura, fechamento, sugestões, carrossel e comportamento mobile.

Menu mobile

O menu mobile pode usar qualquer padrão. Se usar Mmenu Light, exponha window.mmenu para que a abertura do carrinho possa fechar o menu antes.

Verificação

Depois de selecionar o cabeçalho, valide logo, links de menu, busca tradicional, busca reativa quando usada, conta, carrinho, menu mobile e ícones em desktop e mobile. Consulte Validação e publicação.