Fazer login

Configurações do tema

Use as configurações de personalização de tema no menu da barra lateral do editor de temas para fazer alterações na tipografia, nas cores, nos links de redes sociais e na página do carrinho da loja virtual. As alterações nas configurações do tema se aplicam a toda a loja virtual.

As seções e os blocos também têm configurações que você pode ajustar para personalizar as seções individuais do tema. Saiba mais sobre seções e blocos.

Nesta página

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

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

Personalizar o logo

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

Etapas:

Desktop

  1. No admin da Shopify, acesse Loja virtual > Temas.

  2. Encontre o tema que você quer editar e clique em Personalizar.

  3. Clique no ícone Configurações do tema configurações.

  4. Clique em Logo.

  5. Na área Logotipo, adicione sua imagem ou use uma imagem gratuita:

    • Para adicionar sua imagem, clique em Selecionar imagem e, depois, adicione uma imagem nova ou existente:

      • Para usar uma imagem que já foi enviada por upload ao admin da Shopify, selecione-a e, depois, clique em Pronto.
      • Para usar uma imagem do computador local, clique em Adicionar imagens. Selecione e adicione uma imagem, depois clique em Pronto.

    • Para usar uma imagem gratuita, clique em Acessar imagens gratuitas. Encontre uma imagem, clique para selecioná-la e, depois, clique em Selecionar.

  6. Opcional: adicionar texto alternativo à sua imagem do logo:

    1. Na área Logo, clique em Editar.
    2. No campo Texto alternativo, insira uma breve descrição da imagem.
    3. Clique em Salvar.

  7. Opcional: na área Largura do logo no desktop, use o controle deslizante para ajustar a largura do pixel do logo.

  8. Clique em Salvar.

iPhone

  1. No app da Shopify, toque no ícone Menu.

  2. Na seção canais de vendas, toque em loja virtual.

  3. Toque em Gerenciar todos os temas.

  4. Encontre o tema que você quer editar e toque em Personalizar.

  5. Toque em ⋮ e, depois, em Configurações do tema.

  6. Toque em Logo.

  7. Na área Logotipo, adicione sua imagem ou use uma imagem gratuita:

    • Para adicionar sua imagem, toque em Selecionar imagem e, depois, adicione uma imagem nova ou existente:

      • Para usar uma imagem que já foi enviada por upload ao admin da Shopify, selecione-a e toque em Pronto.
      • Para usar uma imagem do dispositivo local, toque em Adicionar imagens. Selecione e adicione uma imagem do dispositivo local, toque na imagem para selecioná-la e, depois, toque em Pronto.

    • Para usar uma imagem gratuita, toque em Acessar imagens gratuitas. Encontre uma imagem, toque para selecioná-la e, depois, toque em Pronto.

  8. Opcional: adicionar texto alternativo à sua imagem do logo:

    1. Na área Logo, toque em Editar.
    2. No campo Texto alternativo, insira uma breve descrição da imagem.
    3. Toque em ✓.

  9. Opcional: na área Largura do logo no desktop, use o controle deslizante para ajustar a largura do pixel do logo.

  10. Toque em ✓.

Android

  1. No app da Shopify, toque no ícone Menu.

  2. Na seção canais de vendas, toque em loja virtual.

  3. Toque em Gerenciar todos os temas.

  4. Encontre o tema que você quer editar e toque em Personalizar.

  5. Toque em ... e, depois, em Configurações do tema.

  6. Toque em Logo.

  7. Na área Logotipo, adicione sua imagem ou use uma imagem gratuita:

    • Para adicionar sua imagem, toque em Selecionar imagem e, depois, adicione uma imagem nova ou existente:

      • Para usar uma imagem que já foi enviada por upload ao admin da Shopify, selecione-a e toque em Pronto.
      • Para usar uma imagem do dispositivo local, toque em Adicionar imagens. Selecione e adicione uma imagem do dispositivo local, toque na imagem para selecioná-la e, depois, toque em Pronto.

    • Para usar uma imagem gratuita, toque em Acessar imagens gratuitas. Encontre uma imagem, toque para selecioná-la e, depois, toque em Pronto.

  8. Opcional: adicionar texto alternativo à sua imagem do logo:

    1. Na área Logo, toque em Editar.
    2. No campo Texto alternativo, insira uma breve descrição da imagem.
    3. Toque em ✓.

  9. Opcional: na área Largura do logo no desktop, use o controle deslizante para ajustar a largura do pixel do logo.

  10. Toque em ✓.

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:

Desktop

  1. No admin da Shopify, acesse Loja virtual > Temas.

  2. Encontre o tema ao qual você quer adicionar um favicon e clique em Personalizar.

  3. Clique no ícone Configurações do tema configurações.

  4. Conforme a versão do tema, clique em Logo ou em Favicon.

  5. Na seção Imagem de favicon, clique em Selecionar imagem e, em seguida, adicione uma imagem nova ou existente:

    • Se já tiver enviado ao admin da Shopify, pesquise e selecione a imagem com a caixa de seleção.
    • Para selecionar uma imagem do computador local, clique em Adicionar imagens, abra e selecione o arquivo com a caixa de seleção.

  6. Clique em Done ("Pronto").

  7. Opcional: adicionar texto alternativo à sua imagem de favicon:

    1. Na seção Imagem de favicon, clique em Editar.
    2. No campo Texto alternativo, insira uma breve descrição da imagem.
    3. Clique em Salvar.

  8. Clique em Salvar.

iPhone

  1. No app da Shopify, toque no ícone Menu.

  2. Na seção canais de vendas, toque em loja virtual.

  3. Toque em Gerenciar todos os temas.

  4. Encontre o tema ao qual você quer adicionar um favicon e toque em Personalizar.

  5. Toque em ⋮ e, depois, em Configurações do tema.

  6. Conforme a versão do tema, toque em Logo ou em Favicon.

  7. Na seção Imagem de favicon, toque em Selecionar imagem e, depois, adicione uma imagem nova ou existente:

    • Se já tiver enviado ao admin da Shopify, pesquise e selecione a imagem com a caixa de seleção.
    • Para selecionar uma imagem do computador local, toque em Adicionar imagens, abra e selecione o arquivo com a caixa de seleção.

  8. Toque em Pronto.

  9. Adicionar texto alternativo à sua imagem de favicon:

    1. Na seção Imagem de favicon, toque em Editar.
    2. No campo Texto alternativo, insira uma breve descrição da imagem.
    3. Toque em ✓.

  10. Toque em ✓.

Android

  1. No app da Shopify, toque no ícone Menu.

  2. Na seção canais de vendas, toque em loja virtual.

  3. Toque em Gerenciar todos os temas.

  4. Encontre o tema ao qual você quer adicionar um favicon e toque em Personalizar.

  5. Toque em ... e, depois, em Configurações do tema.

  6. Conforme a versão do tema, toque em Logo ou em Favicon.

  7. Na seção Imagem de favicon, toque em Selecionar imagem e, depois, adicione uma imagem nova ou existente:

    • Se já tiver enviado ao admin da Shopify, pesquise e selecione a imagem com a caixa de seleção.
    • Para selecionar uma imagem do computador local, toque em Adicionar imagens, abra e selecione o arquivo com a caixa de seleção.

  8. Toque em Pronto.

  9. Adicionar texto alternativo à sua imagem de favicon:

    1. Na seção Imagem de favicon, toque em Editar.
    2. No campo Texto alternativo, insira uma breve descrição da imagem.
    3. Toque em ✓.

  10. Toque em ✓.

Cores

É possível definir esquemas de cores nas configurações do tema e aplicar esquemas de cores distintos a diferentes seções da loja virtual com um seletor de esquema de cores. Vale lembrar que um esquema é um conjunto de cores, e o padrão incluído no tema que você usa pode ser alterado no editor de temas a qualquer momento. Além disso, você tem a opção de adicionar as cores da marca para garantir uma aplicação consistente da paleta em toda a loja virtual.

Não é possível definir configurações de cores individuais em um modelo para que o design da loja virtual seja uniforme como um todo. Esquemas de cores muito diferentes podem levar a uma experiência ruim do usuário e fazer com que clientes saiam do site sem comprar produtos.

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

Esquemas de cores

Esquemas de cores são uma configuração de tema que agrupa elementos e suas respectivas cores de forma visualmente representativa. Atribua cores diferentes a vários elementos em um esquema de cores coeso que pode ser aplicado em seu tema onde um seletor de esquema de cores está disponível. Vale lembrar que são permitidos até 21 esquemas de cores. A pré-visualização do esquema permite que você confira como as cores serão exibidas.

Lista de diferentes configurações que podem ser aplicadas a esquemas de cores no editor de temas.
ConfiguraçãoDescrição
Plano de fundoA cor é aplicada ao plano de fundo de algumas seções e ao plano de fundo do botão de contorno.
Gradiente de plano de fundoUm gradiente de cores é aplicado ao plano de fundo de algumas seções. Os gradientes de fundo substituem o plano de fundo sempre que possível.
TextoA cor é aplicada ao texto da seção ou do bloco.
Plano de fundo do botão sólidoA cor é aplicada ao fundo do botão principal.
Etiqueta de botão sólidoA cor é aplicada ao texto do botão principal.
Botão com contornoA cor é aplicada ao texto e à borda do botão secundário.
SombraA cor é aplicada às sombras.

Gerenciar o esquema de cores

O esquema e as opções de cores da loja são definidos nas configurações do tema. Para cores sólidas, use o seletor para selecionar uma nova cor ou insira o valor dela no campo de texto. O campo aceita estes nomes e valores de cores:

  • Nomes de cores como red, black ou blue.
  • Códigos de cor RGB.
  • Valores de cor hexadecimais.

Etapas:

  1. No admin da Shopify, acesse Loja virtual > Temas.

  2. Ao lado do tema que você quer personalizar, clique em Personalizar.

  3. Clique no ícone configurações 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.

Aplicar seu esquema de cores

Depois de definir o esquema de cores nas configurações do tema, você poderá atribuir um esquema de cores usando o seletor de esquema de cores nas seções e blocos do seu tema. O seletor de esquema de cores está disponível apenas em determinadas seções, blocos e configurações gerais do tema.

Seletor de esquema de cores

Gradientes

É possível configurar um gradiente de cores em alguns temas para ter opções visualmente interessantes de plano de fundo. Além disso, a configuração color_background é usada para personalizar a propriedade de plano de fundo do CSS.

O seletor permite escolher as cores, o estilo, o ângulo, a posição e a opacidade do gradiente. Vale lembrar que é possível pré-visualizar essas opções em tempo real no editor de temas. Além disso, você também pode criar um plano de fundo gradiente com código CSS, o que inclui um verificador de validação.

Configurar gradientes

  1. No admin da Shopify, acesse Loja virtual > Temas.

  2. Ao lado do tema que você quer personalizar, clique em Personalizar.

  3. Clique no ícone configurações e, depois, em Cores.

  4. Na seção Esquemas, clique no item existente que você quer editar.

  5. Clique na opção de amostra de cor para o gradiente, como Gradiente de fundo.

  6. Caso você ainda não tenha configurado um gradiente, há algumas alternativas predefinidas para escolher. Basta selecionar uma delas para abrir o painel de opções.

  7. Selecione as opções de gradiente:

    • Escolha entre um gradiente linear ou radial. Use os botões para selecionar seu estilo preferencial.
    • Defina o ângulo do gradiente com as setas para cima e para baixo. Clicar nesses símbolos aumenta ou diminui o percentual de ângulo em 5.
    • Use o controle deslizante para selecionar a Posição do gradiente ou digite um valor numérico no campo.
    • Insira o código hexadecimal de uma cor específica ou use o controle deslizante para escolher um matiz. As cores selecionadas recentemente são exibidas na parte inferior do painel de opções de gradiente.
    • Para tornar o gradiente opaco, use o controle deslizante à direita para selecionar a transparência pretendida. Também é possível inserir um percentual no campo ao lado do código hexadecimal da cor.

  8. Clique em Salvar.

Seletor de gradiente no editor de temas

Usar CSS para definir gradientes

É possível usar a maioria dos valores da propriedade background do CSS para definir uma cor de fundo. Use esse campo para cores sólidas (por exemplo, #000000, black, rgb(0,0,0,0), rgba(0,0,0,0), hsl(0, 0%, 0%) e hsla(0, 0%, 0%, 1) criam um fundo preto sólido) ou para gradientes (por exemplo, linear-gradient(red, green), radial-gradient(red, green) ou conic-gradient(red, green)). Também é possível repetir os gradientes.

Etapas:

  1. No admin da Shopify, acesse Loja virtual > Temas.

  2. Ao lado do tema que você quer personalizar, clique em Personalizar.

  3. Clique no ícone configurações e, depois, em Cores.

  4. Na seção Esquemas, clique no item existente que você quer editar.

  5. Clique no gradiente que você quer editar.

  6. Clique na seta ao lado de Gradiente e selecione CSS.

  7. No campo Código CSS, digite ou cole o código do gradiente. A pré-visualização do editor de temas mostra o gradiente no local correto.

  8. Clique em Salvar.

Campo de código CSS gradiente no editor de temas

Remover um gradiente

  1. No admin da Shopify, acesse Loja virtual > Temas.

  2. Ao lado do tema que você quer personalizar, clique em Personalizar.

  3. Clique no ícone configurações e, depois, em Cores.

  4. Na seção Esquemas, clique no item existente que você quer editar.

  5. Clique no gradiente que você quer remover.

  6. Clique em Remover gradiente.

  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.

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:

Desktop

  1. No admin da Shopify, acesse Loja virtual > Temas.

  2. Encontre o tema que você quer editar e clique em Personalizar.

  3. Clique no ícone Configurações do tema configurações.

  4. Clique em Tipografia.

  5. Para alterar um tipo de fonte do corpo do texto ou cabeçalho da loja, clique em Alterar na seção Cabeçalho ou Corpo.

  6. Clique no nome da fonte que você quer usar e, depois, em Selecionar.

  7. Clique em Salvar.

iPhone

  1. No app da Shopify, toque no ícone Menu.

  2. Na seção canais de vendas, toque em loja virtual.

  3. Toque em Gerenciar todos os temas.

  4. Encontre o tema que você quer editar e toque em Personalizar.

  5. Toque em ⋮ e, depois, em Configurações do tema.

  6. Toque em Tipografia.

  7. Para alterar o tipo de fonte do corpo do texto ou cabeçalho da loja, toque em Alterar na seção Cabeçalho ou Corpo.

  8. Toque no nome da fonte que você quer usar e, depois, em Pronto.

  9. Toque em ✓.

Android

  1. No app da Shopify, toque no ícone Menu.

  2. Na seção canais de vendas, toque em loja virtual.

  3. Toque em Gerenciar todos os temas.

  4. Encontre o tema que você quer editar e toque em Personalizar.

  5. Toque em ... e, depois, em Configurações do tema.

  6. Toque em Tipografia.

  7. Para alterar o tipo de fonte do corpo do texto ou cabeçalho da loja, toque em Alterar na seção Cabeçalho ou Corpo.

  8. Toque no nome da fonte que você quer usar e, depois, em Pronto.

  9. Toque em ✓.

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:

Desktop

  1. No admin da Shopify, acesse Loja virtual > Temas.

  2. Encontre o tema que você quer editar e clique em Personalizar.

  3. Clique no ícone Configurações do tema configurações.

  4. Clique em Tipografia.

  5. Para alterar o tamanho-padrão da fonte Cabeçalho do texto, use o controle deslizante Escala de tamanho da fonte.

  6. Para alterar o tamanho-padrão da fonte do Corpo do texto, use o controle deslizante Escala de tamanho da fonte.

  7. Clique em Salvar.

iPhone

  1. No app da Shopify, toque no ícone Menu.

  2. Na seção canais de vendas, toque em loja virtual.

  3. Toque em Gerenciar todos os temas.

  4. Encontre o tema que você quer editar e toque em Personalizar.

  5. Toque em ⋮ e, depois, em Configurações do tema.

  6. Toque em Tipografia.

  7. Para alterar o tamanho-padrão da fonte Cabeçalho do texto, use o controle deslizante Escala de tamanho da fonte.

  8. Para alterar o tamanho-padrão da fonte do Corpo do texto, use o controle deslizante Escala de tamanho da fonte.

  9. Toque em ✓.

Android

  1. No app da Shopify, toque no ícone Menu.

  2. Na seção canais de vendas, toque em loja virtual.

  3. Toque em Gerenciar todos os temas.

  4. Encontre o tema que você quer editar e toque em Personalizar.

  5. Toque em ... e, depois, em Configurações do tema.

  6. Toque em Tipografia.

  7. Para alterar o tamanho-padrão da fonte Cabeçalho do texto, use o controle deslizante Escala de tamanho da fonte.

  8. Para alterar o tamanho-padrão da fonte do Corpo do texto, use o controle deslizante Escala de tamanho da fonte.

  9. Toque em ✓.

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:

Desktop

  1. No admin da Shopify, acesse Loja virtual > Temas.

  2. Encontre o tema que você quer editar e clique em Personalizar.

  3. Clique no ícone Configurações do tema configurações.

  4. Clique em Layout.

  5. Use o controle deslizante Largura da página para escolher uma largura entre 1.000 px e 1600 px. A configuração-padrão é 1600 px.

  6. Opcional: use o controle deslizante para adicionar um espaço vertical entre as seções de modelo nas páginas, de no máximo 100 px.

  7. Opcional: caso você tenha um layout Grade, use os controles deslizante Espaço horizontal e Espaço vertical para adicionar um espaço entre os conteúdos nas páginas, que será de no máximo 40 px nas linhas de conteúdo das páginas e 40 px nas colunas de conteúdo das páginas.

  8. Clique em Salvar.

iPhone

  1. No app da Shopify, toque no ícone Menu.

  2. Na seção canais de vendas, toque em loja virtual.

  3. Toque em Gerenciar todos os temas.

  4. Encontre o tema que você quer editar e toque em Personalizar.

  5. Toque em ⋮ e, depois, em Configurações do tema.

  6. Toque em Layout.

  7. Use o controle deslizante Largura da página para escolher uma largura entre 1.000 px e 1600 px. A configuração-padrão é 1600 px.

  8. Opcional: use o controle deslizante para adicionar um espaço vertical entre as seções de modelo nas páginas, de no máximo 100 px.

  9. Opcional: caso você tenha um layout Grade, use os controles deslizante Espaço horizontal e Espaço vertical para adicionar um espaço entre os conteúdos nas páginas, que será de no máximo 40 px nas linhas de conteúdo das páginas e 40 px nas colunas de conteúdo das páginas.

  10. Toque em Salvar.

Android

  1. No app da Shopify, toque no ícone Menu.

  2. Na seção canais de vendas, toque em loja virtual.

  3. Toque em Gerenciar todos os temas.

  4. Encontre o tema que você quer editar e toque em Personalizar.

  5. Toque em ... e, depois, em Configurações do tema.

  6. Toque em Layout.

  7. Use o controle deslizante Largura da página para escolher uma largura entre 1.000 px e 1600 px. A configuração-padrão é 1600 px.

  8. Opcional: use o controle deslizante para adicionar um espaço vertical entre as seções de modelo nas páginas, de no máximo 100 px.

  9. Opcional: caso você tenha um layout Grade, use os controles deslizante Espaço horizontal e Espaço vertical para adicionar um espaço entre os conteúdos nas páginas, que será de no máximo 40 px nas linhas de conteúdo das páginas e 40 px nas colunas de conteúdo das páginas.

  10. Toque em ✓.

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:

Desktop

  1. No admin da Shopify, acesse Loja virtual > Temas.

  2. Encontre o tema que você quer editar e clique em Personalizar.

  3. Clique no ícone Configurações do tema configurações.

  4. Clique em Animações.

  5. Opcional: para ativar uma animação que revela as seções da loja virtual durante a rolagem, selecione Revelar seções durante a rolagem.

  6. Opcional: para adicionar uma animação de efeito de cursor a seus cartões e botões, selecione 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.
    • Efeito 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.

  7. Clique em Salvar.

iPhone

  1. No app da Shopify, toque no ícone Menu.

  2. Na seção canais de vendas, toque em loja virtual.

  3. Toque em Gerenciar todos os temas.

  4. Encontre o tema que você quer editar e toque em Personalizar.

  5. Toque em ⋮ e, depois, em Configurações do tema.

  6. Toque em Animações.

  7. Opcional: para ativar uma animação que revela as seções da loja virtual durante a rolagem, selecione Revelar seções durante a rolagem.

  8. Opcional: para adicionar uma animação de efeito de cursor a seus cartões e botões, selecione 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.
    • Efeito 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.

  9. Toque em Salvar.

Android

  1. No app da Shopify, toque no ícone Menu.

  2. Na seção canais de vendas, toque em loja virtual.

  3. Toque em Gerenciar todos os temas.

  4. Encontre o tema que você quer editar e toque em Personalizar.

  5. Toque em ... e, depois, em Configurações do tema.

  6. Toque em Animações.

  7. Opcional: para ativar uma animação que revela as seções da loja virtual durante a rolagem, selecione Revelar seções durante a rolagem.

  8. Opcional: para adicionar uma animação de efeito de cursor a seus cartões e botões, selecione 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.
    • Efeito 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.

  9. Toque em ✓.

Configurações de personalização de elementos visuais

É possível ajustar a aparência dos elementos do tema da loja, como botões, cartões de produto e variantes, na página Configurações do tema. Cada opção contém as configurações relevantes para aquele elemento.

É possível ajustar as configurações para os seguintes elementos do tema:

  • Botões: incluem botões call-to-action em seções como apresentação de slides ou imagem com texto, bem como botões em formulários de contato, nas páginas dos produtos e nas páginas do carrinho.

  • Pílulas de variante: permitem que você exiba as variantes de um produto em uma página do produto ou em uma seção de produtos em 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 variante na loja virtual.

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

  • 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. - Cartões de produto: exibem informações sobre seus produtos em áreas do tema da loja que listam vários itens, como modelos de coleção, seções de coleção e resultados de pesquisa. - Cartões de coleção: exibem informações sobre suas coleções em áreas do tema da loja que listam as coleções, como uma seção ou um modelo de lista de coleções. - Cartões de blog: exibem informações sobre seus posts do blog em áreas do tema da loja que listam vários produtos, como modelos de blog, seções do blog e resultados de pesquisa.

  • Contêineres de conteúdo: os contêineres são usados no elemento textual das seções de conteúdo. Alguns exemplos são 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.

  • Mídia: é o componente visual das seções, como 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.

  • Menus suspensos e janelas pop-up: é possível ajustar a aparência de menus suspensos, janelas modais de pop-up e pop-ups do carrinho na loja virtual.

  • Menus deslizantes: são contêineres interativos ocultos, exibidos apenas quando alguém toca ou clica neles. Menu recolhível ou com opções de filtro de coleção estão nesta categoria. É possível personalizar a borda e a sombra dos menus deslizantes da loja virtual.

  • 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 individualmente nas configurações do tema. Os selos Página e Blog aparecem nos resultados relevantes de pesquisa. É possível personalizar a posição e a forma desses selos, mas não a cor dos selos Página e Blog.

  • 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:

Desktop

  1. No admin da Shopify, acesse Loja virtual > Temas.

  2. Ao lado do tema que você quer editar, clique em Personalizar.

  3. Clique no ícone configurações.

  4. Clique em um elemento para abrir as configurações.

  5. Ajuste qualquer uma das configurações disponíveis. Você pode revisar as alterações navegando para diferentes áreas do tema na janela de pré-visualização.

  6. Clique em Salvar.

iPhone

  1. No app da Shopify, toque no ícone Menu.

  2. Na seção canais de vendas, toque em loja virtual.

  3. Ao lado do tema que você quer editar, toque em Personalizar.

  4. Toque no ícone configurações.

  5. Toque em um elemento para abrir as configurações.

  6. Ajuste qualquer uma das configurações disponíveis. Você pode revisar as alterações navegando para diferentes áreas do tema na janela de pré-visualização.

  7. Toque em ✓.

Android

  1. No app da Shopify, toque no ícone Menu.

  2. Na seção canais de vendas, toque em loja virtual.

  3. Ao lado do tema que você quer editar, toque em Personalizar.

  4. Toque no ícone configurações.

  5. Toque em um elemento para abrir as configurações.

  6. Ajuste qualquer uma das configurações disponíveis. Você pode revisar as alterações navegando para diferentes áreas do tema na janela de pré-visualização.

  7. Toque em ✓.

Redes sociais

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

Etapas:

Desktop

  1. No admin da Shopify, acesse Loja virtual > Temas.

  2. Encontre o tema que você quer editar e clique em Personalizar.

  3. Clique no ícone Configurações do tema configurações.

  4. Clique em Redes sociais.

  5. Para adicionar links para suas contas de redes sociais, insira os endereços do site de suas contas nos campos de redes sociais relevantes. Lembre-se de inserir os links completos, como https://instagram.com/shopify ou https://tiktok.com/@shopify.

  6. Clique em Salvar.

iPhone

  1. No app da Shopify, toque no ícone Menu.

  2. Na seção canais de vendas, toque em loja virtual.

  3. Toque em Gerenciar todos os temas.

  4. Encontre o tema que você quer editar e toque em Personalizar.

  5. Toque em ⋮ e, depois, em Configurações do tema.

  6. Toque em Redes sociais.

  7. Para adicionar links para suas contas de redes sociais, insira os endereços do site de suas contas nos campos de redes sociais relevantes. Lembre-se de inserir os links completos, como https://instagram.com/shopify ou https://tiktok.com/@shopify.

  8. Toque em ✓.

Android

  1. No app da Shopify, toque no ícone Menu.

  2. Na seção canais de vendas, toque em loja virtual.

  3. Toque em Gerenciar todos os temas.

  4. Encontre o tema que você quer editar e toque em Personalizar.

  5. Toque em ... e, depois, em Configurações do tema.

  6. Toque em Redes sociais.

  7. Para adicionar links para suas contas de redes sociais, insira os endereços do site de suas contas nos campos de redes sociais relevantes. Lembre-se de inserir os links completos, como https://instagram.com/shopify ou https://tiktok.com/@shopify.

  8. Toque em ✓.

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:

Desktop

  1. No admin da Shopify, acesse Loja virtual > Temas.

  2. Encontre o tema que você quer editar e clique em Personalizar.

  3. Clique no ícone Configurações do tema configurações.

  4. Clique em Comportamento de pesquisa.

  5. Para habilitar ou desabilitar as sugestões de pesquisa, selecione ou desmarque Habilitar as sugestões de pesquisa.

  6. Opcional: para exibir ou ocultar o fabricante do produto nas sugestões de pesquisa, selecione ou desmarque a opção Exibir fabricante do produto.

  7. Opcional: para exibir ou ocultar o preço do produto nas sugestões de pesquisa, selecione ou desmarque Exibir preço do produto.

  8. Clique em Salvar.

iPhone

  1. No app da Shopify, toque no ícone Menu.

  2. Na seção canais de vendas, toque em loja virtual.

  3. Toque em Gerenciar todos os temas.

  4. Encontre o tema que você quer editar e toque em Personalizar.

  5. Toque em ⋮ e, depois, em Configurações do tema.

  6. Toque em Comportamento de pesquisa.

  7. Para habilitar ou desabilitar as sugestões de pesquisa, selecione ou desmarque Habilitar as sugestões de pesquisa.

  8. Opcional: para exibir ou ocultar o fabricante do produto nas sugestões de pesquisa, selecione ou desmarque a opção Exibir fabricante do produto.

  9. Opcional: para exibir ou ocultar o preço do produto nas sugestões de pesquisa, selecione ou desmarque Exibir preço do produto.

  10. Toque em ✓.

Android

  1. No app da Shopify, toque no ícone Menu.

  2. Na seção canais de vendas, toque em loja virtual.

  3. Toque em Gerenciar todos os temas.

  4. Encontre o tema que você quer editar e toque em Personalizar.

  5. Toque em ... e, depois, em Configurações do tema.

  6. Toque em Comportamento de pesquisa.

  7. Para habilitar ou desabilitar as sugestões de pesquisa, selecione ou desmarque Habilitar as sugestões de pesquisa.

  8. Opcional: para exibir ou ocultar o fabricante do produto nas sugestões de pesquisa, selecione ou desmarque a opção Exibir fabricante do produto.

  9. Opcional: para exibir ou ocultar o preço do produto nas sugestões de pesquisa, selecione ou desmarque Exibir preço do produto.

  10. Toque em ✓.

Formato de moeda

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

Etapas:

Desktop

  1. No admin da Shopify, acesse Loja virtual > Temas.

  2. Encontre o tema que você quer editar e clique em Personalizar.

  3. Clique no ícone Configurações do tema configurações.

  4. Clique em Formato de moeda.

  5. Para exibir códigos de moeda, selecione Mostrar códigos de moeda.

  6. Clique em Salvar.

iPhone

  1. No app da Shopify, toque no ícone Menu.

  2. Na seção canais de vendas, toque em loja virtual.

  3. Toque em Gerenciar todos os temas.

  4. Encontre o tema que você quer editar e toque em Personalizar.

  5. Toque em ⋮ e, depois, em Configurações do tema.

  6. Toque em Formato de moeda.

  7. Para exibir códigos de moeda, selecione Mostrar códigos de moeda.

  8. Toque em ✓.

Android

  1. No app da Shopify, toque no ícone Menu.

  2. Na seção canais de vendas, toque em loja virtual.

  3. Toque em Gerenciar todos os temas.

  4. Encontre o tema que você quer editar e toque em Personalizar.

  5. Toque em ... e, depois, em Configurações do tema.

  6. Toque em Formato de moeda.

  7. Para exibir códigos de moeda, selecione Mostrar códigos de moeda.

  8. Toque em ✓.

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:

Desktop

  1. No admin da Shopify, acesse Loja virtual > Temas.

  2. Encontre o tema que você quer editar e clique em Personalizar.

  3. Clique no ícone Configurações do tema configurações.

  4. Clique em carrinho.

  5. Use o menu suspenso Tipo de cartão para selecionar o estilo de carrinho deslizante, página ou notificação pop-up.

  6. Opcional: para mostrar os fabricantes dos itens no carrinho do cliente, selecione Exibir fabricante.

  7. Opcional: ofereça aos clientes uma caixa de texto onde possam inserir solicitações especiais ou adicionar informações extras ao pedido. Para isso, selecione Ativar observação do carrinho.

  8. Opcional: se você selecionar Deslizante como Tipo de carrinho, será possível exibir uma coleção no carrinho de compras deslizante quando ele estiver vazio:

    1. Na área Carrinho de compras deslizante, clique em Selecionar coleção.
    2. Clique no nome da coleção que você deseja exibir e, depois, em Selecionar.

  9. Opcional: se você selecionar Deslizante como Tipo de carrinho, será possível alterar o esquema de cores do seu carrinho de compras deslizante seguindo estas etapas:

    1. Na área Carrinho de compras deslizante > Esquema de cores, clique em Alterar.
    2. Selecione um esquema de cores que você deseja usar no carrinho de compras deslizante.

  10. Clique em Salvar.

iPhone

  1. No app da Shopify, toque no ícone Menu.

  2. Na seção canais de vendas, toque em loja virtual.

  3. Toque em Gerenciar todos os temas.

  4. Encontre o tema que você quer editar e toque em Personalizar.

  5. Toque em ⋮ e, depois, em Configurações do tema.

  6. Toque em Carrinho.

  7. Selecione o Tipo de carrinho nas opções Deslizante, Página ou Notificação pop-up.

  8. Opcional: para mostrar os fabricantes dos itens no carrinho do cliente, selecione Exibir fabricante.

  9. Opcional: ofereça aos clientes uma caixa de texto onde possam inserir solicitações especiais ou adicionar informações extras ao pedido. Para isso, selecione Ativar observação do carrinho.

  10. Opcional: se você selecionar Deslizante como Tipo de carrinho, será possível exibir uma coleção no carrinho de compras deslizante quando ele estiver vazio:

    1. Na área Carrinho de compras deslizante, toque em Selecionar coleção.
    2. Toque no nome da coleção que você quer exibir e, depois, em Pronto.

  11. Opcional: se você selecionar Deslizante como Tipo de carrinho, será possível alterar o esquema de cores do seu carrinho de compras deslizante seguindo estas etapas:

    1. Na área Carrinho de compras deslizante > Esquema de cores, toque em Alterar.
    2. Selecione um esquema de cores que você deseja usar no carrinho de compras deslizante e toque em Pronto.

  12. Toque em ✓.

Android

  1. No app da Shopify, toque no ícone Menu.

  2. Na seção canais de vendas, toque em loja virtual.

  3. Toque em Gerenciar todos os temas.

  4. Encontre o tema que você quer editar e toque em Personalizar.

  5. Toque em ... e, depois, em Configurações do tema.

  6. Toque em Carrinho.

  7. Selecione o Tipo de carrinho nas opções Deslizante, Página ou Notificação pop-up.

  8. Opcional: para mostrar os fabricantes dos itens no carrinho do cliente, selecione Exibir fabricante.

  9. Opcional: ofereça aos clientes uma caixa de texto onde possam inserir solicitações especiais ou adicionar informações extras ao pedido. Para isso, selecione Ativar observação do carrinho.

  10. Opcional: se você selecionar Deslizante como Tipo de carrinho, será possível exibir uma coleção no carrinho de compras deslizante quando ele estiver vazio:

    1. Na área Carrinho de compras deslizante, toque em Selecionar coleção.
    2. Toque no nome da coleção que você quer exibir e, depois, em Pronto.

  11. Opcional: se você selecionar Deslizante como Tipo de carrinho, será possível alterar o esquema de cores do seu carrinho de compras deslizante seguindo estas etapas:

    1. Na área Carrinho de compras deslizante > Esquema de cores, toque em Alterar.
    2. Selecione um esquema de cores que você deseja usar no carrinho de compras deslizante e toque em Pronto.

  12. Toque em ✓.

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:

Desktop

  1. No admin da Shopify, acesse Loja virtual > Temas.

  2. Encontre o tema que você quer editar e clique em Personalizar.

  3. Clique no ícone Configurações do tema configurações.

  4. Clique em Estilo de tema.

  5. Selecione o estilo de tema que você deseja usar e clique em Alterar estilo.

  6. Clique em Salvar.

iPhone

  1. No app da Shopify, toque no ícone Menu.

  2. Na seção canais de vendas, toque em loja virtual.

  3. Toque em Gerenciar todos os temas.

  4. Encontre o tema que você quer editar e toque em Personalizar.

  5. Toque em ⋮ e, depois, em Configurações do tema.

  6. Toque em Estilo de tema.

  7. Selecione o estilo de tema que você deseja usar e toque em Pronto.

  8. Toque em ✓.

Android

  1. No app da Shopify, toque no ícone Menu.

  2. Na seção canais de vendas, toque em loja virtual.

  3. Toque em Gerenciar todos os temas.

  4. Encontre o tema que você quer editar e toque em Personalizar.

  5. Toque em ... e, depois, em Configurações do tema.

  6. Toque em Estilo de tema.

  7. Selecione o estilo de tema que você deseja usar e toque em Pronto.

  8. Toque em ✓.

Não encontrou as respostas que está procurando? Estamos sempre à disposição para ajudar você.