Blocos de Produto

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 de Armazenamento contendo o produto que deseja exibir.
A Página de Armazenamento 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:

Edite uma página ou publicação, clique em um ponto de inserção e selecione Produto no menu. Veja ajuda em Adição de conteúdo com blocos.
No campo Adicionar um produto, procure o produto que você deseja exibir. Clique nele nos resultados da pesquisa para adicioná-lo. A pesquisa exibe até 15 produtos.
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.
Clique na guia Design para personalizar quais detalhes do produto são exibidos.

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 Áreas de Membros e tem uma loja on-line em uma área de membros, os visitantes do site precisarão se assinar para poder comprar nessa loja. Para dar acesso a não membros, adicione Blocos de Produto ao site principal e use a barra de busca Localizar 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 miniatura 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.

Abra a Página de Armazenamento que contém o produto exibido no seu Bloco de Produto.
Clique duas vezes no produto para abrir o editor do produto.
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.

Versão 7.1
Versão 7.0

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

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

Abra uma página contendo um Bloco de Produto.
No Menu Inicial, clique em Design e depois em Estilos do Site.
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.

Versão 7.1
Versão 7.0

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

Tamanho e forma do Bloco de Produto

Quando você adicionar o bloco pela primeira vez, ele preencherá toda a largura da área de conteúdo se não houver outros blocos ao lado dele. Para ajuda no redimensionamento dos blocos, confira Redimensionamento de bloco e Movendo blocos para personalizar o layout.

Para a forma do bloco, a proporção de blocos de produtos corresponde à taxa de proporção original da imagem em miniatura do produto. Para garantir que um Bloco de Produto tenha uma proporção específica, recorte a imagem antes de enviá-la para o editor de produtos 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 pesquisa exibe até 15 correspondências. Se seus produtos tiverem nomes semelhantes, pesquise pelo título exato. Novos produtos podem não ser exibidos imediatamente na pesquisa.

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 miniatura do produto. Essa imagem pode ser diferente da primeira imagem definida no editor de produtos. Para alterar a imagem no Bloco de Produto, altere a imagem em miniatura 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 de Armazenamento vinculada poderá estar desativada. Os produtos de Páginas de Armazenamento desativados podem ser exibidos nos Blocos de Produtos, mas não podem ser adicionados aos carrinhos. Para resolver esse problema, ative a Página de Armazenamento.