Páginas de produtos

Nas páginas de produto, você mostra informações sobre os produtos vendidos em sua loja e clientes podem comprá-los.

Por padrão, as páginas de produto têm as seções Informações do produto e Produtos relacionados no editor de temas.

Nesta página

Seção Informações do produto

Seção Informações do produto

A seção Informações do produto exibe dados sobre os itens comercializados, como título, descrição, preço e imagens.

Configurações da seção de informações do produto

As configurações da seção Informações do produto
Configuração	Descrição
Habilitar conteúdo persistente no desktop	Ao rolar uma página para baixo, a rolagem da coluna de informações do produto só começa depois que todas as imagens forem visualizadas.
Esquema de cores	Um conjunto de cores que podem ser aplicadas à seção. Saiba mais sobre esquemas de cores.
Largura da mídia para desktop	Defina a largura das mídias do produto na página correspondente para computadores desktop. Escolha entre Pequeno, Médio ou Grande.
Ajustar a mídia à tela	Selecionar esta opção define uma altura máxima para a mídia, calculada de acordo com a altura da janela do navegador no dispositivo.
Ajuste da mídia	Selecione Original para manter a proporção original da mídia ou Ajustar para enquadrá-la no contêiner.
Layout para desktop	Defina o layout das mídias do produto em computadores desktop. Escolha entre as seguintes opções: Empilhado: exibe as mídias de produto empilhadas verticalmente na página. Ao clicar em uma mídia desse tipo, você abre uma caixa de diálogo pop-up com uma exibição maior das mídias selecionadas. 2 colunas: exibe a mídia do produto como empilhada, mas em duas colunas. Miniaturas: se um produto tiver mais de uma imagem ou outro tipo de mídia, as mídias restantes serão exibidas como miniaturas abaixo da principal. O cliente pode clicar em qualquer miniatura para exibi-la como a principal mídia do produto. Carrossel de miniaturas: se um produto tiver mais de uma imagem ou outro tipo de mídia, as mídias restantes serão exibidas como miniaturas em um carrossel abaixo da principal. O cliente poderá clicar em uma miniatura para exibi-la como a mídia principal do produto ou usar as setas de navegação do carrossel para ver outros itens.
Posição da mídia no desktop	Defina se a mídia do produto será exibida no lado esquerdo ou direito da página em computadores desktop.
Zoom de imagem	Escolha como será o zoom da imagem em computadores: Abrir janela modal: o cliente pode clicar para exibir uma versão maior da imagem. Esta é a funcionalidade padrão para mídias de produto exibidas em dispositivos móveis. Clicar e passar o cursor: o cliente pode clicar para ampliar a imagem e, em seguida, passar o mouse para visualizar diferentes seções ampliadas. A passagem do cursor com redução do zoom é desativada quando a imagem aumentada é clicada de novo ou quando o mouse sai do contêiner da imagem. Se essa configuração estiver ativada e o usuário estiver em um dispositivo móvel, a imagem será aberta em uma janela modal por padrão, quando clicada. Sem zoom: essa opção desativa o zoom em imagens. É ideal para imagens de baixa resolução que perdem qualidade ao serem ampliadas.
Layout para dispositivo móvel	Defina o layout das mídias de produto em dispositivos móveis. Escolha entre as seguintes opções: 2 colunas: exibe duas mídias de produto lado a lado, com a funcionalidade de carrossel para navegar e visualizar outras opções. Exibir miniaturas: exibe uma única mídia principal, com miniaturas em carrossel rolável abaixo. Ocultar miniaturas: exibe uma única mídia principal, com carrossel rolável abaixo, mas as miniaturas não são exibidas.
Ocultar a mídia de outras variantes após selecionar uma delas	Quando uma variante é selecionada, as imagens de outras variantes ficam ocultas. As imagens reaparecem quando uma variante é desmarcada.
Habilitar loop de vídeo	Para os vídeos presentes na mídia do produto, esta configuração os reproduz em loop, para que reiniciem automaticamente ao terminar.
Preenchimento superior	Defina a quantidade de espaço na parte superior da seção.
Preenchimento inferior	Defina a quantidade de espaço na parte inferior da seção.

Além das configurações da seção Informações do produto, você também pode visualizar e personalizar algumas das Configurações de tema para selos de produtos e adicionar seu próprio CSS personalizado específico da seção.

Blocos de informações do produto

Use os seguintes blocos com a seção Informações do produto:

Bloco de texto

O bloco Texto pode ser usado para exibir texto estático ou dados variáveis usando origens dinâmicas. Por exemplo, você pode adicionar texto exibindo uma mensagem de marketing, como Frete grátis acima de US$ 100, que aparecerá em todos os produtos. Outra opção é usar o bloco de texto para adicionar uma fonte dinâmica, que pode mudar dependendo do produto que está sendo visualizado. Por exemplo, é possível conectar o campo do Fabricante do produto no bloco Texto como uma fonte dinâmica, e o fabricante específico do produto será exibido.

As configurações do bloco Texto na seção Informações do produto
Configuração	Descrição
Texto	Um campo de texto para adicionar informações extras à página do produto.
Estilo de texto	Altere o estilo do texto. Escolha entre as seguintes opções: Corpo: altera o texto para o estilo de parágrafo. Subtítulo: altera o texto para subtítulo, que é um pouco maior que o texto no estilo de parágrafo. Letras maiúsculas: altera o texto para deixá-lo menor que o texto no estilo de parágrafo e coloca todo o texto em maiúsculas.

#### Bloco de título

O bloco Título exibe o título do produto visualizado. Não há configurações personalizáveis no bloco.

Bloco de preço

O bloco Preço exibe as informações de preços do produto visualizado, como preço e Comparação de preços. Não há configurações personalizáveis no bloco.

Bloco de seletor de variante

O bloco Seletor de variante exibe qualquer opção de variante do produto que está sendo visualizado. O seletor de variante é exibido apenas para produtos que possuem opção de variante. Se você retirar este bloco e tiver um produto com opção de variante, seu cliente não poderá escolher ou comprar a opção de variante que deseja. É possível adicionar um bloco seletor de variante que exiba um menu suspenso ou pílulas e personalizar as formas das amostras de cor. Saiba mais sobre como adicionar amostras de cor para a variante com metacampos de categoria.

As configurações do bloco Seletor de variante na seção Informações do produto
Configuração	Descrição
Estilo	Decida como as variantes do produto serão exibidas aos clientes. Escolha entre as seguintes opções: Menu suspenso: exibe as opções de variante em menus suspensos. Podem aparecer somente como amostra ou texto. Pílulas: exibe as opções de variante como botões que você pode selecionar. Podem aparecer somente como amostra ou texto.
Amostra	Escolha como suas amostras de cor são exibidas aos clientes. Escolha entre as seguintes opções: Círculo: exibe a amostra de cor como um círculo que você pode selecionar. Quadrado: exibe a amostra de cor como um quadrado que você pode selecionar. Nenhuma: nenhuma amostra de cor é exibida.

#### Bloco do seletor de quantidade

O bloco Seletor de quantidade exibe um campo de número clicável e editável que os clientes podem usar para alterar quantas unidades de um produto querem comprar. Não há configurações personalizáveis no bloco.

Bloco de botões Comprar

O bloco Botões Comprar exibe o botão Adicionar ao carrinho e as informações de retirada na loja. Ele também pode exibir todos os botões de checkout dinâmico na loja.

As configurações do bloco Botões Comprar na seção Informações do produto
Configuração	Descrição
Exibir botões de checkout dinâmico	Mostra as opções de checkout dinâmico ativadas nas configurações de Pagamentos.
Mostrar formulário de informações do destinatário para cartões-presente	Exibe uma caixa de seleção opcional nos produtos "cartão-presente" para permitir que os clientes enviem e agendem o cartão-presente a um destinatário junto com uma mensagem pessoal.

#### Bloco de descrição

O bloco Descrição exibe a descrição do produto visualizado. Não há configurações personalizáveis no bloco.

Bloco de compartilhamento

Este bloco Compartilhar mostra um link clicável que permite aos clientes compartilhar o produto nas redes sociais deles.

As configurações do bloco Compartilhar na seção Informações do produto
Configuração	Descrição
Texto	O texto no qual os clientes clicam para compartilhar o produto em suas redes sociais.

#### Bloco de SKU

O bloco SKU exibe a Unidade de manutenção de estoque (SKU, na sigla em inglês) associada ao produto ou à variante, quando relevante. Saiba mais sobre como adicionar números de SKU às variantes de produto.

As configurações do bloco SKU na seção Informações do produto
Configuração	Descrição
Estilo de texto	Altere o estilo do texto. Escolha entre as seguintes opções: Corpo: altera o texto para o estilo de parágrafo. Subtítulo: altera o texto para subtítulo, que é um pouco maior que o texto no estilo de parágrafo. Letras maiúsculas: altera o texto para deixá-lo menor que o texto no estilo de parágrafo e coloca todo o texto em maiúsculas.

#### Bloco de status do estoque

O bloco Status do estoque exibe o status de estoque do produto. É possível exibir permanentemente o status do estoque e o número de estoque restante ou exibi-lo somente depois que a contagem de estoque do produto atingir o limite definido. O status de estoque só é exibido para produtos com acompanhamento de estoque ativado.

As configurações do bloco Status do estoque na seção Informações do produto
Configuração	Descrição
Estilo de texto	Altere o estilo do texto. Escolha entre as seguintes opções: Corpo: altera o texto para o estilo de parágrafo. Subtítulo: altera o texto para subtítulo, que é um pouco maior que o texto no estilo de parágrafo. Letras maiúsculas: altera o texto para deixá-lo menor que o texto no estilo de parágrafo e coloca todo o texto em maiúsculas.
Limite de estoque baixo	Use o controle deslizante para definir um limite quando os produtos exibirem uma mensagem Estoque baixo. Escolha um número entre 0 e 100. Vale lembrar que, se você escolher zero, a mensagem Em estoque será mostrada até que o produto acabe totalmente.
Mostrar contagem de estoque	Selecione esta opção quando quiser mostrar a contagem de estoque disponível dos produtos.

#### Bloco Liquid personalizado

O bloco Liquid personalizado exibe o código HTML ou Liquid personalizado que você adiciona ao bloco.

As configurações do bloco Liquid personalizado na seção Informações do produto
Configuração	Descrição
Código Liquid	Exibe o conteúdo renderizado pelo código HTML ou Liquid que você insere.

#### Bloco de linha recolhível

O bloco Linha recolhível exibe uma linha expansível e recolhível com um título. Quando o cliente clica no ícone, título ou seta para baixo, a linha se expande e mostra o que estava oculto.

As configurações do bloco Linha recolhível na seção Informações do produto
Configuração	Descrição
Título	O título da linha, que é exibido quando a linha está recolhida e expandida.
Ícone	Escolha um ícone para exibir com a linha recolhível ou selecione Nenhum para exibir apenas o título da linha.
Conteúdo da linha	Insira o conteúdo da linha usando o editor de rich text. O conteúdo é exibido somente quando a linha é expandida.
Conteúdo da linha de página	Adicione conteúdo de uma página à linha. Essa informação exibe apenas o conteúdo que você adiciona a uma página na seção Loja virtual > Páginas do admin da Shopify. Ela não exibe o conteúdo que você adiciona no modelo de páginas no editor de temas. Qualquer conteúdo que você inserir no campo Conteúdo da linha é exibido acima do conteúdo da página adicionado.

#### Bloco pop-up

O bloco Pop-up exibe texto clicável que abre uma caixa de diálogo pop-up quando clicado.

As configurações do bloco Pop-up na seção Informações do produto
Configuração	Descrição
Etiqueta do link	O texto clicável no qual os clientes clicam para exibir a caixa de diálogo pop-up.
Página	Selecione a página da qual você deseja exibir o conteúdo na caixa de diálogo pop-up. Essa informação exibe apenas o conteúdo que você adiciona a uma página na seção Loja virtual > Páginas do admin da Shopify. Ela não exibe o conteúdo que você adiciona no modelo de páginas no editor de temas.

#### Bloco de avaliação do produto

O bloco Classificação do produto exibe a avaliação média do produto em estrelas, com o número de avaliações entre parênteses, por exemplo: ★★★★★ (8).

Para exibir as classificações, é necessário ter um app de avaliação de produtos e definições de metacampo para reviews.rating_count e reviews.rating.

Não há configurações personalizáveis no bloco.

Bloco de produtos complementares

O bloco Produtos complementares exibe itens adicionais que você configura com o app Shopify Search & Discovery.

As configurações do bloco Produtos complementares na seção Informações do produto
Configuração	Descrição
Título	O título do bloco.
Exibir como linha recolhível	Quando selecionado, o conteúdo é exibido recolhido em uma linha. Se o cliente clicar no título, a linha se expande e mostra o que estava oculto.
Ícone	Selecione um ícone para combinar com seu título quando produtos complementares forem exibidos em uma linha recolhível.
Máximo de produtos a serem mostrados	Selecione o número máximo de produtos complementares para exibir. Escolha um número entre 1 e 6.
Número de produtos por página	Selecione o número de produtos complementares que você quer exibir por página deslizante. Escolha um número entre 1 e 4.
Estilo de paginação	Defina o estilo de navegação da página deslizante que aparece abaixo dos produtos. Escolha entre Pontos, Contador ou Números.
Proporção da imagem	Defina a proporção das imagens no cartão do produto. Escolha Retrato ou Quadrado.
Habilitar botão para adicionar rapidamente	Se você ativar o botão Adição rápida, seus clientes poderão adicionar um item ao carrinho a partir do cartão do produto com uma das seguintes opções: Adicionar ao carrinho: para produtos de única variante. Quando um cliente clica no botão, o produto é adicionado automaticamente ao carrinho. Escolher opções: para produtos com variantes. Quando um cliente clica no botão, uma caixa de diálogo pop-up é exibida para que seja possível fazer a seleção da variante e prosseguir com a compra.

#### Ícone com bloco de texto

O bloco Ícone com texto exibe até três ícones com texto correspondente. Escolha entre uma lista de ícones pré-instalados ou use uma imagem carregada.

As configurações do bloco Ícone com texto na seção Informações do produto
Configuração	Descrição
Layout	Escolha entre um layout Horizontal ou Vertical para o bloco.
Primeiro ícone	Selecione um ícone para exibir no bloco ou selecione Nenhum para exibir apenas um título.
Primeira imagem	Escolha sua própria imagem para usar em vez de um ícone.
Primeiro título	Adicione um título para seu primeiro ícone ou imagem.
Segundo ícone	Selecione um ícone para exibir no bloco ou selecione Nenhum para exibir apenas um título.
Segunda imagem	Escolha sua própria imagem para usar em vez de um ícone.
Segundo título	Adicione um título para seu segundo ícone ou imagem.
Terceiro ícone	Selecione um ícone para exibir no bloco ou selecione Nenhum para exibir apenas um título.
Terceira imagem	Escolha sua própria imagem para usar em vez de um ícone.
Terceiro título	Adicione um título para seu terceiro ícone ou imagem.

## Seção Produtos relacionados

Com base no produto sendo visualizado, a seção Produtos relacionados exibe produtos semelhantes, produtos com descrição parecida ou comprados frequentemente junto com o produto em exibição. Você pode adicionar manualmente seus próprios produtos à seção Produtos relacionados usando o app Shopify Search & Discovery.

Para saber mais sobre recomendações de produtos, consulte as Noções básicas sobre recomendações de produtos.

Configurações da seção Produtos relacionados

As configurações da seção Produtos relacionados
Configuração	Descrição
Título	O título da seção.
Tamanho do título	O tamanho do texto do título. Escolha entre Pequeno, Médio, Grande, Extra Grande ou Extra extra grande.
Máximo de produtos a serem mostrados	Defina o número máximo de produtos relacionados para exibir. Escolha um número entre 2 e 10.
Número de colunas no desktop	Defina o número de colunas para os produtos serem exibidos em computadores desktop. Escolha um número entre 1 e 6.
Esquema de cores	Um conjunto de cores que podem ser aplicadas à seção. Saiba mais sobre esquemas de cores.
Proporção da imagem	Defina a proporção das imagens em destaque dos produtos relacionados exibidos. Escolha entre as seguintes opções: Adaptar à imagem: usa a proporção da imagem para evitar que ela seja cortada. Retrato: corta as imagens para usar a proporção 2:3. Quadrado: corta as imagens para usar a proporção 1:1.
Formato da imagem	Escolha um dos seguintes formatos de imagem para as imagens do produto relacionado: Padrão: altera a imagem do produto para o formato retangular. Arco: curva a parte superior da imagem do produto. Bolha: arredonda a imagem do produto com uso de um dentre seis formatos de bolha aleatórios que mostram uma animação exclusiva quando o mouse passa sobre eles. Chevron para a esquerda: altera a imagem do produto para o formato de chevron com uma inclinação acentuada para a esquerda. Chevron para a direita: altera a imagem do produto para o formato de chevron com uma inclinação acentuada para a direita. Diamante: altera a imagem do produto para o formato de diamante com quatro lados. Paralelogramo: altera a imagem do produto para um formato com dois pares de linhas paralelas. Arredondado: arredonda a imagem do produto para um formato circular ou oval que mostra uma animação exclusiva quando o mouse passa sobre ele.
Exibir segunda imagem ao passar o cursor	Quando um cliente passa o cursor sobre as imagens do produto em um computador desktop, esta opção exibe a segunda imagem do produto, se o produto tiver uma.
Exibir fornecedor	Exibe o fabricante de cada produto.
Exibir avaliação do produto	Mostra a classificação média do produto em estrelas junto com o número de avaliações entre parênteses, por exemplo: ★★★★★ (8). Para tanto, é necessário ter um app de avaliação de produto e definições de metacampo de `reviews.rating_count` e `reviews.rating`.
Número de colunas em dispositivos móveis	Defina o número de colunas para os produtos serem exibidos em dispositivos móveis. Escolha 1 ou 2 colunas.
Preenchimento superior	Defina a quantidade de espaço na parte superior da seção.
Preenchimento inferior	Defina a quantidade de espaço na parte inferior da seção.