Configurações do tema

Use as configurações de tema para fazer alterações na tipografia, nas cores, nos links de redes sociais e na página do carrinho de sua loja virtual. As alterações nas configurações se aplicam a toda a loja virtual.

É possível adicionar um logo da empresa à loja virtual, que aparece nestes locais:

  • Cabeçalho de todas as páginas
  • Página com senha

Vale lembrar que as imagens do logo têm uma largura máxima de 300 px.

Etapas:

Adicionar um favicon

Você pode adicionar um ícone de favoritos, ou favicon, que pode ajudar no branding de sua loja virtual. Um 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 a adição do site aos favoritos

Saiba mais sobre favicons.

Etapas:

Cores

É possível criar e personalizar até 21 esquemas de cores distintos e aplicá-los a diferentes seções da loja virtual. Saiba mais sobre opções, esquemas e gradientes de cores.

Etapas:

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.

Considere o uso de fontes do sistema em sua loja, porque elas já estão instaladas no computador do usuário e seu uso evita o download de novas fontes no computador do cliente, o que pode afetar negativamente a velocidade de carregamento da loja. Lembre-se de que a exibição depende do sistema operacional usado.

Personalizar tipos de fonte

Consulte a biblioteca de fontes da Shopify para ver uma lista das fontes disponíveis.

Etapas:

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".

O tamanho-padrão e mínimo é de 100%, o máximo é de 150%, e cada incremento na escala aumenta a fonte em 5%. A configuração-padrão é 100%.

Etapas:

Layout

Você pode definir a largura máxima de exibição da loja virtual e definir o espaçamento vertical e horizontal entre as seções.

Etapas:

Animações

As animações permitem adicionar movimento e interesse visual à loja virtual. Você pode ativar uma animação de esmaecimento para revelar as seções da loja durante a rolagem e um efeito de passar o mouse para cartões e botões.

Etapas:

Bordas e sombras

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

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 do item.

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

  • Opacidade, que altera a visibilidade da sombra do item. O valor de 0% remove totalmente a sombra.
  • Os controles deslizantes de deslocamento Horizontal e Vertical, que movem a sombra ao redor do item.
  • O controle deslizante Desfoque, que altera 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

Etapas:

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 de destaque. Dessa maneira, os clientes conseguem selecionar a variante escolhida para adicionar ao carrinho sem a necessidade de mudar de página. É possível personalizar a exibição das pílulas de variantes na loja virtual.

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

Etapas:

Entradas

As entradas são áreas interativas que exigem a inserção de dados pelo cliente, por exemplo, um formulário de assinante de e-mail ou observações do carrinho. É possível ajustar a aparência das entradas da loja virtual.

Exemplo de loja virtual com entrada de quantidades

Etapas:

Cartões

As configurações de cartões de produto, cartões de coleção e cartões de blog permitem personalizar o estilo de cada tipo de cartão exibido nas seções da página. É possível alterar a cor, o alinhamento, o preenchimento de imagens, as bordas e as sombras desses três tipos de cartões de seção.

Etapas:

Contêineres de conteúdo

Os contêineres são usados no elemento 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 das seções com várias colunas. É importante destacar que a aparência dos contêineres de conteúdo na loja virtual pode ser personalizada.

Etapas:

Mídia

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

Etapas:

Você pode ajustar a aparência de menus suspensos de navegação, janelas modais de pop-up e pop-ups do carrinho na loja virtual.

Etapas:

Os menus deslizantes são contêineres interativos ocultos exibidos quando alguém toca ou clica neles, por exemplo, um menu de navegação recolhível ou opções de filtro de coleção. Você pode personalizar a borda e a sombra dos menus deslizantes da sua loja virtual.

Etapas:

Selos

Os selos Promoção e Esgotado são adicionados automaticamente às imagens do produto quando você reduz o preço ou quando a contagem de estoque chega a 0. Você pode ajustar a posição, a forma e a cor dos selos Promoção e Esgotado.

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 dos selos Página e Blog.

Etapas:

Informações da marca

É possível incluir informações sobre a marca na loja virtual. Após concluir as etapas a seguir, adicione o bloco Informações da marca ao rodapé da loja virtual.

Etapas:

Redes sociais

Você pode adicionar links para suas contas de redes sociais exibidos no rodapé da sua loja virtual.

Etapas:

Comportamento da pesquisa

A loja virtual usa pesquisa preditiva, que mostra sugestões 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.

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

É possível personalizar a exibição das sugestões de pesquisa aos clientes.

Etapas:

Formato de moeda

Você pode exibir o código da moeda com os preços dos produtos.

Etapas:

Carrinho

É possível alterar o estilo do carrinho na loja virtual. Quando um cliente adiciona um produto da loja ao carrinho, ele pode ser exibido como uma aba deslizante, uma página ou uma notificação pop-up. Para manter o cliente na página do produto, use a opção de notificação deslizante ou pop-up. Para levar o cliente até a página do carrinho, use a opção de página. Quando o carrinho do cliente estiver vazio, será possível exibir uma coleção em destaque no carrinho de compras deslizante.

Etapas:

CSS personalizado

A seção CSS personalizado permite inserir seu próprio código CSS, por exemplo, para personalizar a aparência dos botões da loja virtual, indo além das configurações padrão disponíveis, ou aplicar um estilo exclusivo a elementos de texto específicos.

O CSS personalizado nas configurações do tema afeta todas as páginas da sua loja virtual, exceto o checkout.

Saiba mais sobre como adicionar CSS personalizado ao seu tema.

Estilo do 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. As outras opções de estilo de tema disponíveis variam conforme o tema usado.

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:

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. Se você clicar no botão Desfazer mais de uma vez, o trabalho continuará sendo desfeito, 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 alterações feitas em seu tema, incluindo estes exemplos:

  • adicionar, reordenar e excluir seções
  • Aplicar cores, fontes e outras configurações de tema
  • Redefinir um estilo de tema

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

Experimente de graça