Onde fica o painel de Configurações
O painel de Configurações do builder reúne os controles de design e comportamento que afetam toda a loja, fora de qualquer seção específica. Abra o builder e, na barra de ícones à esquerda, clique no ícone de engrenagem (os ícones de bandeira do mercado, páginas e posts ficam acima dele). O painel abre em abas recolhíveis: Identidade Visual, Cores, Fontes, Layout, Animações, Automações, Entradas, Ícones, Restrições, Checkout, Formulário de checkout, Página de manutenção, CSS customizado e Javascript customizado. Toda alteração fica como rascunho até você clicar em Publicar na barra superior.
Configurações são salvas por mercado
Todas essas configurações são salvas por mercado, não para a loja inteira. O subtítulo do painel mostra "Configurações globais de [nome do mercado]" para indicar qual mercado está sendo editado. Troque de mercado pelo ícone de bandeira antes de abrir Configurações. Dentro de um mercado, as configurações são globais para todas as páginas.
Identidade Visual
Esta aba reúne dois arquivos de imagem (não inclui o logo, que é definido na seção de cabeçalho):
- Favicon: o pequeno ícone da aba do navegador. Aceita PNG, JPEG, WEBP ou ICO (recomendado 32x32 ou 16x16).
- Imagem de fundo: um fundo opcional para toda a loja. Aceita PNG, JPEG ou WEBP. Ao definir, aparecem dois controles extras: Tamanho (Cobrir ou Conter) e um botão de Repetir.
Cores
Cada mercado pode ter até nove esquemas de cores (mínimo um). Toda seção, bloco e componente faz referência ao número do esquema, então editar um esquema recolore tudo que o utiliza. Clique em um cartão para editar as cores, clique com o botão direito para Duplicar (limitado a nove) ou Excluir (bloqueado no último esquema), e arraste para reordenar. Um esquema define cores para fundos, títulos, textos, links, bordas, contornos, sombras, botões primários e secundários (com estados de hover) e campos de formulário.
Fontes
A tipografia associa uma família de fontes a quatro funções:
- Corpo: parágrafos e textos gerais.
- Título: títulos grandes de páginas e seções.
- Subtítulo: títulos secundários e subtítulos de seções.
- Destaque: ênfase decorativa.
O seletor de fontes (com busca) separa em Fontes do sistema (carregam instantaneamente) e Fontes externas (baixadas pelo visitante, podem deixar o carregamento mais lento). Usar mais de uma fonte externa pode prejudicar a velocidade da página. Cada fonte latina é automaticamente pareada com uma fonte árabe correspondente, garantindo boa exibição em idiomas da direita para a esquerda.
Layout
Um controle: Largura da página, um controle deslizante de 900px a 1400px em passos de 100px (padrão 1200). Este é o limite máximo de largura do conteúdo em telas grandes de desktop. No celular, a largura é sempre 100%. Seções configuradas como largura total ignoram esse valor e ocupam toda a tela.
Animações
- Revelação ao rolar: como as seções aparecem ao entrar na tela: Nenhuma, Desvanecer, Deslizar para cima, Deslizar para a esquerda ou Zoom (padrão Deslizar para cima).
- Efeito de zoom em imagens: botão para ativar o zoom ao passar o mouse sobre imagens de produtos.
Automações
Um botão: Reprodução automática de vídeos. Quando ativado, blocos de vídeo começam a tocar sozinhos. Por políticas dos navegadores, eles permanecem sem som até o visitante interagir com a página.
Entradas (estilo dos campos de formulário)
Esta aba estiliza todos os campos de entrada da loja. Não há opção de cor (as cores vêm do esquema de cores). Os controles são:
- Tipo (Layout): Recolher coloca cada rótulo acima do seu campo, Expandir coloca um rótulo acima de todo o conjunto de campos, como um cabeçalho.
- Ícones: Nenhum oculta os ícones dos campos, Padrão mostra dentro do campo, Rótulo coloca junto ao rótulo.
- Posição: Início ou Fim, exibido apenas quando Ícones está em Padrão.
Ícones
Um controle: Espessura, define a largura da linha dos ícones da interface, podendo ser Padrão (normal) ou Grossa (negrito).
Restrições
Restringe interações do navegador para dificultar cópias casuais. Opções gerais: Copiar textos e imagens, Selecionar textos e imagens, Acessar o menu de contexto (clique direito) e Inspecionar a página (remove o conteúdo se ferramentas de desenvolvedor forem detectadas). Uma opção separada no Cabeçalho, Logo redireciona para a home, faz o logo do cabeçalho levar para a página inicial quando ativado, ou ser apenas decorativo quando desativado.
Checkout
- Método de checkout: Adicionar ao carrinho leva o cliente ao carrinho lateral, Checkout rápido pula o carrinho e vai direto para o formulário de pedido.
- Método secundário: botão que oferece também o método oposto como opção secundária, assim uma loja com checkout rápido pode exibir o botão de adicionar ao carrinho, e vice-versa.
Formulário de checkout
Esta aba controla cada campo do formulário de pedido. Cada campo é uma linha que pode ser arrastada para reordenar. Para cada campo você define:
- Status: Desativado (oculto, removido do formulário), Ativado (visível, mas opcional) ou Obrigatório (o comprador deve preencher).
- Rótulo: nome visível do campo (até 50 caracteres).
- Placeholder: texto de dica dentro do campo vazio (até 50 caracteres).
Campos de região (Bairro, Cidade, Estado, Comuna, Província) também têm um controle de Tipo (Entrada para texto livre ou Seleção para menu suspenso), mas só quando o país do mercado ativo tem dados de localização cadastrados. Os campos disponíveis incluem nome completo, nome/sobrenome, empresa, gênero, data de nascimento, endereço, complemento, documento, bairro, distrito, apartamento, andar, CEP, cidade, estado, comuna, província, observação, presente, e-mail, telefone, WhatsApp, link, cor, frete e pagamento. Como o formulário é por mercado, você pode exigir documento em um mercado e ocultar em outro.
Página de manutenção
Oculte a loja atrás de uma página de espera durante atualizações. Controles: botão mestre Ativado (quando ligado, toda rota mostra a página de manutenção, não só a home), Título (texto simples, até 100 caracteres), Mensagem (texto rico, até 500 caracteres) e Esquema de cores. Desative para colocar a loja no ar novamente.
CSS customizado e Javascript customizado
Para ajustes avançados, CSS customizado permite inserir seus próprios estilos (até 1000 caracteres) e Javascript customizado permite inserir scripts, como rastreamento de terceiros (até 1000 caracteres). Ambos afetam toda a loja, então use apenas se estiver confortável com código.