Ajuda
Fazer login

Personalizar as configurações do tema

É possível personalizar as configurações gerais da loja virtual, como tipografia, cores, links de redes sociais e a página do carrinho, na seção Configurações do tema do menu da barra lateral do editor de temas. As alterações feitas na seção Configurações do tema são aplicadas a toda a loja virtual.

Seções e blocos também têm configurações individuais que podem ser ajustadas para personalizar seções individuais do tema. Saiba mais sobre seções e blocos.

Nesta página

É possível adicionar um logo da sua empresa à loja virtual. O logo é exibido nos seguintes locais:

  • no cabeçalho em todas as páginas
  • na página com senha

Personalizar o logo

As imagens de 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 de Configurações do tema configurações.

  4. Clique em Logo.

  5. Na área Logo, adicione a imagem ou use uma imagem gratuita:

    • Para adicionar a imagem, clique em Selecionar imagem, e adicione uma imagem nova ou existente:
      • Para usar uma imagem que você já enviou para o admin da Shopify, selecione a imagem e clique em Concluído.
      • Para usar uma imagem do computador, clique em Adicionar imagens. Selecione e adicione uma imagem e, em seguida, clique em Concluído.
    • Para usar uma imagem gratuita, clique em Explorar imagens gratuitas. Encontre uma imagem, clique nela para selecioná-la e, em seguida, clique em Selecionar.

  6. Opcional: adicione um texto alternativo à 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 de intervalo para ajustar a largura do logo em pixels.

  8. Clique em Salvar.

Celular

  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 … ou ⋮ e, depois, em Configurações do tema.

  6. Toque em Logo.

  7. Na área Logo, adicione a imagem ou use uma imagem gratuita:

    • Para adicionar a imagem, toque em Selecionar imagem, e adicione uma imagem nova ou existente:
      • Para usar uma imagem que você já enviou para o admin da Shopify, selecione a imagem e toque em Concluído.
      • Para usar uma imagem do dispositivo, toque em Adicionar imagens. Selecione e adicione uma imagem do dispositivo, toque na imagem para selecioná-la e, em seguida, toque em Concluído.
    • Para usar uma imagem gratuita, toque em Explorar imagens gratuitas. Encontre uma imagem, toque nela para selecioná-la e, em seguida, toque em Concluído.

  8. Opcional: adicione um texto alternativo à 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 Salvar ou ✓.

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

  10. Toque em Salvar ou ✓.

Adicionar um favicon

É possível adicionar um ícone de favoritos, ou favicon, para ajudar no branding da loja virtual. Um favicon é exibido nos seguintes locais:

  • na aba do navegador
  • no histórico do navegador
  • ícones no desktop
  • ao lado do nome da loja virtual quando o site é adicionado aos favoritos

Saiba mais sobre favicons.

Etapas:

Desktop

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

  2. Encontre o tema para o qual quer adicionar um favicon e clique em Editar tema.

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

  4. Dependendo da versão do tema, clique em Logo ou Favicon.

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

    • Para selecionar uma imagem já enviada para o admin da Shopify, pesquise ou encontre a imagem e selecione-a com a caixa de seleção.
    • Para selecionar uma imagem do computador, clique em Adicionar imagens, abra a imagem e selecione-a com a caixa de seleção.

  6. Clique em Concluído.

  7. Opcional: adicione um texto alternativo à imagem do favicon:

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

  8. Clique em Salvar.

Celular

  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 para o qual quer adicionar um favicon e toque em Editar tema.

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

  6. Dependendo da versão do tema, toque em Logo ou Favicon.

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

    • Para selecionar uma imagem já enviada para o admin da Shopify, pesquise ou encontre a imagem e selecione-a com a caixa de seleção.
    • Para selecionar uma imagem do dispositivo, toque em Adicionar imagens, abra a imagem e selecione-a com a caixa de seleção.

  8. Toque em Concluído.

  9. Adicione um texto alternativo à imagem do favicon:

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

  10. Toque em Salvar ou ✓.

Cores

É possível definir diferentes esquemas de cores nas configurações do tema e aplicá-los a diferentes seções da loja virtual com um seletor de esquemas de cores. Um esquema de cores é um conjunto de cores. O tema tem um conjunto de esquemas de cores padrão que podem ser alterados a qualquer momento no editor de temas. Adicione as cores da marca para garantir uma aplicação coesa da paleta de cores em toda a loja virtual.

Os modelos não têm configurações de cores individuais, para que o design da loja virtual seja consistente em todo o site. Um modelo é considerado uma página principal ou o conteúdo principal de uma loja. Ter esquemas de cores diferentes em toda a loja pode levar a uma experiência do usuário ruim e fazer com que os clientes saiam da loja sem comprar produtos.

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

Esquemas de cores

Os esquemas de cores são uma configuração do tema que agrupa elementos e suas respectivas cores de uma forma visualmente representativa. É possível atribuir cores diferentes a vários elementos em um esquema de cores coeso que pode ser aplicado em todo o tema onde houver um seletor de esquemas de cores disponível. É possível ter até 21 esquemas de cores. Também é possível pré-visualizar como as cores são exibidas na prévia do esquema.

Lista das 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 do plano de fundoUm gradiente de cores é aplicado ao plano de fundo de algumas seções. Os gradientes do plano 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 plano de fundo do botão principal.
Rótulo do botão sólidoA cor é aplicada ao texto do botão principal.
Botão de contornoA cor é aplicada ao texto e à borda do botão secundário.
SombraA cor é aplicada às sombras.

Gerenciamento do 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 de cores para escolher uma nova cor ou insira o valor dela no campo de texto. O campo de cor aceita os seguintes nomes e valores de cor:

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

Etapas:

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

  2. Clique em Editar tema ao lado do tema que quer personalizar.

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

  4. Na seção Esquemas, clique em um esquema existente ou em Adicionar esquema para incluir um novo esquema de cores.

  5. Clique na amostra de cor do tipo de conteúdo que deseja alterar.

  6. Para definir a cor, insira um código de cor hexadecimal ou escolha a cor no seletor de cores. Para definir a cor como transparente, apague o código hexadecimal do campo de texto.

  7. Clique em Salvar.

Aplicação do esquema de cores

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

Seletor de esquemas de cores

Gradientes

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

O seletor de gradiente permite selecionar as cores, o estilo, o ângulo, a posição e a opacidade do gradiente. As opções selecionadas no seletor de gradiente são pré-visualizadas em tempo real no editor de temas. Também é possível criar um plano de fundo gradiente com código CSS, que inclui um verificador de validação.

Configurar gradientes

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

  2. Clique em Editar tema ao lado do tema que quer personalizar.

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

  4. Na seção Esquemas, clique em um esquema existente que deseja editar.

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

  6. Caso não tenha configurado um gradiente, serão exibidas algumas opções predefinidas. Selecione um gradiente predefinido para abrir o painel de opções.

  7. Selecione as opções do gradiente:

  • Escolha entre um gradiente linear ou radial. Use os botões para selecionar o estilo de gradiente de sua preferência.
  • Defina o ângulo do gradiente com as setas para cima e para baixo. Clique na seta para cima ou para baixo para aumentar ou diminuir a porcentagem do ângulo em 5.
  • Use o controle deslizante para selecionar a Posição do gradiente ou insira um valor numérico no campo.
  • Insira um código hexadecimal de cor específico ou use o controle deslizante de cor para escolher um tom. As cores selecionadas recentemente são exibidas na parte inferior do painel de opções de gradiente.
  • Para definir a opacidade do gradiente, use o controle deslizante à direita para selecionar a transparência. Também é possível inserir uma porcentagem no campo ao lado do código de cor hexadecimal.
  1. Clique em Salvar.

Seletor de gradiente no editor de temas

Usar CSS para definir gradientes

A maioria dos valores da propriedade background do CSS pode ser usada para definir uma cor de fundo. Use este campo para cores sólidas (por exemplo, #000000, preto, rgb(0,0,0,0), rgba(0,0,0,0), hsl(0, 0%, 0%) e hsla(0, 0%, 0%, 1) produzem um fundo preto sólido) ou para gradientes (por exemplo, linear-gradient(red, green), radial-gradient(red, green) ou conic-gradient(red, green)). Os gradientes também podem ser repetidos.

Etapas:

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

  2. Clique em Editar tema ao lado do tema que quer personalizar.

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

  4. Na seção Esquemas, clique em um esquema existente que deseja editar.

  5. Clique no gradiente que deseja 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 exibe o gradiente no local apropriado.

  8. Clique em Salvar.

Campo de código CSS do gradiente no editor de temas

Remover um gradiente

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

  2. Clique em Editar tema ao lado do tema que quer personalizar.

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

  4. Na seção Esquemas, clique em um esquema existente que deseja editar.

  5. Clique no gradiente que deseja remover.

  6. Clique em Remover gradiente.

  7. Clique em Salvar.

Tipografia

É possível definir o estilo e o tamanho da fonte para o texto na loja virtual. Você pode escolher uma fonte do sistema ou adicionar uma fonte personalizada. As fontes disponíveis no tema dependem do desenvolvedor do tema. Todos os temas gratuitos da Shopify usam fontes da biblioteca de fontes da Shopify.

Considere usar fontes do sistema na loja, pois elas já vêm instaladas no computador do usuário. O uso de fontes do sistema evita o download de novas fontes para o computador do cliente, o que pode afetar negativamente a velocidade de carregamento da loja. A fonte exibida no computador do cliente depende do sistema operacional dele.

Personalizar os tipos de fonte

Consulte a biblioteca de fontes da Shopify para ver uma lista de 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 de Configurações do tema configurações.

  4. Clique em Tipografia.

  5. Para alterar um tipo de fonte dos títulos ou do corpo do texto da loja, clique em Alterar na seção Títulos ou Corpo.

  6. Clique no nome da fonte que deseja usar e, depois, clique em Selecionar.

  7. Clique em Salvar.

Celular

  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 … ou ⋮ e, depois, em Configurações do tema.

  6. Toque em Tipografia.

  7. Para alterar um tipo de fonte dos títulos ou do corpo do texto da loja, toque em Alterar na seção Títulos ou Corpo.

  8. Toque no nome da fonte que deseja usar e, em seguida, em Concluído.

  9. Toque em Salvar ou ✓.

Personalizar os tamanhos da fonte

É possível definir os tamanhos de fonte padrão para os títulos e o corpo do texto com a configuração de tema Tipografia.

O tamanho mínimo da fonte é 100%, e o máximo é 150%. Cada incremento da escala aumenta o tamanho da 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 de Configurações do tema configurações.

  4. Clique em Tipografia.

  5. Para alterar o tamanho-padrão da fonte para o texto de Títulos, use o controle deslizante Escala de tamanho da fonte para selecionar o tamanho-padrão da fonte.

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

  7. Clique em Salvar.

Celular

  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 … ou ⋮ e, depois, em Configurações do tema.

  6. Toque em Tipografia.

  7. Para alterar o tamanho-padrão da fonte para o texto de Títulos, use o controle deslizante Escala de tamanho da fonte para selecionar o tamanho-padrão da fonte.

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

  9. Toque em Salvar ou ✓.

Layout

É possível definir a largura máxima em que a loja virtual será exibida e definir o espaço 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 de 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 1.600 px. A configuração padrão é de 1.600 px.

  6. Opcional: use o controle deslizante para adicionar Espaço vertical entre as seções do modelo nas páginas. É possível adicionar no máximo 100 px entre as seções.

  7. Opcional: se você tiver um layout em Grade, use os controles deslizantes Espaço horizontal e Espaço vertical para adicionar espaço entre o conteúdo da grade nas páginas. Adicionar espaço horizontal incluirá no máximo 40 px de espaço às linhas de conteúdo nas páginas, enquanto adicionar espaço vertical incluirá no máximo 40 px de espaço às colunas de conteúdo nas páginas.

  8. Clique em Salvar.

Celular

  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 … ou ⋮ 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 1.600 px. A configuração padrão é de 1.600 px.

  8. Opcional: use o controle deslizante para adicionar Espaço vertical entre as seções do modelo nas páginas. É possível adicionar no máximo 100 px entre as seções.

  9. Opcional: se você tiver um layout em Grade, use os controles deslizantes Espaço horizontal e Espaço vertical para adicionar espaço entre o conteúdo da grade nas páginas. Adicionar espaço horizontal incluirá no máximo 40 px de espaço às linhas de conteúdo nas páginas, enquanto adicionar espaço vertical incluirá no máximo 40 px de espaço às colunas de conteúdo nas páginas.

  10. Toque em Salvar ou ✓.

Animações

As animações permitem adicionar movimento e interesse visual à loja virtual. É possível ativar uma animação de surgimento gradual (fade-in) que revela as seções da loja durante a rolagem e um efeito ao passar o mouse para os 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 de 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 ao rolar.

  6. Opcional: para adicionar uma animação de efeito ao passar o mouse aos cartões e botões, selecione uma das seguintes opções na configuração Efeito ao passar o mouse:

    • Elevação vertical: quando um cliente passa o mouse sobre um cartão ou botão, o elemento se desloca para cima.
    • Elevação 3D: quando um cliente passa o mouse sobre um cartão ou botão, o elemento se desloca para a frente, dando um efeito 3D. Isso também tem um brilho sutil que se move pelo elemento, dando a ele outra camada de dimensão.

  7. Clique em Salvar.

Celular

  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 … ou ⋮ 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 ao rolar.

  8. Opcional: para adicionar uma animação de efeito ao passar o mouse aos cartões e botões, selecione uma das seguintes opções na configuração Efeito ao passar o mouse:

    • Elevação vertical: quando um cliente passa o mouse sobre um cartão ou botão, o elemento se desloca para cima.
    • Elevação 3D: quando um cliente passa o mouse sobre um cartão ou botão, o elemento se desloca para a frente, dando um efeito 3D. Isso também tem um brilho sutil que se move pelo elemento, dando a ele outra camada de dimensão.

  9. Toque em Salvar ou ✓.

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

É possível ajustar a aparência dos elementos do tema, 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 esse elemento.

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

  • Botões: incluem os botões de call-to-action em seções como uma apresentação de slides ou imagem com texto, bem como os botões em um formulário de contato, nas páginas de produto e de carrinho.
  • Botões de opção de variante: permitem exibir as variantes de um produto na página do produto ou em uma seção de produto em destaque. Os clientes podem selecionar a variante desejada para adicionar o produto ao carrinho sem precisar mudar de página. É possível personalizar como os botões de opção de variante são exibidos na loja virtual.
  • Campos de entrada: são áreas interativas que exigem uma ação do cliente, como um seletor de quantidade, um formulário de inscrição por e-mail ou observações do carrinho. É possível ajustar a aparência dos campos de entrada da loja virtual.
  • As configurações de cartões de produto, de coleção e de blog permitem personalizar o estilo de cada tipo de cartão quando eles são exibidos em seções da página.
    • Cartões de produto: exibem informações sobre os produtos em áreas do tema que listam vários produtos, como modelos de coleção, seções de coleção e resultados de pesquisa.
    • Cartões de coleção: exibem informações sobre as coleções em áreas do tema que as listam, como um modelo ou uma seção de lista de coleções.
    • Cartões de blog: exibem informações sobre os posts do blog em áreas do tema que listam vários produtos, como modelos de blog, seções de blog e resultados de pesquisa.
  • Recipientes de conteúdo: são usados para o elemento de texto das seções de conteúdo, como 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. É possível personalizar a aparência dos recipientes de conteúdo da loja virtual.
  • Mídia: é o componente visual de seções, por exemplo, a mídia do produto ou uma imagem na seção Imagem com texto. É possível adicionar bordas e sombras à mídia.
  • Menus suspensos e pop-ups: é possível ajustar a aparência de menus suspensos, janelas modais e pop-ups do carrinho na loja virtual.
  • Painéis deslizantes: são recipientes interativos ocultos que aparecem ao serem tocados ou clicados, como menus recolhíveis ou opções de filtro de coleção. É possível personalizar a borda e a sombra dos painéis deslizantes na loja virtual.
  • Selos: os selos Sale e Sold out são adicionados automaticamente às imagens do produto quando o preço é reduzido ou quando a contagem de estoque chega a 0. Nas configurações do tema, é possível ajustar a posição, a forma e a cor dos selos Sale e Sold out individualmente. Os selos Page e Blog são exibidos nos resultados de pesquisa relevantes. É possível personalizar a posição e a forma desses selos, mas não a cor dos selos Page e Blog.
  • Informações da marca: é possível incluir informações sobre a marca na loja virtual. Depois de concluir as etapas a seguir, será possível adicionar o bloco Informações da marca no rodapé da loja virtual.

Etapas:

Desktop

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

  2. Clique em Editar tema ao lado do tema que quer editar.

  3. Clique no ícone settings.

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

  5. Ajuste as configurações disponíveis. É possível analisar as alterações ao navegar para áreas diferentes do tema na janela de pré-visualização.

  6. Clique em Salvar.

Celular

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

  2. Na seção Canais de vendas, toque em Loja virtual.

  3. Toque em Editar tema ao lado do tema que quer editar.

  4. Toque no ícone settings.

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

  6. Ajuste as configurações disponíveis. É possível analisar as alterações ao navegar para áreas diferentes do tema na janela de pré-visualização.

  7. Toque em Salvar ou ✓.

Redes sociais

É possível adicionar links para as contas de redes sociais que são exibidos no rodapé da 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 de Configurações do tema configurações.

  4. Clique em Redes sociais.

  5. Para adicionar links para as contas de redes sociais, insira os endereços dos sites das contas nos respectivos campos de Contas de redes sociais. É preciso inserir os links completos, como https://instagram.com/shopify ou https://tiktok.com/@shopify.

  6. Clique em Salvar.

Celular

  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 … ou ⋮ e, depois, em Configurações do tema.

  6. Toque em Redes sociais.

  7. Para adicionar links para as contas de redes sociais, insira os endereços dos sites das contas nos respectivos campos de Contas de redes sociais. É preciso inserir os links completos, como https://instagram.com/shopify ou https://tiktok.com/@shopify.

  8. Toque em Salvar ou ✓.

Comportamento da pesquisa

A loja virtual inclui a pesquisa preditiva, que exibe sugestões quando os clientes começam a digitar no campo de pesquisa. As sugestões de pesquisa podem ajudar os clientes a formular e refinar as consultas de pesquisa, além de oferecer novas maneiras de explorar a loja virtual. Elas também permitem que os clientes naveguem rapidamente pelas correspondências, sem precisar sair da página atual para ver uma lista separada de resultados de pesquisa.

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

É possível personalizar como as sugestões de pesquisa são exibidas para os 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 de Configurações do tema configurações.

  4. Clique em Comportamento da pesquisa.

  5. Para ativar ou desativar as sugestões de pesquisa, marque ou desmarque a opção Habilitar sugestões de pesquisa.

  6. Opcional: para exibir ou ocultar o fabricante do produto nas sugestões de pesquisa, marque 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, marque ou desmarque a opção Exibir preço do produto.

  8. Clique em Salvar.

Celular

  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 … ou ⋮ e, depois, em Configurações do tema.

  6. Toque em Comportamento da pesquisa.

  7. Para ativar ou desativar as sugestões de pesquisa, marque ou desmarque a opção Habilitar sugestões de pesquisa.

  8. Opcional: para exibir ou ocultar o fabricante do produto nas sugestões de pesquisa, marque 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, marque ou desmarque a opção Exibir preço do produto.

  10. Toque em Salvar ou ✓.

Formato da moeda

É possível exibir o código da moeda com os preços nos 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 de Configurações do tema configurações.

  4. Clique em Formato da moeda.

  5. Para exibir os códigos de moeda, marque a opção Exibir códigos de moeda.

  6. Clique em Salvar.

Celular

  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 … ou ⋮ e, depois, em Configurações do tema.

  6. Toque em Formato da moeda.

  7. Para exibir os códigos de moeda, marque a opção Exibir códigos de moeda.

  8. Toque em Salvar ou ✓.

Carrinho

É possível alterar o estilo do carrinho na loja virtual. Quando um cliente adiciona um produto da loja ao carrinho, este pode ser exibido como um carrinho deslizante, uma página ou uma notificação pop-up. Para manter o cliente na página do produto, use a opção de carrinho deslizante ou de notificação pop-up. Para levar o cliente à 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 de Configurações do tema configurações.

  4. Clique em Carrinho.

  5. Use o menu suspenso Tipo de carrinho para selecionar o estilo Deslizante, Página ou Notificação pop-up.

  6. Opcional: para exibir os fabricantes dos itens no carrinho de um cliente, marque a opção Exibir fabricante.

  7. Opcional: para disponibilizar aos clientes uma caixa de texto onde eles possam inserir solicitações especiais ou adicionar outras informações sobre o pedido, marque a opção Habilitar observação do carrinho.

  8. Opcional: se 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 quer exibir e, depois, em Selecionar.

  9. Opcional: se selecionar Deslizante como Tipo de carrinho, será possível alterar o esquema de cores do 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 para o carrinho de compras deslizante.

  10. Clique em Salvar.

Celular

  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 … ou ⋮ e, depois, em Configurações do tema.

  6. Toque em Carrinho.

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

  8. Opcional: para exibir os fabricantes dos itens no carrinho de um cliente, marque a opção Exibir fabricante.

  9. Opcional: para disponibilizar aos clientes uma caixa de texto onde eles possam inserir solicitações especiais ou adicionar outras informações sobre o pedido, marque a opção Habilitar observação do carrinho.

  10. Opcional: se 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 quer exibir e, depois, toque em Concluído.

  11. Opcional: se selecionar Deslizante como Tipo de carrinho, será possível alterar o esquema de cores do 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 para o carrinho de compras deslizante e, depois, toque em Concluído.

  12. Toque em Salvar ou ✓.

CSS personalizado

A seção CSS personalizado permite inserir código CSS próprio para, por exemplo, personalizar a aparência dos botões da loja virtual 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 loja virtual, exceto o checkout.

Saiba mais sobre como adicionar CSS personalizado ao tema.

Estilo de tema

Um estilo de tema é um conjunto de configurações escolhido por um designer de temas. É possível aplicar um estilo de tema à loja para dar uma aparência profissional. Todos os temas têm um estilo de tema aplicado por padrão. As outras opções de estilo de tema disponíveis dependem do tema em uso.

Ao personalizar um tema, você substitui as configurações do estilo de tema pelas suas. Quando você aplica um estilo de tema, altera as configurações atuais, como cores e tipografia.

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 de Configurações do tema configurações.

  4. Clique em Estilo de tema.

  5. Selecione o estilo de tema que quer usar e, depois, clique em Alterar estilo.

  6. Clique em Salvar.

Celular

  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 … ou ⋮ e, depois, em Configurações do tema.

  6. Toque em Estilo de tema.

  7. Selecione o estilo de tema que quer usar e, depois, toque em Concluído.

  8. Toque em Salvar ou ✓.