Como Editar o Layout da Loja Integrada

Se você deseja personalizar sua loja virtual e oferecer uma experiência única aos seus clientes, conhecer os templates Loja Integrada é essencial. A plataforma oferece diversas opções para você editar o layout, adaptar cores, fontes e muito mais, tudo para refletir a identidade da sua marca de forma profissional e atrativa. Neste guia completo, você vai aprender passo a passo como transformar o visual da sua loja e destacar-se no mercado com a Loja Integrada.

• Acessando o Editor de Layout
• Disposição do Layout
• Personalização de Cores
• Personalização de Fontes
• Personalização de Backgrounds
• Personalização para Mobile
• Personalização Avançada com CSS
• Inserção de Banners
• Personalização do Checkout
• Dicas Finais

Acessando o Editor de Layout

Para iniciar a personalização, acesse o painel da sua loja e navegue até: Visual > Visual da loja

Neste menu, você encontrará diversas opções para ajustar o visual da sua loja.

Disposição do Layout

Na aba “Disposição do layout”, você pode configurar:

• Tamanho do Layout: Escolha entre “Médio” (elástico, largura entre 970px e 1140px) ou “Pequeno” (largura fixa de 980px).
• Posição do Logo: Defina se o logo ficará à esquerda ou no centro do cabeçalho.
• Disposição dos Itens da Loja: Selecione entre 12 opções de layout para a disposição dos produtos e categorias.
• Posição da Coluna Lateral: Escolha entre esquerda, direita ou sem coluna lateral.
• Opcionais: Ative ou desative elementos como a coluna na página de produto, menu superior e comportamento do menu lateral.

Personalização de Cores

Na aba “Cores Predominantes”, defina:

• Cor Principal: Cor que será aplicada em títulos, links, preços, tags, ícones e botões principais.
• Botões: Configure a cor e o texto dos botões nas páginas de listagem de produtos, página do produto e finalização de compra.
• Estilo do Tema: Escolha entre “Cores claras”, “Cores escuras” ou “Transparente” para a área de conteúdo.

Personalização de Fontes

Na aba “Fontes”, você pode alterar:

• Fonte Primária: Fonte global do tema, aplicada a todos os textos da loja, exceto os títulos.
• Fonte dos Títulos: Fonte específica para os títulos da loja.

Personalização de Backgrounds

Na aba “Backgrounds”, é possível:

• Cor: Escolha uma cor para o fundo da loja, cabeçalho ou rodapé.
• Imagem: Carregue uma imagem para o fundo e ajuste propriedades como repetição, posição e fixação.

Personalização para Mobile

A versão mobile da sua loja possui um layout padrão. Para personalizá-la, é necessário inserir códigos CSS específicos. Caso não tenha conhecimento técnico, recomenda-se contratar uma agência digital ou adquirir um tema responsivo. A personalização via CSS está disponível nos planos pagos da Loja Integrada.

Personalização Avançada com CSS

Para personalizações mais específicas, acesse:

Visual > Editar CSS

Aqui, você pode alterar:

• Cores e tamanhos dos textos e botões: Personalize conforme a identidade visual da sua marca.
• Backgrounds: Modifique o fundo de diferentes seções da loja.
• Formatos de tabelas e outros elementos: Ajuste conforme necessário.

É importante conhecer as classes e IDs específicos da sua loja para aplicar as alterações corretamente. Você pode consultar a documentação disponível na seção “Documentação” ao editar o CSS.

Inserção de Banners

Para adicionar banners à sua loja:

1. Acesse: Visual > Banners
2. Clique em “Adicionar banner” e preencha os campos necessários:
   • Banner ativo: Ative ou desative o banner.
   • Nome do banner: Nome que será exibido no ALT text da imagem, importante para SEO.
   • Posição do banner: Escolha onde o banner será exibido na loja.
   • Página de publicação: Determine em qual página o banner aparecerá.

Certifique-se de que o tipo de banner escolhido é compatível com o layout da sua loja.

Personalização do Checkout

A personalização do checkout é limitada, mas você pode:

• Ativar comentários no checkout para que os clientes possam deixar observações durante a finalização da compra.

Dicas Finais

• Consistência Visual: Mantenha uma paleta de cores e fontes consistente para reforçar a identidade da sua marca.
• Responsividade: Garanta que sua loja seja responsiva, oferecendo uma boa experiência tanto em desktop quanto em dispositivos móveis.
• Testes: Após realizar alterações, visualize sua loja em diferentes dispositivos e navegadores para assegurar que tudo esteja funcionando corretamente.
• Backup: Antes de realizar alterações significativas, faça backup de configurações e códigos personalizados para evitar perdas.