Boundless

Boundless é um tema que dá prioridade à fotografia, com uma UI mínima que apresenta fotografia de ponta a ponta. É orientado a dispositivos móveis e adequado para lojas com estoques de médios a grandes.

Exemplo de loja virtual usando o Boundless

Editor de temas

Use o editor de temas para personalizar seu tema. A barra de ferramentas do editor de temas se divide em Seções e Configurações do tema.

A barra de ferramentas do editor de temas mostrando Seções e Configurações do tema

Você pode usar seções para modificar o conteúdo e o layout das diferentes páginas da sua loja. Você pode usar as configurações de tema para personalizar as fontes e cores da sua loja e fazer alterações nos seus links de mídia social e configurações de checkout.

As seções são blocos personalizáveis que determinam o layout de diferentes páginas da sua loja virtual.

  • As seções de início apresentam recursos que você pode adicionar, reorganizar ou remover, como apresentação de slides ou área para assinatura de newsletter. Você pode ter até 25 seções em sua página inicial.

  • Cada tipo de página tem suas próprias seções. Por exemplo, a seção de página de produto estabelece o layout de cada página de produto de sua loja virtual.

  • As seções da página estão sempre em locais específicos da sua loja virtual. Você pode personalizá-las, mas não pode reorganizá-las nem removê-las.

  • Cada tema apresenta seções fixas que são exibidas em todas as páginas de sua loja virtual, como o cabeçalho e o rodapé.

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

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

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

Seções dinâmicas

Você pode adicionar, reorganizare removerseções dinâmicas para personalizar o layout da sua página inicial. Cada tema tem um conjunto exclusivo de seções dinâmicas para escolher.

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

Cabeçalho

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

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

  • Logotipo - adicione uma imagem de logotipo ao seu cabeçalho.
  • Logotipo da página inicial - adicione um logotipo para exibição apenas na página inicial. O logotipo da página inicial é exibido sobre a apresentação de slides. Portanto, escolha uma versão de seu logotipo que seja fácil de visualizar quando colocada sobre uma imagem.
  • Largura do logotipo personalizado (em pixels) - defina o tamanho de seu logotipo.

Personalizar seu cabeçalho

  1. Encontre Boundless e clique em Personalizar.

  2. Clique em Cabeçalho.

  3. Utilize as configurações para personalizar o cabeçalho.

  4. Clique em Salvar.

O menu lateral funciona como um índice da sua loja. Onde quer que seu cliente esteja, o botão de menu exibirá os menus principal e do rodapé da sua loja:

O menu lateral exibe dois menus: o Menu primário é exibido na parte superior, com uma fonte maior, já o Menu secundário é exibido abaixo do Menu primário, com uma fonte menor.

Para personalizar o menu lateral:

  1. Clique em Seções.

  2. Clique em Menu lateral.

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

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

  5. Clique em Salvar.

Apresentação de slides

Você pode criar uma apresentação de slides da página inicial que rode até seis 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 Enviar 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 ícones exibidos sobre a 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 do botão - Vincule o botão a outra parte da sua loja virtual.

Adicione uma apresentação de slides à sua página inicial

  1. Encontre Boundless e clique em Personalizar.

  2. Clique em Apresentação de slides.

  3. Utilize as configurações para personalizar a apresentação de slides.

  4. Clique em Salvar.

Barra de ações

Como padrão, a barra de ações exibe o menu principal da loja. É possível personalizar a barra de ações para que ela 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 do rodapé, coloque os links para as outras partes de sua loja (como as páginas Contato ou Sobre).

Para personalizar a barra de ações:

  1. Clique na aba Seções.

  2. Clique em Barra de ações.

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

  4. Clique em Salvar.

Rodapé

No Boundless, é possível exibir um menu no conteúdo do rodapé.

Para personalizar o rodapé da loja:

  1. Clique na aba Seções.

  2. Clique em Rodapé.

  3. Na lista Menu, selecione o menu que deseja exibir no rodapé.

  4. Clique em Salvar.

Produto

Na seção Produto, você pode adicionar ou remover os seguintes elementos:

  • A marca ou fornecedor do produto
  • Um seletor de quantidade
  • Ícones de compartilhamento social
  • Um botão de checkout dinâmico
  • Recomendações de produtos

Também é possível pular a primeira imagem do produto, definir o estilo de suas imagens e escolher a largura da ficha do produto.

Para editar as configurações das páginas de produtos:

  1. No menu suspenso da barra superior, selecione Páginas de produto.

  2. Clique em Seções.

  3. Clique em Produto.

  4. Para pular a primeira imagem do produto, marque Pular primeira imagem do produto.

    Isso significa que a primeira imagem do produto só será exibida nas páginas de coleções, e não na página do 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ções, bem como adequar as outras imagens ao espaço maior disponível na página do produto.

    Exemplo de uma página de coleção com a primeira imagem do produto e uma página do produto com as segunda e terceira imagens do produto

  5. Para definir seu estilo de imagem, selecione Vertical/Quadrada ou Horizontal no menu suspenso Estilo de imagem.

  6. Para mostrar a marca ou o fornecedor do produto, marque Exibir fornecedor. Para exibir uma marca ou fornecedor, é preciso adicionar um fornecedor ao produto.

  7. Para mostrar um seletor de quantidade, marque Exibir seletor de quantidade.

  8. Para mostrar ícones de compartilhamento social, marque Ativar compartilhamento de produto.

  9. Para mostrar um botão de checkout dinâmico, marque Mostrar botão de checkout dinâmico.

  10. Para definir a largura da ficha do produto, selecione Pequena ou Grande no menu suspenso Largura da ficha do produto.

  11. Clique em Salvar.

Adicionar ou remover 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.

  1. No menu suspenso da barra superior, selecione Páginas de produto.

  2. Clique em Recomendações de produto.

  3. Use a caixa de seleção Mostrar recomendações dinâmicas para mostrar ou ocultar recomendações de produtos em suas páginas de produtos.

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

  5. Opcional: para mostrar ou ocultar os fornecedores nas descrições do produto, use a caixa de seleção Mostrar fornecedor.

  6. Clique em Salvar.

Coleção

O Boundless apresenta várias opções de classificação, filtro e paginação para as páginas de suas coleções.

  1. Na pré-visualização do tema, abra a página de uma coleção.

  2. Clique na aba Seções.

  3. Clique em Coleção.

  4. Na área Aparência, defina as opções a seguir:

- Na lista Estilo da imagem, selecione a orientação a orientação das imagens do produto, Vertical/Quadrada ou Horizontal.

  • Na lista Tamanho da imagem, selecione o tamanho das imagens do produto.

  • Para aumentar o espaçamento entre as imagens, clique em Adicionar espaçamento entre as imagens.

  • Para exibir o nome do fornecedor ou da marca abaixo das imagens do produto, marque Exibir fornecedor do produto.

  1. Na área Classificações e filtros, defina as seguintes opções:
  • Para exibir uma lista com opções de classificação, marque Exibir opções de classificação.

  • Para exibir uma lista para que os clientes possam filtrar por tag, clique em Exibir filtros por tag.

  1. Na lista Tipo de paginação, localizada na área de Paginação, escolha se você deseja exibir o número de páginas ou o botão "Ver mais".

  2. Clique em Salvar.

Coleção em destaque

Na seção Coleção em destaque do editor de temas, a opção Estilo da imagem permite alterar a exibição de imagens nas páginas de coleção e produto:

  • Alta/quadrada é melhor se as imagens do produto forem quadradas ou na orientação retrato
  • Horizontal é melhor se suas imagens são retangulares ou na orientação paisagem

A opção Tamanho da imagem determina o tamanho das imagens de produtos na página de coleção. Se você mostrar imagens de produtos pequenas, poderá ajustar mais imagens em uma única linha.

O número de imagens exibidas por fileira também depende do tamanho da janela e do dispositivo (desktop ou celular) do cliente.

  1. Clique na aba Seções.

  2. Clique na seção Coleção em destaque.

  3. Na lista Coleção, selecione uma coleção. A coleção selecionada exibirá até 50 produtos.

  4. Na lista Estilo da imagem, selecione entre as opções de imagem Vertical/Quadrada ou Horizontal.

  5. Na lista Tamanho da imagem, escolha um tamanho de imagem.

  6. Para aumentar o espaço ao redor das imagens de produtos, selecione Adicionar espaçamento de imagem.

  7. Para exibir o nome da marca ou do fornecedor do produto, marque Exibir fornecedor do produto.

  8. 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 marketing por e-mail. Saiba mais sobre marketing por e-mail no blog da Shopify.

A seção de newsletter em um site. Há um campo para os clientes inserirem um endereço de e-mail e um botão que diz

Para adicionar uma assinatura de newsletter à sua página inicial:

  1. Encontre Boundless e clique em Personalizar.

  2. Clique em Seções.

  3. Clique em Adicionar seção > Newsletter.

  4. Insira um título para a assinatura de newsletter no campo Título. O título padrão é "Assine nossa newsletter".

  5. Insira um subtítulo para a assinatura de newsletter no campo Subtítulo.

  6. 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 sobre o assunto ou exibir uma página com qualquer um dos recursos a seguir:

  1. Clique na aba Seções.

  2. Clique em Rich text.

  3. Digite e formate seu texto.

  4. Para dar destaque a uma página da loja, clique em Adicionar conteúdo e, em seguida, em Página. No menu suspenso, selecione uma página para destacar como sua página inicial.

  5. Clique em Salvar.

Vídeo

Você pode adicionar um vídeo hospedado no YouTube ou no Vimeo à sua página inicial. Os vídeos podem envolver seus clientes e gerar interesse em seus negócios.

Para adicionar um vídeo à sua página inicial:

  1. Encontre Boundless e clique em Personalizar.

  2. Clique em Seções.

  3. Clique em Adicionar seção > Vídeo.

  4. Insira um título para o vídeo no campo Título.

  5. Insira o link de compartilhamento para o vídeo no campo Link para o vídeo.

    Os links de compartilhamento do YouTube são como este: https://youtu.be/OTJXAUZY9t0. Você pode obter informações sobre como copiar o link de compartilhamento para um vídeo do YouTube neste artigo da Ajuda do YouTube.

    Os links de compartilhamento do Vimeo são como este: https://vimeo.com/281332510. Você pode obter informações sobre como copiar o link de compartilhamento para um vídeo do Vimeo neste artigo do Centro de Ajuda do Vimeo.

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

Para adicionar HTML personalizado à sua página inicial:

  1. Encontre Boundless e clique em Personalizar.

  2. Clique em Seções.

  3. Clique em Adicionar seção.

  4. Na área Layout avançado, clique em HTML personalizado > Adicionar.

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

  6. Clique em Salvar.

O Boundless inclui as seguintes configurações de tema:

  • Cores
  • Tipografia
  • Carrinho
  • Redes sociais
  • Favicon
  • Checkout

Cores

Você pode escolher as cores para as diferentes partes de sua loja virtual.

Personalizar suas configurações de cor

  1. Ao lado de **, clique em **Personalizar.

  2. Clique em Configurações do tema.

  3. Clique em Cores.

  4. Para cada tipo de conteúdo, clique na amostra de cor para usar o seletor de cores:

    O seletor de cores no editor de temas

- A área Selecionadas recentemente mostra as cores que você selecionou recentemente para o seu tema. - A área Em uso mostra as cores que você está usando no momento em outras partes do seu tema.

Para definir a cor como transparente, clique em Nenhum.

  1. Clique em Salvar.

Tipografia

Você pode definir o estilo e o tamanho da fonte para os textos de sua loja virtual.

Personalizar suas configurações de tipografia

  1. Ao lado de **, clique em **Personalizar.

  2. Clique em Configurações do tema.

  3. Clique em Tipografia.

  4. Para cada tipo de texto, clique em Alterar para usar o seletor de fontes:

    O botão 'Alterar' no seletor de fontes

  5. Explore as fontes usando o campo de pesquisa ou clicando em Carregar mais.

    Para ver todas as fontes disponíveis, consulte a biblioteca de fontes da Shopify.

  6. Clique no nome da fonte que você deseja usar.

  7. Para alterar a fonte para um estilo diferente, como negrito ou itálico, clique em Regular. Em seguida, clique no estilo que você deseja usar e, em seguida, clique em Selecionar:

    Uma seleção de pesos de fonte disponíveis no seletor de fontes

  8. Clique em Salvar.

Carrinho

O Boundless permite a personalização da página do carrinho de compras ao selecionar o tipo de carrinho e habilitar as observações sobre o pedido para clientes.

O tema é compatível com dois tipos de carrinho:

  • O tipo Página redireciona o cliente para a página do carrinho de compras quando um item é adicionado ao carrinho.

  • O tipo Gaveta abre uma gaveta de navegação na parte lateral da página quando itens são adicionados ao carrinho e sinaliza para que o cliente prossiga até a página de checkout.

O Boundless também apresenta uma opção que permite aos clientes enviar instruções especiais para você nos pedidos.

Para definir as opções do carrinho no tema "Brooklyn":

  1. Clique em Configurações do tema.

  2. Clique em Página do carrinho.

  3. Selecione um tipo de carrinho de compras na lista Tipo de carrinho.

  4. Se você deseja permitir que, durante o checkout, os clientes insiram observações sobre o pedido, marque Habilitar observações sobre o pedido.

  5. Clique em Salvar.

Redes sociais

Você pode adicionar botões de compartilhamento social para seus produtos e postagens de blog e links para suas contas de mídia social.

Para personalizar as configurações de mídia social:

  1. Encontre Boundless e clique em Personalizar.

  2. Clique em Configurações do tema.

  3. Clique em Redes sociais.

  4. Para enviar uma imagem de compartilhamento social, na área de imagem de compartilhamento social, clique em Selecionar imagem ou Explorar imagens gratuitas.

  5. Para adicionar links às suas contas de mídia social, na área Contas, insira os links para suas contas nos campos fornecidos. Insira os links completos, como https://instagram.com/shopify ou https://twitter.com/shopify.

    Os links para suas contas de mídias sociais são exibidos no rodapé de sua loja virtual.

  6. Para adicionar botões de compartilhamento social aos seus produtos e postagens de blog, na área Opções de compartilhamento, marque uma ou todas as caixas de seleção.

    Você pode adicionar os seguintes botões de compartilhamento:

- Compartilhar no Facebook - Tweetar - Fixar no Pinterest (não disponível para postagem no blog)

  1. Clique em Salvar.

Favicon

É possível carregar um ícone de favoritos, ou "favicon", ampliando a visibilidade da sua marca ao exibir o logotipo da loja virtual 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 loja virtual após adição aos favoritos.

Para carregar um favicon:

  1. Clique na aba Configurações do tema.

  2. Clique em Favicon.

  3. Na área Imagem do favicon, clique em Selecionar imagem e execute uma das seguintes ações:

- Para selecionar uma imagem que você já enviou para o admin da Shopify, clique na aba Biblioteca. - Para selecionar uma imagem de seu computador local, clique na aba Biblioteca e, em seguida, no sinal de mais.

  1. Clique em Salvar.

Checkout

Esta seção permite que você personalize o checkout de sua loja. Clique aqui para obter mais informações sobre a página de checkout da loja.

Configuração de submenus na barra de ações

Se você criar um menu na barra de ações vinculado à página inicial, esse menu também será exibido na página inicial. Isso pode ocorrer ao configurar menus para coleções que ainda não existem, gerando um link marcador de posição na página inicial.

Crie suas coleções antes de criar os links da coleção da barra de ações. Como outra opção, gere um link para a página Todos os produtos até você criar a coleção que deseja vincular.

Pronto(a) para começar a vender com a Shopify?

Experimente de graça