Componentes Customizados
Esta documentação serve para orientar desenvolvedores a criarem componentes exclusivos para uma loja no Template Maker.
Um componente externo reúne metadados, arquivos Liquid, SCSS e JavaScript e, quando aplicável, um schema com opções editáveis. Criar ou sincronizar um componente apenas o disponibiliza no catálogo da loja. Depois, é necessário selecioná-lo na área compatível, configurar suas opções, conferir a prévia e publicar a loja.
Escolha sua jornada
Seção intitulada “Escolha sua jornada”| Jornada | Quando usar | Próximo passo |
|---|---|---|
| Editor | Você quer criar ou editar o componente pela interface da loja. | Criar pelo editor |
| Build Kit | Você quer manter os arquivos em um projeto local e sincronizá-los em lote. | Usar o Build Kit |
| API | Você quer integrar seu próprio fluxo de autoria e sincronização. | Integrar pela API |
As três jornadas usam os mesmos contratos de schema, arquivos e tipos.
Tipos disponíveis
Seção intitulada “Tipos disponíveis”| Tipo | Uso |
|---|---|
home_sections | Seções da página inicial. |
pages_components | Seções de páginas institucionais. |
product_components | Seções da página de produto. |
tag_components | Seções da listagem de produtos. |
top_bar | Barra de informações acima do cabeçalho. |
header | Cabeçalho completo da loja. |
footer | Rodapé completo da loja. |
product_block | Card de produto exibido nas vitrines. |
global | Widget, overlay ou comportamento presente em todas as páginas. |
buttons | Contrato visual global de botões. |
icons | Catálogo SVG global de ícones. |
Use Seções de página para comparar os quatro contextos de seção. header, footer, product_block, buttons e icons substituem partes compartilhadas da loja e exigem leitura completa de seus contratos antes de serem usados.
Antes de criar
Seção intitulada “Antes de criar”- Use Schema para definir tudo que o lojista poderá editar.
- Use Vitrines de produtos quando o componente carregar produtos por tag e reutilizar o Product Block selecionado.
- A Skill de Componentes Customizados, distribuída separadamente, pode apoiar autoria, revisão e dry-run para quem usa assistência de código.
- Consulte Arquivos e subarquivos antes de dividir o componente em partes.
- Leia o guia específico do tipo antes de escrever o Liquid.
- Defina conteúdo externo, tags e instruções administrativas quando o componente depender de uma configuração externa, do Painel Administrativo da loja.
- Entenda o ciclo de vida antes de inativar ou excluir um componente já usado.
- Valide a experiência final em desktop e mobile conforme Validação e publicação.
- Consulte Base de estilos para entender a escala de unidades, as classes de imagem, o lazyload e as variáveis CSS disponíveis no SCSS do componente.
Como funciona o apoio
Seção intitulada “Como funciona o apoio”A documentação e a API ajudam a cadastrar e atualizar componentes customizados. O Build Kit é uma referência para organizar os arquivos e enviar componentes pela API.
A criação e evolução de cada componente - incluindo Liquid, SCSS, JavaScript, automações e integrações próprias - são responsabilidade da agência ou desenvolvedor que o mantém.
Se preferir, também é possível criar e editar componentes pelo editor. Parceiros com formas específicas de acompanhamento seguem o fluxo combinado para sua parceria.
Referências Liquid
Seção intitulada “Referências Liquid”Referências
Seção intitulada “Referências”- Schema
- Vitrines de produtos
- Base de estilos
- Skill de Componentes Customizados, distribuída separadamente.
- Arquivos e subarquivos
- Formulários
- Busca reativa e por voz
- Exemplos
- Troubleshooting