Configurações do tema
As configurações do tema são globais. Elas valem para todas as páginas da sua loja. Esta página explica cada grupo das Configurações do tema, na ordem em que aparecem no editor de temas.
Para abrir as Configurações do tema:
- Acesse Loja virtual (Online Store) → Temas (Themes).
- No cartão do tema Tenora, selecione Personalizar (Customize).
- No editor de temas, selecione Configurações do tema (o ícone de engrenagem).
Os valores recomendados abaixo são os padrões do preset Tenora, a menos que o texto diga o contrário.
Logo e favicon
| Configuração | O que faz | Valor recomendado |
|---|---|---|
| Logo | A imagem do logo no cabeçalho e na página de senha. Sem logo, o cabeçalho mostra o nome da loja em texto. | Um .png transparente ou .svg |
| Largura do logo | A largura do logo, de 40 a 300px. | 120px |
| Imagem do favicon | O pequeno ícone na guia do navegador. | Um .png de 32 x 32px |
Dicas
- O logo nunca fica com mais de 56px de altura no cabeçalho. Um logo alto fica compacto, por isso um logo largo costuma ficar melhor.
- O logo usa o texto alternativo da imagem. Se a imagem não tiver texto alternativo, o nome da loja é usado. Adicione o texto alternativo do logo em Conteúdo (Content) → Arquivos (Files).
- Sem logo, nomes de loja com mais de 18 caracteres aparecem em um tamanho de texto menor. Para um nome de loja longo, recomendamos enviar um logo.
- Para usar uma versão clara do logo sobre o banner de imagem, use a configuração Logo do cabeçalho transparente na seção Cabeçalho.
Cores
Esquemas de cores
Um esquema de cores é um conjunto de cores que você aplica a uma seção. O Tenora tem 5 esquemas de cores. A maioria das seções tem a configuração Esquema de cores, então você pode escolher um esquema diferente para cada seção.
Cada esquema de cores tem estas cores:
| Cor | Onde é usada |
|---|---|
| Plano de fundo | O fundo da seção |
| Texto | Títulos, texto do corpo e ícones |
| Cor de destaque | Links, estados ativos e os detalhes das linhas de cota |
| Fundo do botão | O fundo dos botões sólidos |
| Texto do botão | O texto dos botões sólidos |
| Texto do botão com contorno | O texto e a borda dos botões com contorno |
Para editar um esquema de cores:
- Acesse Configurações do tema → Cores.
- Selecione o esquema de cores que você quer alterar.
- Altere as cores. A visualização é atualizada na hora.
- Selecione Salvar.
Recomendações
- Mantenha uma taxa de contraste de pelo menos 4,5:1 entre Texto e Plano de fundo, e entre Texto do botão e Fundo do botão. Todos os pares de cores dos três presets atingem esse nível (WCAG AA).
- Mantenha um esquema claro para a maioria das páginas e um esquema escuro para o rodapé, como nos presets.
- As mensagens de erro e de sucesso usam a cor do texto do esquema com um ícone colorido, então continuam legíveis em qualquer esquema.
Superfícies
| Configuração | O que faz | Valor recomendado |
|---|---|---|
| Mostrar textura granulada | Adiciona aos planos de fundo uma textura sutil semelhante a papel. | Ativada para estilos claros e naturais (Tenora, Terrace). Desativada para estilos escuros (Lantern). |
Tipografia
Títulos
| Configuração | O que faz | Valor recomendado |
|---|---|---|
| Fonte | A fonte dos títulos. Escolha na biblioteca de fontes da Shopify. | Cormorant (Tenora), Fraunces (Terrace), Bodoni Moda (Lantern) |
| Escala de tamanho dos títulos | Controla o quanto cada nível de título é maior que o texto do corpo. Opções: Compacta, Equilibrada, Expressiva. | Equilibrada |
| Maiúsculas | Padrão mantém o texto como você digitou. Maiúsculas mostra os títulos em letras maiúsculas. | Padrão |
Texto do corpo
| Configuração | O que faz | Valor recomendado |
|---|---|---|
| Fonte | A fonte do texto do corpo, dos botões e dos rótulos. | Instrument Sans (Tenora), Work Sans (Terrace), Manrope (Lantern) |
| Tamanho da fonte | O tamanho base do texto, de 14 a 20px. | 16px |
Dica: escolha fontes que incluam os caracteres de todos os idiomas da sua loja. Algumas fontes não aceitam todos os alfabetos. Se faltar um caractere, o navegador mostra esse caractere em uma fonte alternativa.
Layout
| Configuração | O que faz | Valor recomendado |
|---|---|---|
| Largura da página | A largura máxima do conteúdo. Opções: Estreita (1200px), Padrão (1440px), Larga (1680px). | Padrão |
| Margem da página | O espaço à esquerda e à direita da página, de 16 a 80px. Diminui automaticamente em telas pequenas. | 48px |
| Espaçamento entre seções | Ajusta o preenchimento superior e inferior de todas as seções. Opções: Compacto, Padrão, Amplo. | Padrão |
| Espaçamento da grade | O espaço entre os itens das grades, como os cartões de produto, de 8 a 48px. | 24px |
Botões
| Configuração | O que faz | Valor recomendado |
|---|---|---|
| Raio dos cantos | Arredonda os cantos dos botões, de 0 a 40px. Com 0, os cantos ficam retos. | 0px (Tenora, Lantern), 24px (Terrace) |
| Espessura da borda | A largura da borda dos botões com contorno, de 1 a 3px. | 1px |
| Maiúsculas | Texto dos botões em Padrão ou Maiúsculas. | Maiúsculas (Tenora, Lantern), Padrão (Terrace) |
Os botões de pagamento de marca, como o Shop Pay, mantêm suas próprias cores e estilo. O tema não os altera.
Campos de entrada
Estas configurações valem para os campos de formulário, como o seletor de quantidade, o campo de inscrição por e-mail, os campos do "Será que cabe?" e os campos do formulário de contato.
| Configuração | O que faz | Valor recomendado |
|---|---|---|
| Raio dos cantos | Arredonda os cantos dos campos, de 0 a 24px. | Combine com o estilo dos botões: 0px com botões retos, cerca de 8px com botões arredondados |
| Espessura da borda | A largura da borda dos campos, de 1 a 3px. | 1px |
Cartões de produto e coleção
| Configuração | O que faz | Valor recomendado |
|---|---|---|
| Estilo | A aparência dos cartões de produto. Padrão mostra apenas a imagem e o texto. Com moldura coloca o cartão sobre uma superfície clara com preenchimento. Amostra adiciona uma aba com amostra de material à imagem do cartão. | Amostra (Tenora), Padrão (Terrace), Com moldura (Lantern) |
| Proporção da imagem | O formato das imagens dos cartões. Opções: Adaptar à imagem, Retrato, Quadrado, Paisagem. | Retrato para fotos de móveis, Quadrado para iluminação e itens pequenos |
| Raio dos cantos | Arredonda os cantos dos cartões, de 0 a 24px. | 0px, ou 8px com botões arredondados |
Dica: com Adaptar à imagem, cada cartão usa o formato da própria imagem do produto. Use essa opção só se todas as imagens de produto tiverem o mesmo formato. Caso contrário, a grade fica irregular.
Formato de moeda
| Configuração | O que faz | Valor recomendado |
|---|---|---|
| Mostrar códigos de moeda | Mostra os preços com o código da moeda, por exemplo "$12.00 USD" em vez de "$12.00", nas páginas de produto, nos cartões de produto, no carrinho e no carrinho lateral. | Ativada se você vende em várias moedas que usam o mesmo símbolo, como USD, CAD e AUD. Caso contrário, desativada. |
O total estimado no carrinho sempre mostra o código da moeda. Para mais informações, consulte Vendas internacionais.
Carrinho
| Configuração | O que faz | Valor recomendado |
|---|---|---|
| Tipo de carrinho | Gaveta abre o carrinho como um painel lateral quando o cliente adiciona um produto ou seleciona o ícone do carrinho. Página leva o cliente à página do carrinho. | Gaveta |
| Mostrar observação do pedido | Mostra o campo "Adicionar observação ao pedido" no carrinho lateral e na página do carrinho. Os clientes podem usá-lo para instruções de entrega. | Ativada |
O carrinho lateral tem configurações próprias. Para editá-las, abra o editor de temas, selecione a seção Carrinho lateral e altere Esquema de cores ou Mostrar botões de checkout dinâmico.
Pesquisa
| Configuração | O que faz | Valor recomendado |
|---|---|---|
| Ativar pesquisa preditiva | Mostra produtos, sugestões, coleções, páginas e artigos enquanto o cliente digita no painel de pesquisa. Quando está desativada, o painel de pesquisa continua funcionando e abre a página de resultados da pesquisa. | Ativada |
| Mostrar preço do produto | Mostra o preço ao lado dos produtos na pesquisa preditiva. Esta configuração só aparece quando a pesquisa preditiva está ativada. | Ativada |
Redes sociais
Insira o endereço completo de cada conta de rede social, por exemplo https://www.instagram.com/yourstore. Deixe um campo vazio para ocultar o ícone correspondente.
As contas disponíveis são: Facebook, Instagram, Pinterest, TikTok, X (Twitter), YouTube, Vimeo, Tumblr e Snapchat.
Os ícones aparecem:
- no bloco Ícones de redes sociais da seção Rodapé
- no menu lateral em celulares e tablets
Se nenhuma conta estiver preenchida, nenhum ícone é exibido.