Tipos de seção

Seções são componentes independentes escolhidos e ordenados nas áreas de conteúdo da loja. Use uma seção para banners, vitrines, conteúdo editorial, listas ou blocos específicos de uma página. Para substituir uma parte compartilhada da loja, como header, footer, botões, ícones ou Product Block, use o guia do tipo correspondente.

Seções podem usar Liquid, SCSS e JavaScript conforme a necessidade. Cada tipo de arquivo usado precisa de um principal.

Escolha o tipo

Tipo	Onde selecionar	Quando usar	Contexto adicional no Liquid
home_sections	Seções da página inicial.	Conteúdo independente na home.	Nenhum além do contexto base.
pages_components	Seções de uma página institucional.	Conteúdo que pode variar conforme a página atual.	page.
product_components	Seções da página de produto.	Conteúdo que usa ou complementa o produto atual.	product.
tag_components	Seções da listagem de produtos.	Blocos antes ou depois da grade, gerais ou específicos de uma categoria.	tag.

O contexto base contém current_shop, mobile, template e component_configs.

Uso do contexto

{% assign settings = component_configs.settings %}
{% assign content = component_configs.content %}

<section class="meu-componente">
  <h2>{{ content.title }}</h2>
</section>

Para páginas institucionais, use page apenas quando o resultado depender da página atual. Para páginas de produto, use product para nome, URL e dados do produto atual.

Para vitrines por tag e reutilização do Product Block selecionado, siga Vitrines de produtos. Para campos editáveis, conteúdo mobile e dependências administrativas, siga Schema.

Particularidade da listagem de produtos

tag_components pode ser usado na composição geral da listagem ou em uma categoria específica. A configuração geral é usada como padrão; quando uma categoria possui composição própria, ela prevalece para essa categoria.

A posição em relação a “Listagem de produtos” define se a seção aparece antes ou depois da grade. Esse item representa a grade e não deve ser removido.

Próximos passos

• Schema para campos, mobile, listas e conteúdo externo.
• Vitrines de produtos para carregar produtos por tag e renderizar cards.
• Exemplos para schemas completos de tags e cadastros externos.
• Validação e publicação para testar desktop, mobile, prévia e publicação.