Dicas para o Brooklyn

Este artigo descreve algumas dicas úteis e práticas recomendadas que podem ajudar você a configurar Brooklyn para sua loja virtual.

Dicas de navegação

Adicione um menu suspenso

Para adicionar menus suspensos ao seu menu principal, você precisa criar menus na sua página Navegação. Para saber mais, consulte Configure menus suspensos em sua loja virtual.

O menu principal de uma loja virtual. O mouse está sobre o link

O menu principal se torna um menu lateral

Se o menu principal ocupa muito espaço, ele é convertido num menu da barra lateral que abre quando você clica num botão na seção do cabeçalho:

Menu na barra lateral do lado esquerdo de uma loja virtual. Os links do menu principal, como

Você pode impedir que o menu principal mude para o estilo de barra lateral seguindo estes passos:

  • Adicione no máximo quatro ou cinco links ao seu menu principal.
  • Use uma fonte estreita nos links do menu principal. Você pode alterar a fonte do Texto de destaque nas configurações de tipografia.
  • Crie itens de menu com um número limitado de caracteres. Por exemplo, você pode usar "FAQ" em vez de "Perguntas frequentes", ou "Contato" em vez de "Entre em contato".

Dicas de imagem

Melhores tipos de imagens de produtos para o Brooklyn

  • Como as imagens de alta resolução parecem refinadas e profissionais, as imagens do produto devem ter pelo menos 1024 x 1024 pixels. O melhor formato para as imagens do seu produto é o quadrado.

  • O ideal é que suas imagens tenham um plano de fundo de cor chapada. Uma cor chapada é uma cor sólida, sem sombreamento nem destaque. Todas as imagens devem ter a mesma cor de fundo.

  • Para remover o quadro em torno das imagens do produto, defina a cor do Plano de fundo do produto como transparente nas configurações de cor:

Duas listagens de produtos são exibidas com fundos brancos. O plano de fundo da loja virtual também é branco, e não há quadros ao redor das imagens de produto.

Melhor tamanho para as imagens da apresentação de slides

Ambos os slides de imagem exibidos na loja de demonstração do Brooklyn são de 1200 x 800 pixels. É uma boa ideia manter todos os seus slides de imagem com o mesmo tamanho.

Corte da imagem em telas pequenas

Em dispositivos pequenos, os slides de imagem preenchem completamente a tela, da borda superior até a borda inferior. Os slides são redimensionados de modo que a altura seja a mesma da tela de seu dispositivo. Para que atela seja preenchida em distorcer as imagens, os slides são cortados à esquerda e à direita.

Em telas grandes, os slides da imagem são redimensionados para que sua largura se ajuste à largura da janela do navegador. Para preencher a janela sem distorcer as imagens, os slides são cortados na parte inferior.

O exemplo a seguir mostra a versão para desktop e celular da mesma loja virtual:

A versão para desktop da apresentação de slides exibe uma imagem mais larga do que alta. A versão para celular mostra a mesma imagem na mesma altura, mas com cortes nas duas dimensões da imagem para que ela caiba na tela estreita.

Mostrar uma imagem de ponta a ponta em uma coleção

Para exibir uma imagem de ponta a ponta, sua coleção precisa ter uma imagem em destaque.

Você pode ver como é a aparência de uma imagem de coleção ponta a ponta na loja de demonstração do Brooklyn. A imagem da coleção exibida na parte superior é de 1405 x 800 pixels.

A versão para desktop da apresentação de slides exibe uma imagem mais larga do que alta.

A versão para celular mostra a mesma imagem na mesma altura, mas com cortes nas duas dimensões da imagem para caber na tela estreita.

Definir uma imagem para artigos de blog

A primeira imagem de um artigo do blog será usada como a imagem em destaque da página do blog. Você pode aprender como adicionar uma imagem a um artigo do blog em Escrever posts do blog.

Dicas de produtos

Adicionar selos de promoção aos produtos

Você pode adicionar um selo de promoção a um produto definindo uma comparação de preços maior que o preço normal. O selo é exibido sobre a imagem desse produto nas páginas da coleção.

Definir quais produtos aparecem maiores nas páginas das coleções

Se você definir que os produtos sejam exibidos nas páginas de coleções no estilo de colagem, alguns de seus produtos serão exibidos com imagens grandes e alguns com imagens pequenas. O tamanho da imagem se baseia na ordem dos produtos em sua coleção. Você pode alterar a ordem dos produtos na Página de coleções no admin. Clique na coleção que deseja editar e, na área Produtos, selecione Manualmente no menu suspenso Ordenar. Em seguida, arraste e solte os produtos na ordem em que você deseja que apareçam na sua loja virtual.

A página Coleções no admin da Shopify.

A cada seis produtos, o primeiro produto e o sexto produto têm imagens de produto grandes. Por exemplo, as imagens 1, 6, 7, 12, 13 e 18 da sua coleção serão maiores.

Uma página de coleção que mostra os produtos no estilo de colagem. Os números são exibidos sobre os produtos para ilustrar como a ordem dos produtos se relaciona com o tamanho da imagem.

Para exibir uma grade de imagens de produtos do mesmo tamanho, defina suas coleções para que exibam os produtos no estilo de grade.

Animação de rolagem ao selecionar uma variante

Na página do produto, se a descrição do produto for curta o suficiente para caber na tela sem rolagem, você verá uma animação de rolagem quando selecionar uma variante que tenha uma imagem. Se a descrição for longa demais para caber na tela sem rolar para baixo, a imagem superior será substituída pela imagem da variante e não haverá a animação de rolagem.

Se você quiser exibir a animação de rolagem, assegure-se de que as descrições dos produtos sejam curtas.

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

Experimente de graça