Blocos de Produto

Apresente um produto da sua loja em outra página do seu site e conecte os clientes diretamente com a finalização da compra.

Ultima atualização 5 de Fevereiro de 2025

Um Bloco de Produto exibe um item da loja do seu site em outras páginas ou publicações. É uma ótima maneira de promover produtos em todo o site ou criar um layout diferente da página de destino integrada da sua loja.

Dica

para saber mais sobre as diferenças entre as páginas da loja e os blocos de produtos, visite as páginas da loja versus blocos de produtos

Antes de começar

  • Para usar Blocos de Produtos, você precisa de uma Página da loja contendo o produto que deseja exibir.
  • A Página da loja que contém o produto deve estar ativada. Se você desativá-la, o produto não aparecerá nos carrinhos de compras quando adicionado por meio de Blocos de Produtos.
  • O produto deve ser publicado e deve estar visível.

Adicionar o Bloco de Produto

Para adicionar um Bloco de Produtos:

  1. Edite uma página ou publicação, clique em Adicionar bloco ou Num ponto de inserção e, em seguida, clique em Produto. Para ajuda, confira Adição de conteúdo com blocos.
  2. Para abrir o editor do bloco, clique no ícone de lápis no bloco.
  3. No campo Adicionar um produto, procure o produto que você quer expor. Para adicioná-lo, clique nele nos resultados da busca. A busca mostra até sete produtos.
  4. Para acessar seu inventário e fazer alterações nos produtos, clique em Editar produtos e clique em Salvar e continuar. Tenha em mente que isso fecha a página atual.
  5. Clique na guia Design para personalizar quais detalhes do produto são exibidos.
Product_Block.gif

Dica

os Blocos de Produto exibem um produto de cada vez. Para exibir mais de um produto em uma página, use vários Blocos de Produto ou exiba uma coleção de produtos usando Blocos de Sumário.

Promover produtos fechados

Se você assina o recurso Sites para Membros e tem uma loja on-line em um desses sites, os visitantes do site precisarão se cadastrar para poderem comprar nessa loja. Para dar acesso a não membros, adicione blocos de produto ao site principal e use a barra de busca Adicionar um produto para selecionar os produtos da loja fechada.

Adicionar detalhes do produto

Para personalizar o Bloco de Produto, clique na guia Design. Aqui, você pode definir o alinhamento do bloco para esquerda, centro ou direita. Você também pode personalizar quais detalhes do produto serão exibidos ativando ou desativando as alternâncias:

  • Imagem - Exibe a imagem em destaque do produto
  • Título - Exibe o título do produto
  • Preço - Exibe o preço do produto
  • Descrição - Exibe a descrição do produto
  • Botão Adicionar ao carrinho - Exibe um botão Adicionar ao carrinho
  • Visualização rápida do produto - Permite visualização rápida

Para alterar qualquer um desses detalhes, edite o produto.

Estilo do Bloco de Produto

Você pode estilizar o Bloco de Produto e personalizar o botão Adicionar ao carrinho.

Texto do botão

Por padrão, o texto do botão Bloco de Produto é Adicionar ao carrinho. Você pode alterar esse texto e utilizar outro, como Comprar Agora.

  1. Abra a Página da loja que contém o produto exibido no seu Bloco de Produto.
  2. Clique duas vezes no produto para abrir o editor do produto.
  3. Na guia Opções, insira o novo texto do botão.

Design de botões

A maneira de alterar o design do botão depende da versão do seu site.

  1. Abra uma página contendo um Bloco de Produto.
  2. Clique em Editar, abra Estilos do Site e clique em Botões.

Os botões do bloco de produtos seguem as opções de estilo principal. Para saber mais, acesse Botões de estilo.

  1. Abra uma página contendo um Bloco de Produto.
  2. Retorne ao painel Site, clique em Design e depois em Estilos do site.
  3. Role para baixo até os ajustes de estilo dos botões.

Saiba mais em Edição de estilo dos botões.

Texto e fonte do Bloco de Produtos

A forma como você estilizar o título, o preço e a descrição do Bloco de Produto depende da versão do seu site

Para alterar o texto exibido, acesse a Página da Loja e edite as informações do produto.

Altere a fonte, a cor do texto e o tamanho do texto em Estilos do Site

  • Fonte – Segue Parágrafos
  • Cor – Segue Parágrafo (Médio)
  • Tamanho – Segue Parágrafo 2

O título sempre aparece um pouco maior.

Para alterar o texto exibido, acesse a Página da Loja e edite as informações do produto.

As fontes de detalhes do produto tiram seu estilo de outros estilos de texto em seu site. Na maioria dos modelos:

  • Título - Segue a fonte do corpo do texto, porém um pouco maior. A cor segue a cor do link do corpo.
  • Preço - Segue a fonte e a cor do texto do corpo, mas um pouco maiores.
  • Descrição - Segue a fonte e a cor do texto do corpo.

Há algumas exceções. Nestas famílias de modelos:

Família de template Notas

Bedford

  • Cor do título - Segue o corpo de texto

Brine

  • Cor do título - Segue o corpo de texto

Farro

  • Cor do título - Segue o corpo de texto

Skye

  • Fonte do título -Título da lista (ajustar enquanto estiver em uma página do blog)
  • Fonte Descrição -Trecho
  • Cor do título -Cor do título
  • Descrição Cor -Cor do Trecho
Supply
  • Fonte de preço - sem opções de estilo
  • Descrição - Peso fixo

Etiquetas esgotadas

A forma de ajustar o estilo da etiqueta "Esgotado" depende da versão do site.

A etiqueta "Esgotado" sempre aparece em texto branco sobre um fundo preto retangular. A fonte segue a fonte dos parágrafos do site. É possível alterar o texto no painel "Status do produto".

A etiqueta "Esgotado" segue os ajustes de estilo de Produto: selos de status do seu site. Não é possível alterar onde etiqueta aparece. É possível alterar o texto no painel "Status do produto".

Tamanho e forma do Bloco de Produto

Ao adicionar o bloco pela primeira vez, ele preenche toda a largura da área de conteúdo se não houver outros blocos ao lado dele. Para ajuda no ajuste do tamanho dos blocos, consulte "Ajustando o tamanho dos blocos" e "Movendo blocos para personalizar o layout".

Na forma do bloco, a proporção do bloco de produto corresponde à taxa de proporção original da imagem em destaque do produto. Para que o bloco de produto tenha uma proporção específica, recorte a imagem antes de enviá-la ao editor do produto; ou use o editor de imagens no editor de produto.

Dicas de pesquisa do Bloco de Produtos

Ao procurar um produto a ser exibido no bloco, os resultados da pesquisa são baseados nas seguintes informações:

  • Títulos
  • Descrições
  • Tags
  • Categorias
  • Blocos de texto nas informações adicionais do produto

A busca mostra até sete resultados. Se houver produtos com nomes semelhantes, use o título exato na busca. Novos produtos podem não aparecer imediatamente na busca.

Personalize sua loja online

Embora deva usar uma página de loja para adicionar produtos ao seu site, você pode usar Blocos de Produtos para criar um layout de loja on-line personalizado em uma página diferente. Depois de criar e personalizar sua loja, você pode ocultar a página da loja movendo-a para a seção Não vinculada do painel de páginas. Isso remove a página da loja dos menus de navegação enquanto a mantém ativada.

Resolução de problemas

Meu Bloco de Produto mostra a imagem errada

Os Blocos de produtos exibem a imagem em destaque do produto. Essa imagem pode ser diferente da primeira imagem definida no editor do produto. Para alterar a imagem no bloco do produto, altere a imagem em destaque do produto.

No Bloco de Produto, o produto não é adicionado ao carrinho de compras.

Se um clique em um botão Adicionar ao carrinho do Bloco de Produto não adicionar o produto ao carrinho de compras, a Página da loja vinculada poderá estar desativada. Os produtos de Páginas da loja desativados podem ser exibidos nos Blocos de Produtos, mas não podem ser adicionados aos carrinhos. Para resolver esse problema, ative a Página da loja.

Footer Image
  • Peça ajuda à nossa comunidade

  • Peça ajuda à nossa comunidade sobre personalizações avançadas.

  • Contrate um Squarespace Expert

  • Ganhe destaque on-line com a ajuda de um designer ou desenvolvedor experiente.