Os visitantes da página da sua loja encontram todas as imagens em destaque do produto dispostas em grade. A página da loja mostra até 200 produtos. Se houver mais de 200 produtos, os clientes podem clicar em Avançar para ver mais produtos.

Para editar o estilo da seção da página da loja:

1. Abra a página da loja que você deseja editar.
2. Clique em Editar.
3. Clique em Editar seção na seção da loja. Você pode personalizar os detalhes abaixo. As alterações afetam somente essa seção da loja.

Na aba Elementos, você pode personalizar:

• Título da loja: exiba o título da página no topo da seção.
• Trilha de navegação: exiba o caminho de navegação que os visitantes percorreram antes de chegar à página atual, excluindo produtos relacionados e páginas de categorias filtradas.
• Rótulo de categorias: exiba o rótulo "Categorias" no menu de categorias.
• Rótulo de filtros: exiba o rótulo "Filtros" no menu de filtros.
• Filtros: adicione filtros para ajudar os clientes a navegar pelos seus produtos por tag.
• Descrição do produto: mostre ou oculte a descrição do produto quando estiver usando o layout de lista.
• Preço: mostre ou oculte o preço na miniatura do produto.
• Botão de adicionar ao carrinho: exiba abaixo das miniaturas dos produtos na página da loja e nas páginas de detalhes do produto.

Na guia Design, você pode personalizar:

• Layout: exiba miniaturas dos produtos em uma grade ou lista. No layout de lista, mostre uma prévia da descrição dos seus produtos.
• Alinhamento do título: defina o alinhamento do texto do título da sua loja.
• Posicionamento do menu: exiba a navegação por categorias no topo da seção ou como uma barra lateral.
• Estilo das categorias: estilize o menu de categorias como menu suspenso, subnavegação ou botões.
• Número de colunas no layout de grade (mínimo duas)
• Espaçamento entre colunas e linhas
• Plano de fundo: mostre ou oculte um plano de fundo para envolver a miniatura do produto, semelhante a um tapete de imagens. Defina a cor do plano de fundo, curve os cantos e escolha o tipo, a cor e a espessura do traço.
• Ajuste do estilo e alinhamento do botão
• Proporção da imagem e espaçamento do texto
• Cantos: o plano de fundo da miniatura e as imagens do produto podem ter cantos quadrados ou curvos.
• Largura da seção e espaçamento vertical.
• Divisor: mostre um divisor entre a seção da sua loja e as outras seções da página. Escolha a forma, o tipo de traço, a cor e a espessura do divisor.

Na guia Cores:

• Selecione um tema de seção para a seção da loja.
• Clique no ícone de lápis em um tema para personalizá-lo. As alterações afetam todas as seções que usam o tema.

Filtros da página da loja

Crie filtros de produtos para ajudar seus clientes a encontrar os produtos e serviços desejados. Os filtros dependem das tags de produto para exibir uma seleção de produtos na página da loja.

Você pode adicionar filtros a páginas da loja com 200 produtos ou menos. O botão de filtro segue os estilos de botão principais.

As opções de estilo disponíveis dependem da família de templates do seu site e do tipo de página da loja.

Nota: Galapagos e Supply seguem ajustes diferentes no estilo. Consulte no guia do seu template as informações sobre como estilizar os produtos.

Para estilizar as páginas da loja:

1. Abra a página da loja que você deseja editar.
2. Voltar ao painel Site.
3. Clique em Design.
4. Clique em Estilos do Site.
5. Use os ajustes em Produtos para alterar o estilo da página de destino.
6. Para ajustes específicos para páginas de detalhes do produto individuais, saia dos estilos do site, abra um produto e insira novamente os estilos do site.

Dica:

• Na pré-visualização, clique em qualquer parte da página para exibir apenas os ajustes de estilo disponíveis para essa parte e ocultar os outros.
• Se você tiver várias Páginas de Loja, as alterações de estilo se aplicarão a todo o site a todas as Páginas da Loja para criar uma aparência consistente.
• Seu template pode ter recursos, como imagem do banner ou cabeçalhos das páginas, que afetam o visual da página da loja.

Layout da página da loja

Os visitantes da loja encontram todas as imagens em destaque do produto dispostas em grade. Você pode estilizar a grade com esses ajustes na seção de estilos do site "Produto: Layout" (Páginas da loja do plano Avançado), ou na seção de estilos do site Produtos (Páginas da loja do plano Clássico), conforme aplicável.

Descrição do estilo

• Alterar o número de itens por linha
  • Plano Avançado: itens por linha
  • Clássico: produtos por linha
• Altere o espaço entre cada item na linha
  • Plano Avançado: espaçamento entre itens
• Altere a forma da imagem. Cortar imagens para caber
  • Plano Avançado: espaçamento entre itens
• Defina a forma do contêiner de imagem
  • Clássico: tamanho do item de produto
• Escolha se a imagem é recortada para preencher o contêiner de imagem
  • Clássico: recorte automático da imagem do produto
• Alterar a cor que é exibida atrás de imagens que não são cortadas para o tamanho do contêiner
  • Clássico: cor de fundo do produto

Informações do produto da página da loja

Para mostrar ajustes móveis para páginas da loja avançadas, selecione Posição: sobreposição. Você pode estilizar as informações do produto com esses ajustes na seção de estilos do site Produto: Detalhes (páginas da loja do plano Avançado) ou na seção de estilos do site Produtos (páginas da loja do plano Clássico), conforme aplicável.

Descrição do estilo

• Defina o título e o preço a serem exibidos abaixo da imagem ou ao mover o cursor
  • Plano Avançado: posição: embaixo, sobreposição
  • Clássico: títulos da lista de produtos: embaixo, sobreposição
• Alinhe o texto quando a opção títulos da lista de produtos: embaixo estiver ativada
  • Clássico: alinhamento da lista de produtos: centro, esquerda
• Defina a cor da sobreposição ao passar o cursor quando a opção Títulos da lista de produtos: sobreposição estiver selecionada. Ajuste o controle deslizante para definir a transparência
  • Clássico: cor de sobreposição do produto
• Escolha onde o texto é exibido nos navegadores móveis
  • Plano Avançado: posição (móvel): embaixo, sobreposição
• Escolha como o texto se alinha
  • Plano Avançado: alinhamento
• Defina a cor da sobreposição ao passar o cursor quando a opção Posição: sobreposição estiver selecionada. Mova o controle deslizante para definir a transparência
  • Plano Avançado: sobreposição de cor
• Altere ainda mais o alinhamento do texto quando definido para exibir ao mover o cursor
  • Plano Avançado: preenchimento da sobreposição
• Altere o espaçamento abaixo de cada linha
  • Plano Avançado: espaçamento
• Desmarque para ocultar os títulos dos itens
  • Plano Avançado: mostre o título
• Defina a fonte do título
  • Plano Avançado: fonte do título
• Defina o Cor do título Cor
  • Plano Avançado: cor do título
• Defina a cor do título no celular
  • Plano Avançado: cor do título (versão móvel)
• Defina o espaço entre o texto e a imagem quando definido como Posição: Abaixo
  • Plano Avançado: espaçamento do título
• Desmarque para ocultar preços
  • Plano Avançado: mostre o preço
  • Clássico: mostre o preço do produto
• Defina a fonte do preço
  • Plano Avançado: fonte do preço
• Defina a cor do preço no computador
  • Plano Avançado: cor do preço
• Defina a cor do preço no celular
  • Plano Avançado: cor do preço (versão móvel)
• Defina a cor do preço de venda no computador
  • Plano Avançado: cor do preço em promoção
• Defina a cor do preço de venda no celular
  • Plano Avançado: cor do preço em promoção (versão móvel)
• Defina o espaço entre o preço e o título
  • Plano Avançado: espaçamento de preços

Todas as alterações afetam todas as páginas de detalhes do produto na mesma página da loja. Para estilizar a página de detalhes do produto:

1. Abra a página de detalhes do produto que você deseja editar.
2. Clique em Editar e, em seguida, clique em Editar seção.

Na guia Formato, escolha entre as seguintes opções de layout:

• Simples: a imagem e a descrição do produto são exibidas lado a lado, rodeadas por espaços em branco.
• Wrap: as imagens do produto envolvem a descrição. As imagens são sempre alinhadas à esquerda.
• Metade — a imagem do produto divide a página com a descrição. A imagem está sempre alinhada à esquerda.
• Total: as imagens do produto são exibidas em um carrossel sem margens acima da descrição.

Se você selecionar o layout Simples, poderá personalizar estas opções:

• Largura do conteúdo.
• Design da imagem e espaçamento: escolha entre os designs slideshow, empilhado ou carrossel quando o seu produto tiver várias imagens. Se o design for slideshow, as miniaturas das outras imagens do produto serão exibidas.
• Exibição das variantes.
• Alinhamento do texto.
• Alinhamento de conteúdo: escolha entre topo ou centro. O alinhamento no topo talvez deixe um espaço entre o topo da imagem do produto e o texto. O alinhamento de conteúdo está disponível nos designs slideshow e carrossel, mas não no empilhado.
• Largura do formulário.
• Estilo da navegação do produto.
• Posição da descrição: onde a descrição do produto é exibida.
• Botão de adicionar ao carrinho: a opção Inline coloca o botão ao lado do campo quantidade.
• Proporção da imagem da galeria (somente design de slideshow e carrossel): no design em carrossel, a proporção da imagem define as proporções do contêiner da imagem, mas a imagem talvez não seja cortada para preencher. Recomendamos adicionar imagens com a mesma proporção da imagem que você escolheu nas suas configurações.
• Disposição e largura da galeria.
• Posicionamento da miniatura da galeria: posiciona as imagens apresentadas do produto quando o design é em slideshow.
• Tamanho da seta do carrossel (somente nos designs slideshow e carrossel).
• Ação do clique: escolha entre nenhuma, zoom ou lightbox, dependendo do design.
• Ação de passar o cursor.

Na guia Cores:

• Selecione um tema de seção para a seção da loja.
• Clique no ícone de lápis em um tema para personalizar. Lembre-se de que isso afeta todas as seções que usam o tema.

Personalizar a exibição das variantes do produto

No layout simples, você pode exibir as variantes como botões ou em um menu suspenso. Todos os outros layouts mostram as variantes em um menu suspenso.

• Botões variantes: seguem os estilos de formulário do seu site. Abra Estilos do site e clique em > ao lado de Formulários. Clique em Opções de seleção e, em seguida, clique em Botão de opção (Rádio).
• Menu suspenso de variantes: segue a família de fontes dos Campos de variantes, e a cor depende do tema de cores da seção.

Nota: a opção de se cadastrar em uma lista de espera de produtos só aparece quando as variantes aparecem nos menus suspensos.

Estilizar os botões Adicionar ao carrinho e finalização de compra na página da loja

O botão Adicionar ao carrinho pode ficar abaixo das miniaturas dos produtos na página da loja e na página de detalhes de cada produto.

Para preservar o visual das páginas de detalhes do produto, os ajustes horizontais no espaçamento não afetam os botões Adicionar ao carrinho. Quando um produto está esgotado, o botão Adicionar ao carrinho aparece esmaecido.

Nas páginas da loja, as cores dos botões seguem o texto e as cores de fundo do produto. O botão Adicionar ao carrinho nas páginas de detalhes do produto e o botão Finalizar compra na página do carrinho de compras seguem os ajustes no estilo do botão principal e as configurações de cores do seu site.

Gerencie as cores do minicarrinho

O minicarrinho usa os esquemas de cores da sua seção para garantir que esteja visível. A cor do minicarrinho contrasta automaticamente com o plano de fundo da seção. Para alterar a cor do minicarrinho, mude a cor de fundo da seção ou edite os esquemas de cores do seu site.

Posso ocultar o botão Adicionar ao carrinho na página da minha loja?

Você não pode ocultar o botão Adicionar ao carrinho sem usar um código personalizado. Esse tópico surgiu no Squarespace Forum, mas está fora do nosso escopo de suporte.

Para anunciar seus produtos sem oferecer a opção de compra, você pode apresentá-los no seu site em uma página de layout com blocos de imagem e de texto.

Quando o campo de quantidade aparece na página da loja?

O campo quantidade será exibido na página de detalhes do produto se:

• O nível de estoque do produto for maior que um.
• Houver variantes, independentemente dos níveis de estoque das variantes individuais.

Para exibir o nível atual de estoque de cada variante na página de detalhes do produto, ative as etiquetas de disponibilidade limitada. Isso evitará que os clientes tentem adicionar mais de um produto ao carrinho quando o nível do estoque for um.

Não é possível alterar o tamanho do campo de quantidade. Você pode ocultar o campo de quantidade para produtos físicos e de serviço nas configurações de finalização de compra.

Personalize produtos relacionados

A seção de produtos relacionados nas páginas de detalhes do produto segue os ajustes nos estilos da seção da loja e os ajustes gerais da fonte do seu site.

Se você vende produtos de assinatura, você pode alterar as cores da seção de frequência da assinatura na página de detalhes do produto. Abra os temas de cores do seu site e altere as cores em página de detalhes do produto: assinaturas.

As opções de estilo disponíveis dependem da família de templates do seu site e do tipo de página da loja.

Nota: Galapagos e Supply seguem ajustes diferentes no estilo. Consulte no guia do seu template as informações sobre como estilizar os produtos.

Layout da página de detalhes do produto

Estilize o layout na seção Produto: Layout de estilos do site (páginas da loja do plano Avançado) ou na seção Produtos de estilos do site (páginas clássicas da loja), conforme aplicável.

Descrição do estilo

• Alterar espaçamento de itens
  • Plano Avançado: espaçamento
• Adicionar espaço em branco ao topo da página
  • Plano Avançado: preenchimento superior
• Mudar exibição de paginação
  • Plano Avançado: exibição da navegação: apenas trilha de navegação, apenas paginação, trilha de navegação e paginação, nenhuma
  • Clássico: mostrar navegação do item de produto
• Alterar texto de paginação
  • Plano Avançado: estilo de paginação: anterior/próximo, títulos
• Alterar texto de paginação
  • Plano Avançado: alinhamento de navegação: esquerda, centro, direita, dividir
• Alterar fonte de paginação
  • Plano Avançado: fonte de navegação
• Mudar a cor da paginação
  • Plano Avançado: cor de navegação
• Alterar a cor da seta entre os títulos da página na navegação
  • Plano Avançado: cor do separador da navegação

Atenção:

• A ordem dos produtos é definida por onde eles aparecem nas páginas da loja. Eles são ordenados da esquerda para a direita.
• A paginação mostra todos os produtos. Não é possível limitar a uma categoria específica.

Imagens da página de detalhes do produto

Ao olhar para um item específico, o cliente vê as imagens do produto. Defina o estilo das imagens na seção de estilos do site Produtos: Galeria (páginas da loja do plano Avançado) ou na seção de estilos do site Produtos (páginas da loja Clássica), conforme aplicável.

Descrição do estilo

• Alterar alinhamento de imagem
  • Plano Avançado: posição: esquerda, direita
• Alterar o estilo da galeria
  • Plano Avançado: design: slideshow, empilhado
• Alterar a largura da imagem
  • Plano Avançado: largura
• Definir a forma da imagem
  • Plano Avançado: proporção da imagem
  • Clássico: tamanho da galeria de produtos
• Escolha se a imagem do produto é cortada para preencher o contêiner de imagem. Caso contrário, a Cor de Fundo do Produto será exibida atrás da imagem.
  • Clássico: recorte automático da galeria de produtos
• Os ajustes em miniatura afetam as imagens em miniaturas de navegação que são exibidas abaixo da imagem quando o Design: Slideshow está selecionado.
  • Plano Avançado: alinhamento de miniaturas: esquerda, centro, direita
• Alterar a largura da miniatura
  • Plano Avançado: largura da miniatura
• Alterar espaçamento das miniaturas
  • Plano Avançado: espaçamento entre miniaturas
• Altere o espaço entre imagens quando Design: empilhado estiver selecionado.
  • Plano Avançado: espaçamento

Página de detalhes do produto Informações sobre o produto

Estilize as informações do produto na seção de estilos do site Produtos: Detalhes (páginas da loja plano Avançado) ou na seção de estilos do site Produtos (páginas da loja Clássica), conforme aplicável.

Descrição do estilo

• Alterar onde os detalhes estão posicionados na página
  • Plano Avançado: alinhamento: esquerda, centro, direita
• Alterar a altura da linha
  • Plano Avançado: altura da linha. O ajuste de altura da linha na seção Corpo: fonte também afeta a altura da linha aqui
• Alterar espaçamento entre letras
  • Plano Avançado: espaçamento
• Mostrar ou ocultar o título do produto
  • Plano Avançado: mostre o título
• Alterar fonte do título do produto
  • Plano Avançado: fonte do título
• Alterar cor do título do produto
  • Plano Avançado: cor do título
• Mostrar ou ocultar preço
  • Plano Avançado: mostre o preço
• Alterar fonte de preço
  • Plano Avançado: fonte do preço
• Alterar a cor do preço
  • Plano Avançado: cor do preço
• Altere a cor para itens à venda
  • Plano Avançado: cor do preço em promoção
• Selecione onde a descrição do produto aparece
  • Plano Avançado: posição do trecho: acima do preço, abaixo do preço, abaixo do botão Adicionar ao carrinho
• Alterar a descrição do produto fonte
  • Plano Avançado: fonte do trecho
• Alterar cor da descrição do produto
  • Plano Avançado: cor do trecho
• Alterar cor do link da descrição do produto
  • Plano Avançado: cor do link do trecho
• Oculte ou mostre os botões de compartilhamento
  • Plano Avançado: mostre botões de compartilhamento
  • Clássico: compartilhamento social de produtos
• Use os ajustes na seção "Botões de compartilhamento"
  • Plano Avançado: estilizar botões de compartilhamento
  • Clássico: estilo dos botões de compartilhamento

Página de detalhes do produto: quantidade e variantes

Estilize a quantidade e as variantes na seção de estilos do site Produtos: Opções (páginas do plano Avançado da loja) ou na seção de estilos do site Conteúdo principal (páginas da loja clássica), conforme aplicável.

Descrição do estilo

• Mostrar ou ocultar variantes
  • Plano Avançado: mostre variantes
• Mostrar ou ocultar quantidade. A quantidade só é exibida quando há vários itens disponíveis.
  • Plano Avançado: mostre quantidade
• Alterar a exibição de quantidade
  • Plano Avançado: estilo: apenas texto, quadrado, arredondado, cápsula
• Adicionar uma cor de borda à exibição de quantidade
  • Plano Avançado: cor do preenchimento
• Adicionar uma cor de fundo à exibição de quantidade
  • Plano Avançado: cor de fundo
• Alterar a fonte de exibição de quantidade
  • Plano Avançado: fonte da etiqueta
• Alterar a cor da exibição da quantidade
  • Plano Avançado: cor da etiqueta
• Definir a quantidade e variantes fonte
  • Plano Avançado: fonte
  • Clássico: Segue as alterações de cabeçalho ou título 1 padrão do site.
• Definir a quantidade e as variantes da cor do texto
  • Plano Avançado: cor do texto
• Altere a fonte de exibição da variante. Não é possível alterar a fonte dos itens do menu.
  • Plano Avançado: fonte

Quando o campo de quantidade aparece na página de detalhes do produto?

O campo quantidade será exibido na página de detalhes do produto se:

• O nível de estoque do produto for maior que um.
• Houver variantes, independentemente dos níveis de estoque das variantes individuais.

Dica: para exibir o nível do estoque atual de cada variante na página de detalhes do produto, ative os rótulos de disponibilidade limitada. Isso impedirá que os clientes tentem adicionar mais de um produto ao carrinho quando o estoque for um.

Posso ocultar o menu suspenso de quantidade?

Você pode ocultar a quantidade do produto na versão 7.0 se o template do seu site estiver nas famílias Brine, Farro, Skye, Tremont ou York. Nesses templates, para ocultar o menu suspenso de quantidade nas páginas de itens:

1. Acesse a página da loja.
2. Abra o item individual.
3. Retorne ao painel Site, clique em Design e depois em Estilos do site.
4. Role até a seção Produtos: opções.
5. Desmarque Exibir quantidade.

Dica: a opção de quantidade aparecerá na finalização da compra. Você pode desativar isso para itens de serviço em todos os templates.

Botão Adicionar ao carrinho na página de detalhes do produto

Estilize a quantidade e as variantes na seção de estilos do site Mostrar botões (páginas da loja do plano Avançado) ou na seção de estilos do site Botões (páginas da loja clássica), conforme aplicável.

Descrição do estilo

• Ocultar o botão
  • Plano Avançado: desmarque o botão Mostrar
• Alterar o estilo do botão
  • Plano Avançado: estilo: sólido, contorno, alto-relevo
  • Clássico: estilo: padrão, sólido, contorno, em relevo
• Alterar a forma do botão
  • Plano Avançado: forma: quadrado, arredondado, pílula
  • Clássico: forma: quadrado, arredondado, pílula
• Adicionar ou remover a margem de botões
  • Plano Avançado: preenchimento: pequena, média, grande
• Alterar a cor do botão
  • Plano Avançado: cor
  • Clássico: cor do botão
• Alterar cor do texto do botão
  • Plano Avançado: cor do texto
  • Clássico: cor do texto
• Alterar fonte do botão
  • Plano Avançado: fonte
  • Clássico: fonte

Nota: quando um produto está esgotado, o botão Adicionar ao carrinho aparece esmaecido.

Botão Finalização da compra na página de detalhes do produto

O botão Finalização de compra que aparece na página do carrinho de compras segue as configurações de cor do seu site. Não é possível personalizar seu formato ou fonte.

Produtos relacionados na página de detalhes do produto

Os produtos relacionados aparecem em uma grade na parte inferior da página.