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

  1. Clique em configurações do tema.
  2. Clique em Logo.
  3. Na área Largura do logo no desktop, clique no botão para escolher a largura do pixel.

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

Cores

É possível criar 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.

Personalizar suas configurações de cor

  1. No admin da Shopify, acesse Loja virtual > Temas.
  2. Ao lado do tema que você quer personalizar, clique em Personalizar.
  3. Clique nas Configurações do tema e, depois, em Cores.
  4. Na seção Esquemas, clique em um item existente ou em Adicionar esquema para incluir um novo.
  5. Clique na amostra da cor para o tipo de conteúdo que será alterada.
  6. Para definir a cor, insira o código hexadecimal correspondente ou escolha uma opção no seletor de cores. Para definir a cor como transparente, exclua o valor do código hexadecimal do campo de texto.
  7. Clique em Salvar.

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.

É recomendável o uso de fontes do sistema em sua loja. Essas fontes 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 suas configurações de tipografia

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

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:

Layout

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

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:

  1. No admin da Shopify, acesse Loja virtual > Temas.
  2. Ao lado do tema que você quer personalizar, clique em Personalizar.
  3. Clique nas Configurações do tema e, depois, em Animações.
  4. Opcional: para ativar uma animação que revela as seções da loja virtual durante a rolagem, selecione Revelar seções durante a rolagem.
  5. Opcional: para adicionar uma animação de efeito de cursor a seus cartões e botões, escolha uma das seguintes opções na configuração de Efeito ao passar o mouse:

    • Elevação vertical: quando o cliente passar o mouse sobre um cartão ou botão, o elemento muda para cima.
    • Elevação 3D: quando o cliente passar o mouse sobre um cartão ou botão, o elemento se desloca para a frente, criando um efeito 3D. Esse efeito também tem um brilho sutil que se move pelo elemento, criando mais uma camada de dimensão.
  6. 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

Opções de variantes com amostras

Exemplo de loja virtual com opções de amostra selecionáveis

As amostras são uma representação visual das variantes do produto. Para exibi-las, é preciso ter a versão mais recente do Dawn e os metacampos de categoria associados às variantes. Com o Dawn, as opções de variantes podem aparecer em um menu suspenso ou em uma amostra. Se você exibir as opções de variantes como amostra, poderá mostrá-las como um círculo, um quadrado ou nenhuma dessas alternativas. Nesse caso, o valor da opção aparece como texto.

Exemplo de configurações do Dawn para amostras

Configurar amostras com metacampos de categoria

  1. No admin da Shopify, acesse Produtos.
  2. Clique em um produto.
  3. Na seção Organização do produto, preencha o campo Categoria do produto e selecione o resultado mais preciso na lista em questão. A categoria precisa incluir um metacampo Cor.
  4. Na seção Variantes, clique em Adicionar opções como tamanho ou cor.
  5. Clique em Cor.
  6. Clique no campo Adicionar cor e selecione todas as entradas padrão no menu suspenso.
  7. Para adicionar uma entrada de cor personalizada:

    1. Clique em Adicionar cor e, depois, em Adicionar nova entrada.
    2. Na página Adicionar entrada, preencha os campos Etiqueta e Cor.
    3. Se você quiser uma estampa em vez de uma cor, preencha o campo Imagem. Se você adicionar uma cor e uma imagem, a imagem será usada para a amostra.
    4. Selecione uma Cor-base e uma Estampa-base.
    5. Clique em Salvar.
  8. Clique em Salvar para registrar as alterações.

Personalizar amostras no Dawn

  1. No seu admin da Shopify, vá para loja virtual > temas.
  2. Confirme que você tem a versão mais recente do Dawn instalada e clique em Personalizar.
  3. Vá até o produto ao qual você adicionou opções de cor.
  4. Opcional: para personalizar as amostras, clique no bloco Seletor de variante. Você pode alterar a exibição das amostras escolhendo entre Círculo, Quadrado ou Nenhum.
  5. Clique em Salvar para salvar o tema.

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

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

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 área exibida nas seções. É 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.

Personalizar cartões

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

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

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

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.

Personalizar menus deslizantes

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

Í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

Informações da marca

É possível incluir informações sobre a marca em um bloco específico para isso no rodapé.

Personalizar as informações da marca

Redes sociais

Adicione botões de compartilhamento de produtos e posts do blog, bem como links para suas contas nas 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

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.

Personalize as seguintes configurações de pesquisa:

  • Ativar as sugestões de pesquisa: ative ou desative as sugestões de pesquisa.
  • Exibir fornecedor do produto: mostra ou oculta os fornecedores do produto nas sugestões da pesquisa.
  • Exibir preço do produto: mostra ou oculta preços de produtos nas sugestões da pesquisa.

Alterar configurações da entrada de pesquisa

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

Formato de moeda

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

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:

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 depois em Alterar para escolher uma coleção diferente ou remover a que está no carrinho. Outra opção é clicar em Criar coleção, um botão que sai das configurações do tema e leva você para a página 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:

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