Sugestões para o tema Brooklyn
Este artigo descreve algumas sugestões úteis e melhores práticas que podem ajudá-lo a configurar Brooklyn para a sua loja online.
Sugestões de navegação
Adicionar um menu pendente
Para adicionar menus pendentes ao seu menu principal, deverá criar menus na sua página de Navegação. Para saber mais, veja Configurar menus pendentes na sua loja online.
Transformar o menu principal num menu lateral
Se o seu menu principal ocupar demasiado espaço, este será convertido num menu lateral que é aberto quando clica num botão na secção de cabeçalho:
Poderá evitar que o seu menu principal se transforme num menu lateral através dos seguintes passos:
- Não adicione mais do que quatro ou cinco ligações ao seu menu principal.
- Utilize um tipo de letra estreito para as ligações do seu menu principal. Pode alterar o tipo de letra do Texto acentuado a partir das definições de tipografia.
- Crie itens do menu com um número limitado de caracteres. Por exemplo, poderá utilizar "FAQ" em vez de "Perguntas frequentes" ou "Contacto" em vez de "Contacte-nos".
Sugestões sobre imagens
Melhores tipos de imagens de produtos para o tema Brooklyn
Uma vez que imagens de alta resolução têm um aspeto cuidado e profissional, as suas imagens de produtos deverão possuir, pelo menos, 1024 x 1024 px. A melhor forma para as suas imagens de produtos é quadrada.
Idealmente, as suas imagens deverão possuir um fundo de cor uniforme. Uma cor uniforme é uma cor sólida sem sombras nem destaques. Todas as suas imagens devem possuir a mesma cor de fundo.
Para remover o quadro em redor das suas imagens de produtos, defina a cor do Fundo dos produtos para transparente, a partir das definições de cor:
Melhor tamanho para imagens em apresentação de diapositivos
Ambos os diapositivos de imagens apresentados na loja de demonstração Brooklyn possuem 1200 x 800 px. É aconselhável manter todos os diapositivos de imagens com o mesmo tamanho.
Recorte de imagens em ecrãs pequenos
Em dispositivos pequenos, os diapositivos de imagem preenchem o ecrã desde a extremidade superior até à extremidade inferior. Os diapositivos são redimensionados para que a sua altura corresponda à altura do ecrã do dispositivo. Para preencher o ecrã sem distorcer as imagens, os diapositivos são recortados à esquerda e à direita.
Em ecrãs grandes, os diapositivos de imagens são redimensionados para que a sua largura corresponda à largura da janela do navegador. Para preencher a janela sem distorcer as imagens, os diapositivos são recortados na parte inferior.
O seguinte exemplo mostra a versão para computador e para dispositivo móvel da mesma loja online:
Mostrar uma imagem de margem a margem para uma coleção
Para mostrar uma imagem de margem a margem, a sua coleção deverá possuir uma imagem em destaque.
Poderá ver o aspeto de uma imagem de coleção de margem a margem na loja de demonstração do tema Brooklyn. A imagem da coleção apresentada no topo possui 1405x800 px.
Definir uma imagem para publicações no blogue
A primeira imagem num artigo do blogue é utilizada como a imagem em destaque para a página do blogue. Pode aprender como adicionar uma imagem a um artigo do blogue em Escrever publicações no blogue.
Sugestões de produtos
Adicionar selos de vendas a produtos
Pode adicionar um selo de venda a um produto definindo um valor de comparar ao preço maior do que o preço normal. O selo é apresentado sobre a imagem para esse produto nas páginas de coleções.
Definir os produtos que surgem maiores nas páginas de coleções
Se definir as suas páginas de coleções para mostrar produtos num estilo de colagem, alguns dos seus produtos serão apresentados com imagens grandes e outros com imagens pequenas. O tamanho da imagem baseia-se na ordem dos produtos na respetiva coleção. Pode alterar a ordem dos produtos na página Coleção no admin. Clique na coleção que pretende editar e, de seguida, na área Produtos, selecione Manualmente a partir do menu pendente Ordenar. De seguida, arraste e largue os produtos pela ordem em que pretende que apareçam na sua loja online.
Para cada seis produtos, o primeiro produto e o sexto produto apresentam imagens de produto grandes. Por exemplo, a 1.ª, 6.ª, 7.ª, 12.ª, 13.ª e 18.ª imagens da coleção apresentam imagens grandes:
Para mostrar uma grelha de imagens de produto, todas do mesmo tamanho, defina as suas coleções para mostrar produtos no estilo grelha.
Animação de deslocamento ao selecionar uma variante
Na página do produto, se a descrição do produto for suficientemente curta para caber no ecrã sem deslocamento, verá uma animação de deslocamento quando seleciona uma variante que inclua uma imagem. Se a descrição for demasiado longa para caber no ecrã sem deslocar para baixo, a imagem superior é simplesmente substituída pela imagem da variante, sem qualquer animação de deslocamento.
Se pretender apresentar a animação de deslocamento, certifique-se de que as suas descrições do produto são curtas.