# Layout e cores

Em **Personalização > Aparência da Loja** você decide como a loja aparece para os
jogadores: o layout, o logo, a página inicial, os widgets e as cores. Trocar de
layout não mexe em produtos, pedidos nem textos, então dá para experimentar à
vontade.

![A aba Layout: o construtor, o tema em código e os layouts prontos](shots/appearance-layout.webp)

## Os quatro layouts prontos

Todos estão no ar em lojas de exemplo. Abra e navegue para ver como ficam.

### Clássico

Escuro, com a imagem de fundo ocupando a tela inicial e os widgets ao lado das
notícias. Veja em [reinopixel.hystore.com.br](https://reinopixel.hystore.com.br).

![O layout Clássico na loja de exemplo Reino Pixel](shots/appearance-classic.webp)

### Aurora

Claro ou escuro, com faixa em degradê da sua cor, servidores em carrossel, ranking
com a skin dos jogadores e cartão do Discord no rodapé. Veja em
[vilabloco.hystore.com.br](https://vilabloco.hystore.com.br).

![O layout Aurora na loja de exemplo Vila Bloco](shots/appearance-aurora.webp)

### Celeste

Claro ou escuro, com menu na lateral sobre um céu de nuvens em pixel, banner
rotativo de ofertas, abas de servidor e categoria, busca de produto e botões com
relevo. Veja em [ilhasdoceu.hystore.com.br](https://ilhasdoceu.hystore.com.br).

![O layout Celeste na loja de exemplo Ilhas do Céu](shots/appearance-celeste.webp)

No Celeste dá para trocar o fundo em volta da loja, no cartão **Fundo do layout**:
**Cor da marca** (o céu segue a cor primária), **Cor à escolha** ou **Imagem** (JPG,
PNG ou WebP até 5 MB, recomendado 1920x1080). O interruptor **Nuvens em pixel** liga
ou desliga as nuvens. No celular, a loja ocupa a tela inteira e o fundo não aparece.

### Prisma

Claro ou escuro, com cara de loja de produtos digitais: busca em destaque, um
produto em destaque ao lado, faixa de garantias, capas grandes, catálogo com filtros
na lateral e cartão de compra fixo na página do produto. Serve também para loja de
jogo. Veja em [estudiovoxel.hystore.com.br](https://estudiovoxel.hystore.com.br).

![O layout Prisma na loja de exemplo Estúdio Voxel](shots/appearance-prisma.webp)

## Trocar o layout

1. Em **Personalização > Aparência da Loja**, abra a aba **Layout**.
2. Clique no layout que você quer. Marque **Usar as cores sugeridas deste layout**
   para a cor primária, a de destaque e a dos ícones passarem a ser as dele.
3. No Aurora, no Celeste e no Prisma, escolha se a loja abre no modo claro ou no
   escuro. O jogador pode trocar pelo botão de sol e lua, e a escolha dele fica
   salva no navegador.
4. Clique em **Salvar layout**.

> [!TIP]
> Quer mudar mais do que os layouts prontos permitem? O layout **Personalizado** é
> montado no [Construtor](/pt/appearance/builder/), sem código. Para controle total,
> com o seu código ou a sua IA, use o [Tema em código](/pt/code-theme/). Aurora,
> Celeste e Prisma também existem como temas em código.

## Logo e favicon

Na aba **Logo & Favicon**, envie:

- o **logo**: PNG com fundo transparente, perto de 200x60 px, até 2 MB;
- o **favicon**, o ícone da aba do navegador: 32x32 ou 64x64 px, até 512 KB.

![A aba Logo e Favicon](shots/appearance-branding.webp)

## Página inicial

Na aba **Pagina Inicial** ficam o título, o subtítulo, a imagem de fundo (1920x1080,
até 5 MB), o IP do servidor e o que mostrar: status, IP, jogadores online e maior
comprador.

![A aba Pagina Inicial: textos, imagem de fundo e o que mostrar](shots/appearance-hero.webp)

## Widgets da página

Na aba **Widgets** ficam o widget do Discord (com o ID do servidor) e os rankings de
compradores. As ferramentas de análise, anúncio e atendimento ficam em outra tela;
veja [Widgets](/pt/appearance/widgets/).

## Cores

Na aba **Cores**, clique no quadrado de cada item para escolher a cor; em branco,
vale a cor padrão. No Aurora, no Celeste e no Prisma, a aba mostra só as cores da
marca, porque fundo, cartões e texto seguem o modo claro ou escuro.

![A aba Cores da aparência](shots/appearance-colors.webp)