Introdução

Manual para webdesigners que criam os templates HTML e CSS do catálogo público de uma loja FácilZap.

Funcionalidade em testes
Esta funcionalidade está em fase de testes. Envie dúvidas, problemas ou sugestões pelo WhatsApp ou pelo e-mail suporte.ti@facilzap.com.br.

A personalização permite que cada loja tenha cabeçalho, menu desktop, submenu desktop, menu mobile e rodapé próprios no catálogo público: as páginas de produtos, categorias, busca e conta que os visitantes acessam.

Você escreve HTML e CSS no editor de Aparência do painel da loja (uma aba por área) e confere o resultado na pré-visualização. Depois da publicação, os visitantes passam a ver o conteúdo personalizado.

Pontos importantes antes de começar:

Você escreve apenas HTML e CSS. Não é possível adicionar JavaScript ou PHP próprios.

Há um conjunto definido de variáveis com dados da loja e de componentes prontos (<fz-*>).

Existem limites de tamanho e recursos proibidos que mantêm as páginas seguras.

Em páginas sensíveis (checkout, pagamento, impressão), o conteúdo personalizado não é exibido; a plataforma usa o modelo padrão.

Cada área tem seu modelo Personalizado independente: dá para ter menu customizado com cabeçalho fixo, e vice-versa.

Fluxo de trabalho

Abra o editor de Aparência no painel da loja, na aba da área desejada.

Escreva o HTML no editor. Para menus, use @foreach sobre as categorias.

Escreva o CSS no campo correspondente (opcional, recomendado). Ele vale só para aquela área.

Confira na pré-visualização (desktop e mobile).

Ajuste e gere nova pré-visualização.

Publique. O conteúdo fica disponível imediatamente.

Trocar para um modelo fixo não apaga o que você escreveu; apenas desativa. Ao selecionar Personalizado de novo, o conteúdo é restaurado. Para apagar de vez, use a ação de limpar (irreversível).

Perguntas frequentes

Posso usar ícones do Font Awesome?
Sim: <fz-icon data-fz-name="nome-do-icone"></fz-icon>. A biblioteca já está disponível.

Posso usar Google Fonts?
Não (@import e url(...) são bloqueados). Use as fontes do tema da loja.

Posso escrever JavaScript?
Não. Comportamentos (carrinho, busca, conta, drawer mobile) vêm dos componentes <fz-*>.

A pré-visualização mostra o resultado final?
Sim. Para telas menores, use o modo responsivo do navegador e a prévia mobile.

O que acontece ao alternar fixo ↔ personalizado?
O template personalizado é preservado inativo; publicar de novo reativa.

Os componentes funcionam em todas as páginas?
Sim, exceto checkout, pagamento e impressão (modelo fixo por segurança).

Como evitar lentidão?
HTML enxuto, loading="lazy" em <img>, @media em vez de duplicar elementos.

Posso usar emojis e SVGs próprios?
Emojis sim. SVG próprio não (tag <svg> bloqueada); use <img> PNG/WebP.

O drawer mobile abre pelo hambúrguer do cabeçalho personalizado?
Sim, se o cabeçalho tiver um botão com data-fz-action="menu-mobile".

Fluxo de trabalho#

Perguntas frequentes#

Fluxo de trabalho

Perguntas frequentes