Componentes globais

Use global para widgets, overlays e estilos ou comportamentos que devem estar disponíveis em todas as páginas. Não use este tipo para montar seções ordenadas de conteúdo.

Criar e ativar

1. Crie o componente como Componentes globais.
2. Use schema com settings e content presentes em component_config, mesmo que ambos sejam {}. Omitir qualquer um dos dois retorna 400.
3. Ative-o em Configurar componentes → Componentes globais.

Criar não ativa o componente automaticamente. Para deixar de exibi-lo, desmarque-o nessa mesma área.

Configurações editáveis

Liquid lê component_configs.settings e component_configs.content. Para tornar uma opção disponível ao SCSS ou JavaScript, exponha-a no markup com CSS variables, classes ou data-*.

<div
  class="global-widget"
  data-label="{{ component_configs.content.label_text }}"
  style="--global-accent: {{ component_configs.settings.accent_color }};"
>
  {{ component_configs.content.label_text }}
</div>

O SCSS pode consumir var(--global-accent); o JavaScript pode ler data-label ou outros atributos que você declarar.

.global-widget { color: var(--global-accent); }

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

Ordem e contexto

Não dependa de uma posição relativa fixa entre componentes globais. O contexto Liquid inclui component_configs, current_shop, home_url, mobile, template e product_block_config.

product_block_config contém as configurações que o lojista definiu para o Product Block selecionado. Ele não é um produto nem uma lista. Um global que quiser montar uma vitrine deve carregar products por tag e passá-lo ao renderizar cada card. Veja Vitrines de produtos.

Confira o widget em mais de uma página, em desktop e mobile, antes de publicar.