Top bar

top_bar é exibida acima do cabeçalho em todas as páginas da loja.

Arquivos

O tipo aceita Liquid, SCSS e JavaScript. Os arquivos principais têm nomes fixos no editor: _top_bar.liquid, _top_bar.scss e topBar.js. Inclua ao menos um arquivo e use schema válido.

Contexto Liquid

Além de component_configs, current_shop, mobile e template, a barra recebe home_url.

JavaScript

Este tipo é a exceção ao contrato padrão: o arquivo principal exporta uma função diretamente.

export default function setTopBar() {
  // comportamento da barra
}

Não use export default { init() {} } no principal de top_bar.

Exemplo de comportamento

Uma barra pode mostrar avisos em lista, links e períodos de exibição. Declare as opções no schema, filtre itens sem conteúdo no Liquid e use atributos data-* para que o JavaScript leia as configurações necessárias.

{% for item in component_configs.content.items %}
  {% if item.title != blank %}<a class="top-bar-item" href="{{ item.link_url }}">{{ item.title }}</a>{% endif %}
{% endfor %}

.top-bar-item { display: inline-flex; padding: .5rem 1rem; }

Depois de salvar, selecione o componente em Componentes → Barra de informações, confira desktop e mobile e publique a loja.