Seções do Boundless

O conteúdo do tema é criado com o uso de seções, blocos personalizáveis de conteúdo que determinam o layout e a aparência de diferentes páginas da loja virtual. Para adicionar, remover, editar e personalizar as seções, use o editor de temas atualizado.

Os temas da Shopify têm os seguintes tipos de seções:

  • Seções estáticas: seções que aparecem em locais predeterminados da loja virtual e não podem ser removidas ou reorganizadas. Elas podem incluir cabeçalhos, rodapés e seções de navegação ou de conteúdo em páginas como as de produto e de coleção. A seção Produto, por exemplo, determina a aparência de cada página de produto na loja virtual.
  • Seções dinâmicas: seções opcionais usadas para personalizar o layout da página inicial. Adicione até 25 seções dinâmicas diferentes, que podem ser reorganizadas e removidas na página inicial.

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

Seções estáticas

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

  • Menu lateral
  • Barra de avisos
  • Cabeçalho
  • Apresentação de slides
  • Barra de ações
  • Rodapé
  • Produto
  • Recomendações de produtos
  • Coleção
  • Página da lista de coleções
  • Artigo

Seções dinâmicas

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

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

O menu lateral funciona como um índice. Ele aparece em todas as páginas de sua loja.

O menu lateral exibe dois menus. O Menu primário aparece na parte superior, com uma fonte maior, e o Menu adicional é mostrado abaixo do Menu primário, com uma fonte menor.

Também é possível exibir links para suas contas em redes sociais na barra lateral. Defina esses links nas configurações de tema.

Personalizar o menu da barra lateral

  1. Clique em Menu lateral.

  2. Na lista do Menu primário, selecione o menu que deseja exibir como primário. Em geral, trata-se do menu principal da loja.

  3. Na lista Menu adicional, selecione o menu que você deseja exibir abaixo do menu primário. Em geral, trata-se do menu de rodapé da loja.

  4. Clique em Salvar.

Barra de avisos

É possível habilitar a barra de comunicados para mostrar uma mensagem aos clientes. O texto é totalmente personalizável e pode incluir informações de contato, um link, notícias sobre eventos ou promoções e o slogan ou a mensagem de marca de sua loja. A barra de comunicados pode aparecer em todas as páginas da loja, mas você tem a opção de exibi-la somente na página inicial.

Habilitar a barra de comunicados

  1. Clique em Barra de avisos.
  2. Marque Mostrar comunicado.

    Selecione Apenas na página inicial para exibir a mensagem do comunicado somente na página inicial.

  3. Digite o texto do comunicado.

  4. Opcional: insira um 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.

Cabeçalho

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

É possível adicionar outro logo que é mostrado somente na página inicial. O logo da página inicial é exibido sobre a apresentação de slides. Portanto, escolha uma versão que seja fácil de ver na parte superior de uma imagem.

Adicionar um logo personalizado

  1. Clique em Cabeçalho.
  2. Na área Logo, 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.
  3. 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.
  4. Para selecionar uma imagem no computador local, clique na aba Biblioteca e, depois, em Carregar.

  5. Opcional: na área Logo da página inicial, 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.

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

  7. Para selecionar uma imagem no computador local, clique na aba Biblioteca e, depois, em Carregar.

  8. No campo Largura do logo personalizado (em pixels), insira a largura do logo.

  9. Clique em Salvar.

Apresentação de slides

É possível adicionar uma apresentação de slides à página inicial com até cinco imagens.

É melhor usar imagens de alta resolução em seus slides. Use imagens com 3840 x 2160 px ou maiores, mas não exceda os limites de carregamento da Shopify.

Como o tamanho e a forma da apresentação de slides dependem do tamanho e da forma do dispositivo do cliente, as imagens da apresentação de slides serão cortadas em algumas telas. Tente usar imagens que tenham um ponto focal no meio para que a parte importante de cada imagem esteja sempre visível.

Para aprender mais sobre as práticas recomendadas para imagens de apresentações de slides em Carregar imagens.

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

  • Altura do slide: defina a altura da apresentação de slides. Selecione Adaptar à altura da imagem do primeiro slide para basear a altura da apresentação de slides na altura de sua primeira imagem.
  • Rotação automática de slides: defina como automática a apresentação de slides.
  • Alterar slides a cada: selecione a frequência de alteração dos slides.
  • Texto e ícones: selecione uma cor para o texto e os ícones exibidos na apresentação de slides.
  • Sobreposição: adicione uma camada de cor sobre seu slide de imagem. Com uma sobreposição, você pode facilitar a leitura do texto da apresentação de slides.
  • Opacidade: defina a opacidade da sobreposição.
  • Imagem: adicione um slide de imagem à sua apresentação de slides.
  • Posição da imagem: escolha a área mais importante da imagem para focar na apresentação de slides.
  • Cabeçalho: adicione um cabeçalho ao seu slide.
  • Texto do botão: adicione ao slide um botão com uma etiqueta de texto.
  • Link de botão: defina o URL ou a página que você quer vincular ao botão. Cole o URL ou selecione uma página no menu. Se você não quiser incluir um botão na seção, deixe esse campo em branco.

Personalizar sua apresentação de slides

  1. Clique em Apresentação de slides.

  2. Use as configurações para personalizar a apresentação de slides.

  3. Clique em Salvar.

Barra de ações

Como padrão, a barra de ações exibe o menu principal da loja. É possível personalizar os menus para que a barra de ações exiba diferentes itens de acordo com página em que o cliente se encontra. Na página inicial, a barra de ações é usada com frequência para exibir as coleções de produtos. Já em uma coleção, a barra de ações pode exibir subcategorias ou outras coleções relacionadas.

Por exemplo, se sua loja vende artigos de vestuário, a barra de ações na página inicial pode exibir Masculino, Feminino e Acessórios. Se o cliente clicar em Feminino, a barra de ações na página da coleção pode exibir Camisas, Calças e Calçados.

Para que a barra de ações funcione assim, coloque os links para suas coleções no menu principal. No menu de rodapé, coloque os links para as outras partes de sua loja (como as páginas Contato ou Sobre).

Personalizar a barra de ações

  1. Clique em Barra de ações.

  2. Na lista Menu, selecione o menu que você deseja exibir na barra de ações.

  3. Clique em Salvar.

Rodapé

O rodapé do tema é a seção que aparece na parte inferior de todas as páginas da loja. O rodapé do Boundless oferece a opção de exibir um menu e ícones das formas de pagamento aceitas.

Também é possível exibir links para suas contas nas redes sociais no rodapé. Use as configurações de tema para controlar esses links.

Adicionar um menu ao rodapé

Adicione um menu ao rodapé 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, é possível adicionar um menu com links para seus contatos e as políticas de frete.

  1. Clique em Rodapé.

  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.

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 Mostrar ícones de pagamento.

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

  • Ignorar a primeira imagem do produto: quando essa opção está habilitada, a primeira imagem do produto é exibida apenas nas páginas de coleção, e não nas páginas de produto. Ao usar essa opção, é possível criar um design para a primeira imagem do produto que atenda melhor às páginas de coleção e adaptar as outras imagens ao espaço maior disponível nas páginas de produto.
  • Estilo da imagem: escolha Alto/quadrado ou Grande.
  • Exibir fabricante: exibe a marca ou o fabricante na página do produto. Adicione um fabricante ao produto para usar essa configuração.
  • Mostrar seletor de quantidade - permita que os usuários especifiquem uma quantidade a adicionar ao carrinho.
  • Mostrar 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.
  • Largura do formulário do produto: escolha uma largura Pequena ou Grande.

Também é possível exibir as recomendações de produtos na página Produto.

Personalizar a seção de produtos

  1. Selecione Páginas de produtos.
  2. Clique na seção Produto.
  3. Use as configurações para personalizar a página do produto.
  4. Clique em Salvar.

Recomendações de produtos

Você pode Exibir produtos recomendados em páginas de produto para facilitar aos clientes a descoberta de outros produtos que possam interessá-los.

Habilitar recomendações de produtos

  1. Selecione Páginas de produtos.

  2. Clique na seção Recomendações de produto.

  3. Marque a opção Mostrar recomendações dinâmicas para mostrar recomendações nas páginas de produtos.

  4. Opcional: para alterar o título que aparece acima dos produtos recomendados, insira outro no campo Título.

    1. Opcional: para mostrar ou ocultar os fabricantes nas descrições do produto, use a caixa de seleção Mostrar fabricante.
  5. Clique em Salvar.

Coleção

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

  • Estilo de imagem: escolha entre as opções Alto/quadrado ou Grande.

    Alta/quadrada: é melhor se as imagens do produto forem quadradas ou estiverem na orientação retrato.

    Horizontal: é melhor se as imagens forem retangulares ou estiverem na orientação paisagem.

  • Tamanho da imagem: escolha o tamanho da imagem. Se você mostrar imagens de produtos pequenas, poderá colocar mais imagens em uma única linha. O número de imagens exibidas por linha também depende do tamanho da janela e do dispositivo do cliente.

  • Adicionar espaçamento entre as imagens: aumente o espaçamento em torno das imagens do produto.

  • Exibir fabricante do produto: mostra a marca ou o fabricante abaixo das imagens do produto. Adicione um fabricante ao produto para ver essas informações.

  • Exibir opções de classificação: selecione essa opção para permitir que os clientes classifiquem os produtos nas páginas de coleções.

  • Exibir a filtragem de tags: selecione essa opção para permitir que os clientes filtrem a coleção por tag de produto.

  • Tipo de paginação: escolha para mostrar páginas numeradas ou um botão Ver mais quando houver várias páginas de produtos na coleção.

Personalizar a seção de coleção

  1. Selecione Páginas de coleções.
  2. Clique na seção Coleção.
  3. Use as configurações para personalizar a página de coleção.
  4. 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:

  • Coleção: escolha a coleção que aparece na seção. Até 50 produtos serão exibidos na coleção selecionada.
  • Estilo de imagem: escolha entre as opções Alto/quadrado ou Grande.

    Alta/quadrada: é melhor se as imagens do produto forem quadradas ou estiverem na orientação retrato.

    Horizontal: é melhor se as imagens forem retangulares ou estiverem na orientação paisagem.

  • Tamanho da imagem: escolha o tamanho da imagem. Se você mostrar imagens de produtos pequenas, poderá colocar mais imagens em uma única linha. O número de imagens exibidas por linha também depende do tamanho da janela e do dispositivo do cliente.

  • Habilitar espaçamento entre imagens: aumente o espaçamento em torno das imagens do produto.

  • Exibir fabricante do produto: mostra a marca ou o fabricante abaixo das imagens do produto. Adicione um fabricante ao produto para ver essas informações.

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

  1. Clique em Adicionar seção.
  2. Clique em Coleções em destaque e em Selecionar.
  3. Clique em Selecionar coleção e escolha uma na lista Coleção. A coleção selecionada exibirá até 50 produtos.
  4. Use as configurações para personalizar a seção.
  5. 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.
  • Mostrar marcador: adicione um marcador que mostre 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. Use 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:

  • Exibição ampla: reduza as margens nos dois lados de seu texto.
  • 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. Use 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.

HTML personalizado

Na seção HTML personalizado, você pode usar o código HTML para criar conteúdo personalizado para sua página inicial. Por exemplo, você pode usar HTML para formatar blocos de texto, criar tabelas ou incorporar conteúdo de um site de terceiros.

Adicione uma seção de HTML personalizado à página inicial

  1. Clique em Adicionar seção.

  2. Clique em HTML personalizado e em Selecionar.

  3. Clique em HTML personalizado e insira o código HTML que você deseja adicionar à sua página inicial.

  4. Clique em Salvar.

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

Experimente de graça