Personalizar o tema da loja
Neste artigo vamos te mostrar como mudar em um único lugar as cores, as fontes e as formas de toda a sua loja baseada em blocos.
💡 Para saber como funciona a loja baseada em blocos, consulte Loja baseada em blocos.
O QUE O TEMA CONTROLA
O tema define a aparência de toda a loja de uma só vez. Uma única mudança chega à Home, às páginas personalizadas e ao resto das páginas. Ele tem três seções:
| Seção | O que controla |
|---|---|
| Cores | Quatro cores que pintam toda a loja. |
| Tipografia | As fontes, a escala de tamanho do texto e o tamanho e o peso de cada tipo de texto. |
| Forma | Cantos, bordas, sombras, espaçamento e estilo dos botões. |
ABRIR O EDITOR DO TEMA
1. Acesse Painel de Controle > Configurações > Interface > Aparência.
2. Clique em Tema.
O editor do tema será aberto. Conforme você muda qualquer opção, a pré-visualização da loja é atualizada para que você veja o resultado na hora.
💡 Você também pode chegar por Painel de Controle > Configurações > Loja, na aba Design. Na linha Tema ("As cores e a tipografia da sua loja") clique em Editar. Em uma loja baseada em blocos, essa linha substitui os seletores de cor anteriores.
⚠️ O editor do tema precisa que a loja baseada em blocos já esteja ativada.
APLICAR UM TEMA PRONTO
Se não quiser começar do zero, você pode partir de um dos temas prontos. Aplicar um tema pronto muda ao mesmo tempo as cores, a tipografia e a forma, e depois você pode ajustar o que quiser.
1. No editor do tema, abra a seção Temas prontos.
2. Escolha o que mais gostar:
| Tema | O que define |
|---|---|
| Default | As cores atuais da sua loja, com a tipografia e a forma padrão. |
| Modern | Montserrat para os títulos, cantos arredondados, sombra média, espaçamento amplo e botões preenchidos. |
| Editorial | Cormorant Garamond para os títulos e Raleway para o texto, borda fina, sombra sutil e botões com contorno. |
| Nocturne | Uma paleta de cores escura, Roboto Condensed para os títulos, sombra forte e cantos suaves. |
3. Confira a pré-visualização e ajuste as cores, as fontes ou a forma se precisar.
💡 Um tema pronto aparece destacado apenas enquanto a sua configuração for exatamente igual a ele. Assim que você mudar qualquer detalhe, o cartão passa a se chamar Personalizado.
MUDAR AS CORES
Cada cor tem um seletor com um campo para digitar o código hexadecimal e uma paleta de cores predefinidas. Se você tem o código exato da cor da sua marca, cole-o no campo, por exemplo #ff66ff.
| Cor | O que pinta |
|---|---|
| Cabeçalho e rodapé | A barra de navegação, o rodapé e as faixas coloridas. |
| Botões e links | Tudo o que um leitor pode clicar. |
| Fundo | O fundo das páginas. |
| Texto | Os títulos e o corpo dos textos. |
Tenha em mente o seguinte:
- Os tons neutros (como o fundo dos cartões e o texto atenuado) são calculados automaticamente a partir de Fundo e Texto. Você não precisa editá-los.
- Uma cor que você mudou desde a última publicação mostra uma etiqueta Não publicado e um link para Reverter para a cor publicada.
- Se o contraste entre o texto e o fundo for baixo, o editor avisa que o texto quase não aparece sobre o fundo. O aviso não impede a publicação, mas convém corrigir para que o texto seja fácil de ler.
MUDAR AS FONTES E O TAMANHO DO TEXTO
Na seção Tipografia você pode escolher as fontes e o tamanho do texto.
Fontes
Você pode escolher entre sete fontes: Noto Sans, Montserrat, Raleway, Roboto, Cormorant Garamond, Roboto Condensed e Antonio.
| Fonte | Usada em |
|---|---|
| Títulos | Todos os títulos da loja. |
| Texto | Parágrafos, descrições e detalhes. |
Se você ativar A mesma fonte dos títulos, o texto usará a fonte dos títulos. Roboto Condensed e Antonio mostram a etiqueta "Ideal para títulos" quando você escolhe a fonte do texto.
⚠️ Não é possível usar uma fonte que não esteja na lista.
Tamanho do texto
A escala Tamanho do texto muda o tamanho de todos os textos juntos e mantém a proporção entre eles.
| Opção | Efeito |
|---|---|
| Compacto | Texto cerca de 10% menor. |
| Normal | Os tamanhos padrão. |
| Grande | Texto cerca de 10% maior. |
Ajuste fino de cada tipo de texto
Em Ajuste fino de cada tipo de texto você pode configurar separadamente cinco níveis: Título da página, Título da seção, Título da publicação, Texto e Detalhes. Cada nível tem três opções:
| Opção | Valores |
|---|---|
| Fonte | Títulos ou Texto (uma das duas fontes acima). |
| Tamanho | Pequeno, Médio ou Grande. |
| Peso | Regular, Médio, Seminegrito ou Negrito. |
💡 Mudar a fonte dos títulos pode deixá-los mais largos ou mais estreitos. Se a diferença for notável, o editor mostra o aviso A largura dos títulos muda. Confira a pré-visualização, porque títulos longos podem ocupar mais linhas. O link Reverter para a tipografia publicada desfaz as mudanças desta seção.
MUDAR A FORMA DOS CARTÕES E DOS BOTÕES
Na seção Forma você escolhe como são desenhados os cartões, as imagens e os botões.
| Opção | O que controla | Valores | Valor inicial |
|---|---|---|---|
| Arredondamento | Cartões, botões, imagens e barra de busca. | Quadrado, Sutil, Suave, Redondo | Sutil |
| Borda | A linha ao redor dos cartões. | Nenhuma, Fina (1px), Grossa (2px) | Nenhuma |
| Sombra | O quanto os cart ões se destacam do fundo. | Nenhuma, Sutil, Média, Forte | Nenhuma |
| Espaçamento | O espaço entre os blocos, abaixo dos títulos e ao redor dos cartões. | Compacto, Confortável, Amplo | Confortável |
| Botões | Como todos os botões da loja são desenhados. | Preenchidos, Com contorno, Só texto | Preenchidos |
⚠️ Com botões Com contorno ou Só texto, o editor avisa que o botão quase não aparece sobre o fundo quando o contraste entre a cor do botão e a do fundo é baixo. O link Reverter para a forma publicada desfaz as mudanças desta seção.
PUBLICAR O TEMA
O tema tem seu próprio rascunho e sua própria etapa de publicação. Publicar a Home não publica o tema.
1. Faça as mudanças que quiser no editor do tema. Elas são salvas automaticamente em um rascunho do tema, e os visitantes não as veem.
2. Clique em Publicar tema.
3. Na janela Publicar o tema? você verá a lista de mudanças por seção (Cores, Tipografia e Forma), com o valor anterior e o novo de cada uma. As cores aparecem como amostras.
4. Confirme. O novo tema é publicado para todos os visitantes.
Tenha em mente o seguinte:
- Enquanto você não publicar o tema, os visitantes continuam vendo as cores atuais da sua loja com a tipografia e a forma padrão. Isso também acontece quando você publica a Home pela primeira vez para colocar a loja baseada em blocos no ar.
- O editor mostra Alterações não publicadas quando o rascunho é diferente do tema publicado.
- Para descartar as alterações não publicadas, clique em Descartar as N alterações (o botão mostra a quantidade real). O rascunho volta ao tema publicado.
- O link "Ver rascunho" de uma página mostra o tema em rascunho, então você pode conferir o resultado antes de publicar.
💡 Para publicar páginas, consulte Editar e publicar uma página em Aparência.
Cores dos e-mails e de outras áreas
Ao publicar o tema, as cores principal e secundária da sua loja também são atualizadas. Os e-mails transacionais e outras partes da plataforma usam essas cores, por isso acompanham o tema publicado.
⚠️ Depois que a loja entra no ar com blocos, o tema é o único lugar para mudar as cores principal e secundária da loja. As mudanças feitas em outro lugar, por exemplo pela API, são ignoradas.
PERGUNTAS FREQUENTES
Mudei as cores, mas os visitantes ainda veem as anteriores. O rascunho do tema não está publicado. Acesse Painel de Controle > Configurações > Interface > Aparência > Tema e clique em Publicar tema. Até lá, o editor mostra Alterações não publicadas.
Publiquei a Home, mas a loja continua com as fontes e as cores anteriores. Publicar a Home não publica o tema. Publique-o no editor próprio dele.
O editor me avisa sobre um problema de contraste. Posso publicar mesmo assim? Sim, os avisos não impedem a publicação. Um contraste baixo pode dificultar a leitura, por isso recomendamos corrigi-lo.
Por que as cores dos nossos e-mails mudaram? Porque ao publicar o tema as cores principal e secundária da loja são atualizadas, e os e-mails as usam.
Onde foram parar os seletores de cor da aba Design? Em uma loja baseada em blocos, eles são substituídos pela linha Tema, que abre o editor do tema.
ARTIGOS RELACIONADOS
- Loja baseada em blocos
- Editar e publicar uma página em Aparência
- Configurar a barra de navegação e o rodapé
- Adicionar estantes e HTML incorporado
- Criar páginas personalizadas e configurar o SEO
- Adicionar um pop-up e um aviso na página de produto
Esperamos que este tutorial tenha sido simples para você. Se tiver dúvidas, escreva para [email protected].