Componentes

Componentes são blocos da loja que você coloca em uma página com um div vazio. A vitrine encontra o id e monta o componente naquele lugar, já com os dados e o visual da loja.

Como usar#

Em uma página do Editor HTML, cole o bloco onde o componente deve aparecer e salve.

<section class="destaques">
  <h2>Mais vendidos</h2>
  <div id="COMPONENT_PRODUCTS_CARDS"></div>
</section>

Os componentes funcionam nas páginas do Editor HTML. Em um tema, monte a mesma lista com Liquid.

Lista de componentes#

Produtos e categorias da página#

Grade com os produtos e as categorias vinculados à página. Cada categoria vinculada aparece com seu nome e seus produtos.

<div id="COMPONENT_PRODUCTS_CARDS"></div>

Sem nada vinculado, o componente não mostra nada. Vincule os itens nas opções da página.

Carrossel de categorias#

Carrossel de cards com as subcategorias da loja. Se a loja não usa subcategorias, mostra todas as categorias.

<div id="COMPONENT_CATEGORYS_CARDS"></div>

Cards principais de categorias#

Grade fixa com as categorias principais, sem as subcategorias. Boa para uma página de navegação.

<div id="COMPONENT_SUB_CATEGORYS_CARDS"></div>

Carrossel com todas as categorias#

Carrossel com categorias e subcategorias juntas.

<div id="COMPONENT_CATEGORYS_CARDS_ALL"></div>

Últimas avaliações#

Carrossel com as avaliações aprovadas mais recentes da loja. Sem avaliações, o componente não mostra nada.

<div id="COMPONENT_FEEDBACKS_CARDS"></div>

Plano de fundo#

Aplica à página a imagem de plano de fundo definida em Configuração.

<div id="COMPONENT_BACKGROUND_IMAGE"></div>

Resumo#

Problemas comuns#

• O componente não aparece. Confira se o id está idêntico e se a página foi salva.
• A lista de produtos está vazia. Vincule produtos ou categorias à página. Produto privado ou inativo não aparece.
• As avaliações não aparecem. Só avaliações aprovadas entram.