> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hypesquad.store/llms.txt
> Use this file to discover all available pages before exploring further.

# Personalizar a aparência da loja

> Escolha tema, ajuste cores, fontes, logo e seções da vitrine para deixar sua loja com a cara da sua marca.

Esta página é para lojistas que querem deixar a vitrine da Hyper com a cara da sua marca. Você vai aprender a escolher um tema, ajustar cores e fontes, trocar a logo, organizar seções e usar imagens de forma profissional.

## O que é a personalização de aparência

A personalização de aparência é o conjunto de escolhas visuais que transformam a vitrine padrão da Hyper em uma loja que parece única. Isso inclui o tema, a paleta de cores, a tipografia, a logo, os banners e a organização das seções que aparecem na página inicial.

## Para que serve

Uma loja bem personalizada transmite confiança, reforça a identidade da marca e ajuda o cliente a reconhecer seus produtos. Cores consistentes, imagens de qualidade e uma navegação clara aumentam as chances de o visitante se tornar comprador.

## Como fazer

### Escolher um tema

<Steps>
  <Step title="Abra a área de aparência">
    No painel da sua loja, acesse a seção de temas ou aparência. Os nomes exatos das opções podem variar conforme a versão do painel e o plano contratado.
  </Step>

  <Step title="Navegue pelos temas disponíveis">
    Visualize a prévia de cada tema. Preste atenção na disposição dos produtos, no tamanho das imagens e na forma como o menu fica organizado.
  </Step>

  <Step title="Aplique o tema escolhido">
    Confirme a aplicação e aguarde a atualização. A mudança costuma ser imediata, mas pode levar alguns minutos para aparecer em todos os dispositivos.
  </Step>
</Steps>

<Info>
  Temas diferentes podem exibir banners, imagens e organização de seções de formas distintas. Escolha um que valorize o tipo de produto que você vende.
</Info>

### Ajustar cores e fontes

<Steps>
  <Step title="Entre nas configurações de estilo">
    Dentro da área de aparência, procure por cores, estilo ou personalização visual.
  </Step>

  <Step title="Defina a paleta principal">
    Escolha uma cor que represente sua marca para botões, links e destaques. Use uma cor secundária para contrastes sutis.
  </Step>

  <Step title="Selecione a fonte">
    Escolha uma fonte legível em celulares. Evite fontes muito decoradas em textos longos.
  </Step>

  <Step title="Salve e visualize">
    Abra sua loja em uma aba anônima do navegador para ver como ficou para quem não está logado.
  </Step>
</Steps>

### Trocar a logo

<Steps>
  <Step title="Prepare a imagem">
    Use um arquivo PNG ou JPG com fundo transparente ou branco, se possível. A largura ideal varia por tema, mas em geral algo entre 200 e 400 pixels funciona bem.
  </Step>

  <Step title="Envie no painel">
    Na área de aparência, procure por logo ou identidade visual e faça o upload da imagem.
  </Step>

  <Step title="Verifique em telas pequenas">
    Abra sua loja no celular e confira se a logo não fica cortada ou muito pequena.
  </Step>
</Steps>

### Organizar seções da vitrine

<Steps>
  <Step title="Abra o editor de seções">
    No painel, procure por seções da página inicial, blocos ou vitrine.
  </Step>

  <Step title="Adicione ou reordene blocos">
    Arraste ou selecione quais seções aparecem: banner principal, coleções em destaque, produtos novos, depoimentos, newsletter, entre outras disponíveis no seu tema.
  </Step>

  <Step title="Configure cada bloco">
    Escolha qual coleção ou produto cada seção exibe. Salve após cada alteração.
  </Step>
</Steps>

### Usar banners e imagens

<Steps>
  <Step title="Crie imagens no tamanho certo">
    Verifique as dimensões recomendadas pelo tema. Banners muito pesados deixam a loja lenta; prefira arquivos abaixo de 200 KB quando possível.
  </Step>

  <Step title="Mantenha a consistência visual">
    Use a mesma paleta de cores nas imagens, na logo e nos botões. Isso cria uma experiência unida para o cliente.
  </Step>

  <Step title="Adicione texto alternativo">
    Sempre que o painel permitir, preencha o texto alternativo (alt text) das imagens. Isso melhora a acessibilidade e o SEO.
  </Step>
</Steps>

<Note>
  Os nomes exatos das opções no painel podem variar conforme a versão da plataforma e o plano contratado.
</Note>

## O que acontece depois

As alterações de aparência são aplicadas na vitrine pública assim que você salva. Clientes que já estavam navegando na sua loja podem precisar atualizar a página para ver as mudanças. Nenhuma alteração afeta produtos, preços ou pedidos.

## Problemas comuns

<AccordionGroup>
  <Accordion title="As cores não aparecem como eu escolhi">
    Limpe o cache do navegador e atualize a página. Se o problema persistir, verifique se salvou as alterações no painel.
  </Accordion>

  <Accordion title="A logo ficou borrada ou cortada">
    Envie uma imagem maior e com proporções diferentes. Teste em celular e em computador.
  </Accordion>

  <Accordion title="Uma seção sumiu da vitrine">
    Verifique se a seção ainda está ativada no editor de seções. Alguns temas exigem que haja produtos ou coleções cadastradas para exibir determinados blocos.
  </Accordion>

  <Accordion title="A loja está lenta depois que coloquei banners">
    Reduza o tamanho dos arquivos de imagem. Ferramentas gratuitas de compressão online ajudam muito sem perder qualidade visível.
  </Accordion>
</AccordionGroup>

## Quando pedir ajuda

Se alguma opção de personalização não aparece no seu painel, pode ser que ela esteja disponível apenas em planos superiores. Em caso de dúvida, fale pelo [chat do painel](/suporte/canais-de-atendimento) ou abra uma solicitação pela [Central de ajuda](https://hypesquad.store/ajuda).

<CardGroup cols={2}>
  <Card title="Publicar e conferir" icon="globe" href="/lojas/publicar-e-conferir">
    Saiba como testar sua loja em diferentes dispositivos antes de divulgar.
  </Card>

  <Card title="Como funciona uma loja" icon="store" href="/lojas/como-funciona-uma-loja">
    Entenda o funcionamento geral da sua loja na Hyper.
  </Card>

  <Card title="Hyper AI" icon="wand-magic-sparkles" href="/lojas/hyper-ai">
    Conheça a assistente de IA que ajuda a criar descrições e sugerir melhorias.
  </Card>

  <Card title="Canais de atendimento" icon="life-ring" href="/suporte/canais-de-atendimento">
    Encontre o canal certo para tirar dúvidas sobre personalização.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.