Seções do Supply

O conteúdo do tema é criado usando blocos personalizáveis de conteúdo que determinam o layout e a aparência de diferentes páginas da loja virtual e são denominados seções.

As seções estáticas aparecem em locais predeterminados da loja virtual e não podem ser removidas ou reorganizadas. São ocupadas por cabeçalhos, rodapés, seções de navegação ou seções de conteúdo em páginas como páginas de produto e páginas de coleção. Por exemplo, a seção Produto determina a aparência de cada página de produto da loja virtual.

As seções dinâmicas são opcionais e servem para personalizar a página inicial. O layout é criado com até 25 seções dinâmicas, que podem ser adicionadas, reorganizadas e removidas.

Você pode saber mais sobre a seleção exclusiva de seções de Supply e aprender a personalizá-las para se adequarem à sua empresa.

Seções estáticas

O Supply inclui as seguintes seções estáticas:

  • Cabeçalho
  • Rodapé
  • Produto
  • Coleção
  • Página da lista de coleções
  • Páginas do artigo

Seções dinâmicas

O Supply inclui as seguintes seções dinâmicas:

  • Posts do blog
  • Lista de coleções
  • Coleção em destaque
  • Imagem com texto
  • Apresentação de slides
  • Produto em destaque
  • Newsletter
  • Mapa
  • Rich text
  • Vídeo
  • Conteúdo personalizado

Cabeçalho

O cabeçalho do tema é a seção que aparece no topo de todas as páginas de sua loja.

Personalize os seguintes itens no cabeçalho:

  • Logo
  • Barra de avisos
  • Menu

Adicionar um logo personalizado

É possível adicionar uma imagem do logo personalizado ao cabeçalho da loja. O melhor formato é um arquivo .png de fundo transparente. O logo ideal para o Supply tem 400 pixels de largura. É possível redimensionar a imagem do logo ajustando a largura. Não aumente o valor além da largura original. Isso pode causar distorção e queda na qualidade da imagem.

Se você não adicionar uma imagem de logo, o nome da loja será exibido como texto. A alteração do nome da loja pode ser feita na página Configurações gerais do admin da Shopify.

  • Largura personalizada do logo: a largura do logo.
  1. Clique em Cabeçalho. 2. Na área Imagem do logo, clique em Selecionar imagem e siga um destes procedimentos: * Para selecionar uma imagem que você já carregou no admin da Shopify, clique na aba Biblioteca. * Para selecionar uma imagem em seu computador local, clique em Biblioteca > Carregar. 3. Use as configurações para personalizar o tamanho e o posicionamento do logo. 4. Clique em salvar.

Adicionar uma barra de comunicados

Para exibir uma mensagem aos clientes, adicione uma barra de comunicados ao cabeçalho. O texto é personalizável e pode incluir informações de contato, eventos, promoções ou o slogan da loja. A mensagem pode ter até 55 caracteres.

  1. Clique em Cabeçalho.
  2. Na área da Barra de avisos, marque Exibir comunicado.
  3. Digite o texto do comunicado.
  4. Opcional: insira uma URL para adicionar um link ao comunicado.
  5. Para alterar a cor do plano de fundo da barra de avisos, clique na amostra de cor da barra e escolha uma cor.
  6. Para alterar a cor do texto do comunicado, clique na amostra de cor do texto e escolha uma cor.
  7. Clique em salvar.

Adicionar um menu

Adicione um menu ao cabeçalho para exibir todos os links e use essa função para destacar as páginas que os clientes acessam com mais frequência. Por exemplo, adicione um menu que contenha links para as coleções.

  1. Clique em Cabeçalho.

  2. Para selecionar um menu, clique em Alterar. Selecione um menu na lista ou clique em Criar menu para gerar um novo.

  3. Para editar o menu, clique em Editar menu.

  4. Clique em salvar.

Rodapé

O rodapé do tema é a seção que aparece na parte inferior de todas as páginas de sua loja. Adicione os seguintes recursos ao rodapé:

  • ícones de redes sociais
  • ícones de pagamento
  • um menu horizontal
  • uma assinatura da newsletter
  • texto personalizado
  • links rápidos

Adicionar ícones de redes sociais

É possível habilitar uma opção para exibir ícones de redes sociais no rodapé de uma loja virtual. Faça isso nas configurações de tema.

  1. Clique em Rodapé.
  2. Marque Exibir ícones de redes sociais.
  3. Clique em salvar.

Adicionar ícones de pagamento

No rodapé, é possível exibir ícones das formas de pagamento aceitas. Nessa área são exibidos os ícones associados ao provedor de pagamento habilitado na seção Configurações de pagamento do admin.

  1. Clique em Rodapé.

  2. Marque a opção Exibir ícones de pagamento.

  3. Clique em salvar.

Adicionar um menu horizontal

É possível adicionar um menu ao rodapé com links em uma barra horizontal. Use esse recurso para vincular as páginas que os clientes acessam com mais frequência. Por exemplo, adicionar um menu com links para seus contatos e as políticas de frete e devolução.

  1. Clique em Rodapé.
  2. Edite a configuração Menu Aviso legal. Para selecionar um menu, clique em Alterar. Selecione uma opção na lista ou clique em Criar menu para criar um novo.
  3. Para editar o menu, clique em Editar menu.
  4. Clique em salvar.

Adicionar um menu, uma assinatura da newsletter ou um texto

É possível adicionar até nove blocos de conteúdo ao rodapé.

  1. Clique em Rodapé.

  2. Adicione um bloco de conteúdo na área Conteúdo, clicando em Adicionar conteúdo. Selecione uma das seguintes opções de bloco de conteúdo:

- [Menu](/manual/online-store/os/menus-and-links)

- [Newsletter](/manual/online-store/os/using-themes/change-the-layout/theme-settings/theme-newsletter)

- Text

Para remover um bloco de conteúdo, clique no bloco e, depois, clique em Remover conteúdo.

Para personalizar um bloco de conteúdo, clique no bloco e edite as configurações.

  1. Clique em salvar.

Produto

Produto é a principal seção personalizável para páginas de produtos. Personalize essa seção usando as seguintes opções:

  • Habilitar o zoom da imagem: permita que os clientes aumentem o zoom passando o mouse sobre a imagem do produto.
  • Exibir seletor de quantidade - permita que os usuários especifiquem uma quantidade a adicionar ao carrinho.
  • Exibir uma mensagem de quantidade restante: mostre o número de produtos restantes quando o estoque estiver baixo. Essa mensagem aparece quando há nove ou menos variantes em estoque. Para exibi-la, é preciso habilitar o acompanhamento de estoque do produto.
  • Exibir uma mensagem de estoque a ser recebido quando um item estiver esgotado: mostre uma mensagem que indica quando um produto esgotado retornará ao estoque. O texto apresentado é "Em estoque a partir de [data]". Para exibir a mensagem, é preciso criar uma transferência do produto para registrar o estoque a ser recebido.
  • Exibir fabricante: mostre a marca ou o fabricante do produto. Adicione um fabricante ao produto para ver essas informações.
  • Exibir valor economizado: mostre o valor que o cliente está economizando. Esse número é a diferença entre o preço normal e a Comparação de preços do produto. Para exibir o valor economizado, você precisa definir uma comparação de preços do produto.
  • Exibir comparação de preços: mostre a Comparação de preços do produto.
  • Exibir produtos relacionados: mostre uma seleção de produtos relacionados na parte inferior da página. O produto relacionado precisa fazer parte de uma coleção para aparecer nessa seção. Caso contrário, não será exibido. Isso também ocorre quando o produto é o único item em uma coleção.
  • Exibir o botão de checkout dinâmico: deixe os clientes pularem o carrinho e irem direto para o checkout na seção de produto em destaque.
  • Habilitar o compartilhamento de produtos: mostre os botões que os clientes podem usar para compartilhar produtos nas redes sociais. As opções de compartilhamento exibidas são controladas nas configurações de tema.
  • Habilitar avaliações de produtos: adicione uma seção de avaliação de produtos à página. Para mostrá-la, instale o app gratuito da Shopify Product Reviews e receba as opiniões dos clientes.
  • Tamanho do botão e do seletor de variante: escolha uma opção nesse menu suspenso para definir o tamanho do seletor de variante, do botão Adicionar ao carrinho e do botão de checkout dinâmico.

Editar as configurações do produto

  1. Selecione Páginas de produtos.
  2. Clique na seção Produto.
  3. Personalize a seção de produtos nas configurações.
  4. Clique em salvar.

Coleção

Coleção é a principal seção personalizável para páginas de coleções.

A seção "Coleção" conta com as seguintes configurações:

  • Produtos por linha: defina o número de produtos a serem exibidos em cada linha da página de coleção.
  • Linhas por página (somente grade): defina o número de linhas de produtos a serem exibidas na página de coleção.
  • Filtros de produto na barra lateral: classifique as coleções por tags de produto ou por grupos de filtros na barra lateral.
  • Exibir comparação de preços: mostre a Comparação de preços do produto.
  • Exibir valor economizado: mostre o valor que o cliente está economizando. Esse número é a diferença entre o preço normal e a Comparação de preços do produto. Para exibir o valor economizado, você precisa definir uma comparação de preços do produto.
  • Habilitar avaliações de produtos: exiba selos de pontuação de avaliações na página. Para mostrá-los, instale o app gratuito da Shopify Product Reviews e receba as opiniões dos clientes.
  • Habilitar barra lateral: mostre uma barra lateral para que os clientes vejam os produtos com base no tipo de filtro selecionado.

Editar configurações de coleção

  1. Selecione Páginas de coleções.
  2. Clique na seção Coleção.
  3. Personalize a seção da coleção nas configurações.
  4. Clique em salvar.

Lista de coleções

É possível selecionar até seis coleções de produtos para exibir na página inicial na seção Lista de coleções.

Adicionar uma lista de coleções à sua página inicial

  1. Clique em Adicionar seção. 2. Clique em Lista de coleções e, depois, em Selecionar. 3. Para adicionar coleções à seção, personalize cada bloco Coleção: * Clique em um bloco de coleção e, depois, em Selecionar uma coleção. * Na lista suspensa Coleção, selecione uma coleção para exibir ou clique em Criar coleção para iniciar uma nova. * Clique em Selecionar. 4. Para adicionar outros blocos de coleção, clique em Adicionar coleção. 5. Clique em salvar.

Coleção em destaque

Você pode destacar uma coleção na sua página inicial. Destacar coleções pode ajudar você a promover vendas e novas coleções.

A seção "Coleção em destaque" apresenta as seguintes configurações:

  • Título: adicione um título à seção de coleção em destaque.
  • Coleção: escolha a coleção que aparecerá na seção.
  • Produtos por linha: defina o número de produtos a serem exibidos em cada linha da seção.
  • Linhas: defina o número de linhas de produtos a serem exibidas na seção.
  • Exibir valor economizado: mostre o valor que o cliente está economizando. Esse número é a diferença entre o preço normal e a Comparação de preços do produto. Para exibir o valor economizado, você precisa definir uma comparação de preços do produto.
  • Exibir comparação de preços: mostre a Comparação de preços do produto.

Adicionar uma coleção em destaque à sua página inicial

  1. Clique em Adicionar seção. 2. Clique em Coleção em destaque e, depois, em Selecionar. 3. Clique em Selecionar coleção, selecione uma coleção para exibir e, depois, clique em Selecionar. 4. Use as configurações para personalizar a seção da coleção em destaque. 5. Clique em salvar.

Apresentação de slides

É possível carregar imagens para usar em apresentações de slides na página inicial na seção Apresentação de slides.

É possível selecionar até seis imagens de slide para a página inicial. Adicione links para cada slide, de modo que os clientes possam clicar e abrir uma página de sua loja.

Cada imagem de slide deve ter 1000 pixels de largura e 500 pixels de altura. Se você usar imagens com alturas diferentes para os slides, elas poderão ser puladas ou aparecerem desajustadas entre as transições.

A seção de apresentação de slides apresenta as seguintes configurações:

Conteúdo

  • Imagem: adicione uma imagem para exibir na apresentação de slides.
  • URL do link: vincule o slide a outra parte de sua loja virtual.

Configurações

  • Rotação automática de slides: defina como automática a apresentação de slides.
  • Tempo da transição: escolha a frequência de troca dos slides.

Personalizar sua apresentação de slides

  1. Clique em Adicionar seção.
  2. Clique em Apresentação de slides e, depois, em Selecionar.
  3. Para adicionar imagens à apresentação de slides, clique em um bloco de Imagem para personalizá-lo:
    1. Clique em Selecionar imagem e siga um destes procedimentos: - Para selecionar uma imagem que você já enviou para o admin da Shopify, clique na aba Biblioteca.
  4. Para selecionar uma imagem do banco da Burst, clique na aba Imagens gratuitas. Lá é possível inserir um termo para pesquisa ou navegar por categorias de imagem.
  5. Para selecionar uma imagem no computador local, clique na aba Biblioteca e, depois, em Carregar.

    1. Para adicionar um link ao slide, siga um destes procedimentos: - Para vincular o texto no seu slide a uma página da loja, clique no campo URL do link e selecione uma página.
    2. Para vincular o texto do slide a um site, cole a URL do site no campo URL do link.
  6. Utilize as configurações para personalizar a apresentação de slides.

  7. Clique em salvar.

Newsletter

Você pode adicionar uma assinatura de newsletter à sua página inicial. Isso permite coletar endereços de e-mail de clientes para campanhas de e-mail marketing. Saiba mais sobre e-mail marketing no blog da Shopify.

Adicionar uma área para assinatura de newsletter à sua página inicial

  1. Clique em Adicionar seção.

  2. Clique em Newsletter e, depois, em Selecionar.

  3. Digite um título para a assinatura da newsletter.

  4. Insira um subtítulo para a assinatura da newsletter.

  5. Clique em salvar.

Mapa

Você pode adicionar um mapa do Google à sua página inicial para mostrar aos clientes onde sua empresa está localizada.

A seção de mapa apresenta as seguintes configurações:

  • Título: adicione um título à seção de mapa.
  • Endereço e horário: adicione o endereço e horário de funcionamento de sua loja à seção de mapa.
  • Endereço do mapa: defina a localização de sua loja para exibição no mapa.
  • Marcador de link do mapa: adicione um botão com link para a localização de sua loja no Google Maps.
  • Exibir marcador: adicione um marcador que exiba a localização específica de sua loja no mapa.
  • Chave da API do Google Maps: adicione a chave da API de seu mapa à seção de mapa.
  • Imagem: adicione uma imagem para exibição se o mapa não carregar.
  • Posição da imagem: defina o posicionamento da imagem.

Adicionar um mapa à sua página inicial

  1. Clique em Adicionar seção.
  2. Clique em Mapa e, depois, em Selecionar.
  3. Utilize as configurações para personalizar a seção de mapa.
  4. Clique em salvar.

Rich text

Utilize a seção Rich text para adicionar conteúdo escrito à página inicial ou para inserir páginas criadas no admin da Shopify. Por exemplo, é possível dar destaque a eventos futuros ao incorporar a página de seu blog ou exibir uma página com qualquer um dos recursos a seguir:

A seção de rich text apresenta as seguintes configurações:

  • Título - adicione um título à seção de rich text.
  • Texto: adicione e formate seu texto personalizado. Para dar destaque a uma página da loja, clique em Adicionar conteúdo e em Página. No menu suspenso, selecione uma página para destacar como sua página inicial.
  • Tamanho: defina o tamanho de seu texto.

Adicionar rich text à página inicial

  1. Clique em Adicionar seção.

  2. Clique em Rich text e em Selecionar.

  3. Utilize as configurações para personalizar a seção de rich text.

  4. Clique em salvar.

Vídeo

Você pode adicionar um vídeo do YouTube ou do Vimeo à sua página inicial. Os vídeos podem envolver seus clientes e gerar interesse em relação à sua empresa.

Para adicionar um vídeo, você precisa localizar o link de compartilhamento do vídeo:

  • YouTube: um link de compartilhamento do YouTube tem esta aparência: https://youtu.be/ZXWgHlnVVEY. Saiba como copiar o link de compartilhamento de um vídeo do YouTube neste artigo da Ajuda do YouTube.
  • Vimeo : um link de compartilhamento do Vimeo se parece com este exemplo: https://vimeo.com/123456789. Você pode obter informações sobre como copiar o link de compartilhamento de um vídeo do Vimeo neste artigo da Central de ajuda do Vimeo.

A seção de vídeo apresenta as seguintes configurações:

  • Título: adicione um título à seção de vídeo.
  • Link do vídeo: adicione o link de compartilhamento do vídeo.

Adicionar um vídeo à sua página inicial

  1. Clique em Adicionar seção.
  2. Clique em Vídeo e em Selecionar.
  3. Personalize a seção de vídeo nas configurações.
  4. Clique em salvar.

Conteúdo personalizado

A seção Conteúdo personalizado permite o agrupamento de vários blocos de conteúdo. A largura e o alinhamento de cada bloco podem ser ajustados para criar um layout personalizado.

Use HTML para formatar blocos de texto, criar tabelas ou incorporar conteúdo de outro site. É possível adicionar até nove blocos HTML personalizado em uma seção de conteúdo personalizado.

Cada bloco HTML personalizado apresenta as seguintes configurações:

  • HTML: adicione o código HTML que você deseja exibir em sua página inicial.
  • Largura do contêiner: defina a largura do bloco de HTML personalizado.
  • Alinhamento vertical: defina a posição vertical do conteúdo no bloco.

Adicionar conteúdo personalizado à página inicial

  1. Clique em Adicionar seção.

  2. Clique em Conteúdo personalizado e em Selecionar.

  3. Selecione e configure os blocos de conteúdo que você quer incluir na seção.

  4. Clique em salvar.

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

Experimente de graça