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

Seções As seções são blocos personalizáveis de conteúdo que determinam o layout de sua loja virtual. Cada tema inclui seções estáticas e seções dinâmicas. ### Seções estáticas As seções estáticas estão sempre em locais específicos na sua loja virtual. Você pode editar seções estáticas, mas não pode reorganizá-las ou removê-las. Cada tipo de página na sua loja virtual inclui diferentes seções estáticas.

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, reorganizar e remover seçõ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

A maioria dos temas inclui uma seção de cabeçalho e uma seção de rodapé que são exibidas em todas as páginas da loja. Contudo, o Boundless é diferente, pois não apresenta uma seção de cabeçalho na página inicial. Em vez disso, a página inicial mostra um menu da barra lateral e uma barra de ação na parte superior da página. Para visualizar e editar a seção de cabeçalho, selecione qualquer tipo de página além da página inicial no menu suspenso da barra superior.

A seção de cabeçalho inclui a opção de enviar uma imagem de logotipo e definir uma largura de logotipo personalizada.

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

O Boundless usa uma apresentação de slides em tela cheia ou "herói", por isso é melhor usar imagens muito grandes. Por exemplo, use imagens de 3840 x 2160 px ou maiores, desde que você não exceda os limites de envio da Shopify. Com esse tema, é possível exibir até seis slides na apresentação da página inicial.

O Boundless apresenta diversos recursos para as apresentações de slides que não estão disponíveis em todos os temas. É possível carregar a imagem do logotipo ou o nome de sua loja no meio de uma imagem da apresentação de slides. Também é possível aplicar uma sobreposição de cores nas imagens da apresentação.

Para personalizar a apresentação de slides de sua loja:

  1. Clique na aba Seções.

  2. Clique em Apresentação de slides.

Para adicionar um slide de imagem:

  1. Na área Conteúdo , clique em Imagem.

  2. Para adicionar uma imagem aos slides, clique em Selecionar imagem e, em seguida, execute uma das ações a seguir:

- Para selecionar uma imagem que você já enviou para o admin da Shopify, clique na aba Biblioteca. - Para selecionar uma imagem da Coleção de imagens de acervo Burst da Shopify, clique na aba Imagens gratuitas. Lá é possível inserir um termo para pesquisa ou navegar por categorias de imagem. - Para selecionar uma imagem de seu computador local, clique na aba Biblioteca e, em seguida, no sinal de mais.

Para exibir o nome de sua loja nos slides de imagem:

  1. Na área Logotipo , clique na amostra de Cor de texto e selecione a cor do texto na paleta.

  2. Na lista Tipo de logotipo , selecione Texto com nome da loja. O nome de sua loja é automaticamente exibido.

Para exibir a logotipo de sua loja nos slides de imagem:

  1. Na lista Tipo de logotipo localizada na área Logotipo , selecione Logotipo personalizado.

  2. Na área Imagem do logotipo personalizado , 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. No campo Largura do logotipo (em pixels), digite a largura do logotipo.

Para aplicar uma sobreposição de cor nas imagens da apresentação de slides:

  1. Na área Sobreposição , clique na amostra de Cor para sobreposição das imagens e selecione uma cor na paleta.

  2. Na lista Opacidade , selecione um percentual de transparência para a sobreposição das imagens.

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

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.

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.

Etapas:

  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 escolher a tipografia para o texto em sua loja virtual.

Etapas:

  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.

Obs.: Para mostrar botões de compartilhamento social em páginas de produtos e postagens de blog, você também precisa ativar os botões nas seções dessas páginas.

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 inclusão nos 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

Ao configurar a navegação da loja, é importante lembrar que, ao criar um menu na barra de ação vinculado à página inicial, este menu também é 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.

Como prática recomendada, é aconselhável criar as coleções antes de gerar os links para elas na 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