Configurações do tema

Use as configurações de tema para fazer alterações na tipografia, nas cores, nos links de rede social e nas configurações de checkout de sua loja virtual.

Use as configurações de tema para fazer alterações na tipografia, nas cores, nos links de rede social e nas configurações de checkout de sua loja virtual. As alterações nas configurações se aplicam a toda a loja virtual.

Cores

É possível definir esquemas de cores principais e secundários para a loja virtual.

Personalizar suas configurações de cor

  1. Clique em configurações do tema.
  2. Clique em Cores.
  3. Para abrir o seletor de cores, clique na amostra da cor para o tipo de conteúdo que será alterado.

  4. Clique em Salvar.

Para saber mais sobre as opções de cores, incluindo como definir gradientes, consulte os Esquemas de cores.

Tipografia

Defina o estilo e o tamanho da fonte do texto da loja virtual. É possível escolher uma que seja do sistema ou uma personalizada.

Recomendamos o uso de fontes do sistema, já que fazer download de novas fontes no computador do cliente pode reduzir a velocidade de carregamento da loja. Lembre-se de que a exibição depende do sistema operacional usado.

Personalizar suas configurações de tipografia

  1. Clique em configurações do tema.
  2. Clique em Tipografia.
  3. Para cada tipo de texto, clique em Alterar para usar o seletor de fontes.
  4. Para acessar as fontes disponíveis, use o campo de pesquisa ou clique em Carregar mais.
  5. Clique no nome da fonte que você quer usar e, depois, em Selecionar.
  6. Clique em Salvar.

Personalizar tamanhos de fonte

É possível definir os tamanhos-padrão de fonte para o título e o corpo do texto na configuração de tema "Tipografia".

Etapas:

  1. Clique em Configurações do tema > Tipografia.
  2. Para alterar o tamanho-padrão da fonte dos títulos, selecione uma Escala de tamanho da fonte. O tamanho-padrão e mínimo é de 100%, o máximo é de 150% e cada incremento da escala aumenta a fonte em 5%.
  3. Para alterar o tamanho-padrão da fonte do corpo do texto, selecione uma Escala de tamanho da fonte. O tamanho-padrão e mínimo é de 100%, o máximo é de 130%, e cada incremento na escala aumenta a fonte em 5%.
  4. Clique em Salvar.

Layout

O layout permite definir a largura máxima para exibição da loja virtual.

  1. Clique em Configurações do tema > Layout.
  2. Use o controle deslizante para escolher entre uma largura de página de 1000 px ou 1600 px. A configuração-padrão é 1600 px.
  3. [Opcional] Use o controle deslizante para adicionar um espaço vertical entre as seções de no máximo 100 px.
  4. [Opcional] Caso você tenha um layout Grade, use os controles deslizantes Espaço horizontal e Espaço vertical para adicionar um espaço entre os conteúdos, que será de no máximo 40 px nas linhas e 40 px nas colunas.
  5. Clique em Salvar.

Bordas e sombras

É possível ajustar as bordas e as sombras de alguns tipos de conteúdo interativo, como menus deslizantes, botões, variantes ou entradas de quantidade.

As opções personalizáveis para bordas são:

  • Espessura, que altera o contorno do item
  • Opacidade, que define a visibilidade do contorno do item
  • Raio dos cantos, que arredonda os cantos dos itens

No caso das sombras, as opções funcionam da seguinte maneira:

  • Opacidade altera a visibilidade da sombra do item. O valor de 0% remove totalmente a sombra.
  • Os controles deslizantes de deslocamento Horizontal ou Vertical movem a sombra ao redor do item.
  • O controle deslizante Desfoque pode ser usado para alterar a opacidade da sombra do item.

Botões

Adicione sombras, altere o espaçamento ou a opacidade e ajuste o formato para personalizar as configurações dos botões de call-to-action na loja virtual.

Exemplo de loja virtual com botão de call-to-action

Personalizar botões

  1. Clique em configurações do tema.
  2. Clique em Botões.
  3. Use os controles deslizantes para alterar a aparência da Borda do botão.
  4. Use os controles deslizantes para alterar a Sombra do botão. Para remover a sombra, defina a opacidade como 0%.
  5. Clique em Salvar.

Pílulas de variantes

As pílulas permitem que você exiba as variantes de um produto em uma página do produto ou em uma seção de produto em destaque. Dessa maneira, os clientes conseguem selecionar a variante escolhida para adicionar ao carrinho sem a necessidade de mudar de página.

Exemplo de loja virtual com pílulas de variantes selecionáveis

Personalizar pílulas de variantes

  1. Clique em configurações do tema.
  2. Clique em Pílulas de variantes.
  3. Use os controles deslizantes para alterar a aparência da Borda da pílula de variante.
  4. Use os controles deslizantes para alterar a Sombra da pílula de variantes. Para remover a sombra, defina a opacidade como 0%.
  5. Clique em Salvar.

Entradas

As entradas são áreas interativas que exigem a inserção de dados pelo cliente, por exemplo, um seletor de quantidade, um formulário de assinante de e-mail ou observações do carrinho. Para ajustar a aparência delas na loja virtual, use as configurações do tema.

Exemplo de loja virtual com entrada de quantidades

Personalizar entradas

  1. Clique em configurações do tema.
  2. Clique em Entradas.
  3. Use os controles deslizantes para alterar a aparência da Borda da entrada
  4. Use os controles deslizantes para alterar a Sombra da entrada. Para remover a sombra, basta definir a opacidade como 0%.
  5. Clique em Salvar.

Cartões

Os cartões são áreas compartimentalizadas em seções que permitem exibir vários itens, por exemplo, produtos, blogs, coleções ou colagens. Eles aceitam a personalização de forma, estilo, cor, alinhamento e preenchimento de imagem.

Personalizar cartões

  1. Clique em configurações do tema.
  2. Clique em Cartões.
  3. Use o menu suspenso para escolher um Estilo de cartão.
  4. Adicione Preenchimento de imagem com o controle deslizante. Assim, você acrescenta espaço ao redor das imagens do cartão.
  5. Use o menu suspenso para definir o Alinhamento de texto dos cartões. É possível escolher entre esquerda, centro (padrão) ou direita.
  6. Use o menu suspenso para selecionar um Esquema de cores para os cartões.
  7. Use os controles deslizantes para alterar a aparência da Borda do cartão.
  8. Use os controles deslizantes para alterar a Sombra do cartão. Para remover a sombra, defina a opacidade como 0%.
  9. Clique em Salvar.

Contêineres de conteúdo

Os contêineres são a parte textual das seções de conteúdo, por exemplo, a caixa de texto em uma apresentação de slides, em um banner de imagem ou nas colunas de seções com várias colunas. É importante destacar que a aparência dos contêineres de conteúdo na loja virtual pode ser personalizada.

Personalizar contêineres de conteúdo

  1. Clique em configurações do tema.
  2. Clique em Contêineres de conteúdo.
  3. Use os controles deslizantes para alterar a aparência da Borda do contêiner de conteúdo.
  4. Use os controles deslizantes para alterar a Sombra do contêiner de conteúdo. Para remover a sombra, defina a opacidade como 0%.
  5. Clique em Salvar.

Mídia

A mídia é o componente visual das seções, por exemplo, a mídia do produto ou a imagem nas seções de imagem com texto. Para personalizar a mídia, é possível adicionar bordas e sombras.

Personalizar mídia

  1. Clique em configurações do tema.
  2. Clique em Mídia.
  3. Use os controles deslizantes para alterar a aparência da Borda da mídia.
  4. Use os controles deslizantes para alterar a Sombra da mídia. Para remover a sombra, defina a opacidade como 0%.
  5. Clique em Salvar.

Ajuste a aparência de menus suspensos de navegação, janelas modais pop-up e pop-ups do carrinho.

Personalizar menus suspensos e pop-ups

  1. Clique em configurações do tema.
  2. Clique em Menus suspensos e pop-ups.
  3. Use os controles deslizantes para alterar a aparência da Borda.
  4. Use os controles deslizantes para alterar a Sombra. Para remover a sombra, defina a opacidade como 0%.
  5. Clique em Salvar.

Os menus deslizantes são contêineres interativos ocultos que aparecem e desaparecem quando alguém toca ou clica neles, por exemplo, um menu de navegação recolhível ou opções de filtro.

Personalizar menus deslizantes

  1. Clique em configurações do tema.
  2. Clique em Menus deslizantes.
  3. Use os controles deslizantes para alterar a aparência da Borda.
  4. Use os controles deslizantes para alterar a Sombra. Para remover a sombra, defina a opacidade como 0%.
  5. Clique em Salvar.

Selos

Os selos Promoção e Esgotado são adicionados automaticamente às imagens do produto quando o preço cai ou quando a contagem de estoque chega a 0. É possível ajustar a posição, a forma e a cor dos selos.

Exemplo de loja virtual com selos

Os selos Página e Blog aparecem nos resultados de pesquisa relevantes. É possível personalizar a posição e a forma desses selos, mas não a cor.

Personalizar selos

  1. Clique em configurações do tema.
  2. Clique em Selos.
  3. Use o menu suspenso para selecionar a posição do selo nos cartões de produto. É possível escolher entre superior à esquerda, superior à direita, inferior à esquerda (padrão) ou inferior à direita.
  4. Adicione cantos arredondados com o controle deslizante Raio dos cantos. Quando você define essa configuração como 0 px, o selo fica com bordas quadradas. Portanto, para arredondar as bordas, basta aumentar o raio.
  5. Escolha um Esquema de cores para os selos. É possível definir um esquema alternativo para itens esgotados.
  6. Clique em Salvar.

Ícones

Os ícones são imagens pequenas que podem ser adicionadas a seções ou blocos. Defina o esquema de cores dos ícones nas configurações do tema.

Exemplo de loja virtual com ícones em linhas recolhíveis

Personalizar ícones

  1. Clique em configurações do tema.
  2. Clique em Ícones.
  3. Use o menu suspenso para selecionar a cor-padrão dos ícones da loja. Escolha entre Destaque 1, Destaque 2, Botão com contorno ou cor do texto.
  4. Clique em Salvar.

Redes sociais

Você pode adicionar botões de compartilhamento em redes sociais a seus produtos e posts de blog, e links de suas contas de redes sociais. Os links para suas contas de redes sociais são exibidos no rodapé de sua loja virtual.

Personalizar suas configurações de redes sociais

  1. Clique em configurações do tema.
  2. Clique em Redes sociais.
  3. Nos campos fornecidos em Contas, inclua links para suas redes sociais. Lembre-se de inserir os endereços completos, como https://instagram.com/shopify ou https://twitter.com/shopify.
  4. Clique em Salvar.

Comportamento da pesquisa

A loja virtual usa pesquisa preditiva, que mostra sugestões de produtos quando os clientes começam a digitar no campo de busca. Essas sugestões podem ajudá-los a formular e refinar as consultas de pesquisa, além de fornecer novas maneiras de conhecer uma loja virtual. Elas também permitem que os clientes vejam resultados detalhados sem precisar sair da página atual.

Personalize as seguintes configurações de pesquisa:

  • Ative sugestões de produtos: ative ou desative as sugestões de produtos.
  • Exibir fabricante: mostre ou oculte fabricantes em sugestões de produtos.
  • Exibir preço: mostre ou oculte preços em sugestões de produtos.

Alterar configurações da entrada de pesquisa

  1. Clique em configurações do tema.
  2. Clique em Entrada de pesquisa.
  3. Use as configurações para personalizar o comportamento de pesquisa da loja.
  4. Clique em Salvar.

Para saber mais sobre como as sugestões de produto funcionam, consulte Pesquisa preditiva.

Favicon

Você pode adicionar um ícone de favoritos (ou favicon), que pode ajudar a fixar a marca de sua loja virtual. O favicon é exibido nos seguintes locais:

  • na aba do navegador da web
  • no histórico do navegador da web
  • nos ícones da área de trabalho
  • ao lado do nome da sua loja virtual após adição aos favoritos

Saiba mais sobre favicons.

Personalizar seu favicon

  1. Clique em configurações do tema.
  2. Clique em Favicon.
  3. Na área Imagem de favicon, clique em Selecionar imagem e siga um destes procedimentos:

    • Para usar uma imagem que já foi enviada ao admin da Shopify, clique nela e, depois, em Selecionar.
    • Para usar uma imagem de seu computador, clique em Fazer upload. Depois, escolha uma foto e clique em Abrir. Após a conclusão do upload, a imagem será selecionada automaticamente. Por fim, clique em Selecionar.
    • Para usar uma imagem grátis, clique em Imagens grátis e selecione uma.
  4. Adicionar texto alternativo à sua imagem de favicon:

    1. Clique em Editar texto alternativo.
    2. Na janela Editar imagem , insira uma breve descrição da imagem.
    3. Clique em Salvar.

Formato de moeda

Se preferir, opte por exibir sempre o código da moeda nos preços apresentados em produtos, carrinhos e checkout.

  1. Clique em configurações do tema.
  2. Clique em Formato de moeda.
  3. Para habilitar códigos de moeda, clique na caixa de seleção Exibir códigos de moeda.
  4. Clique em Salvar.

Carrinho

É possível alterar o estilo do carrinho na loja virtual. Quando o cliente adiciona um produto ao carrinho, pode ver um painel deslizante, uma página ou uma notificação pop-up. Mas, quando está vazio, é possível exibir uma coleção em destaque no carrinho de compras deslizante.

Etapas:

  1. Clique em Configurações do tema > Carrinho.
  2. Use o menu suspenso para selecionar um estilo de carrinho: deslizante, página ou notificação pop-up.
  3. Opcional: para mostrar o fabricante dos itens no carrinho do cliente, clique em Exibir fabricante.
  4. Opcional: ofereça aos clientes uma área para fazer solicitações especiais ou adicionar informações extras ao pedido. Para isso, basta selecionar a opção Ativar observações sobre o carrinho.

Se o tipo estiver definido como Deslizante, será possível exibir uma coleção no carrinho de compras deslizante. Vale lembrar que esse grupo de produtos só aparece quando o carrinho está vazio.

Para adicionar uma coleção ao carrinho de compras deslizante vazio, clique em Selecionar coleção e clique em Alterar para escolher uma diferente ou remover a que está em exibição. Outra opção é clicar em Criar coleção, um botão que sai das "Configurações do tema" e leva você para a área Coleções do admin da Shopify.

Checkout

Esta seção permite personalizar o checkout. Consulte o Checkout da Shopify para saber mais sobre a página de checkout de sua loja.

Alterar estilos de tema

Um estilo de tema é uma coleção de configurações escolhidas pelo criador de tema que podem ser aplicadas à loja para ter uma aparência refinada. Todos os temas têm um estilo aplicado por padrão. Um tema personalizado substitui as configurações de estilo de tema pelas suas preferências. Se você aplicar um estilo a um tema, as configurações atuais, como cores e tipografia, serão alteradas.

Etapas:

  1. Clique em Configurações do tema > Estilo.

  2. Nos menus suspensos, selecione o estilo de tema. As opções disponíveis dependem do tema usado.

  3. Clique em Salvar.

Descartar e refazer alterações

O botão Desfazer reverte a alteração mais recente, e o botão Refazer inclui novamente uma alteração desfeita. Clique no botão Desfazer mais de uma vez para continuar a desfazer o trabalho, uma alteração de cada vez. Os botões Desfazer e Refazer estão localizados na barra de ferramentas do editor de temas.

Os botões Desfazer e Refazer na barra de ferramentas do editor de temas

Clique no botão Desfazer para reverter as seguintes alterações:

  • adicionar, reordenar e excluir seções
  • aplicar cores, fontes e outras configurações, na aba Configurações do tema
  • redefinir um estilo de tema.

Tudo pronto para começar a vender com a Shopify?

Experimente de graça