Configurando o visual da página de produtos
16 min
Criado por: Rafael Pinheiro em: 01/07/2020 15:44
Tags: Produtos

Você já deve ter desistido de comprar um produto em uma loja virtual por não ter encontrado informações claras, organizadas e coerentes, certo? Este problema é bem mais comum do que você imagina! E por que fazer isso no seu e-commerce?

A página de produto é onde o usuário busca todas as informações que vão levar ele a tomar a decisão de compra. As informações sobre condições de frete e pagamento, disposição dos elementos e imagens devem ser exibidas da maneira mais organizada possível, nunca esquecendo da coerência com a sua proposta: minimalista, varejo ou conceitual, por exemplo.

Na plataforma de loja virtual Dooca Commerce esta tarefa não é complicada, como parece. No editor da sua loja virtual você consegue, em poucos cliques, resultados variados que vão se encaixar na sua necessidade. Para exemplificar para você, criamos alguns exemplos explicando quais são as configurações necessárias para cada resultado.

Como o usuário faz a leitura da tela?

No ocidente o padrão de visualização é o mesmo da leitura, da esquerda para direita, do topo para baixo. Em sites ou lojas virtuais que se apresentam com blocos de conteúdos encontramos o padrão “Z”, conforme imagem abaixo.

Com esta informação em mãos, você precisa analisar o seu produto e escolher a melhor configuração para a página de detalhes do seu produto. Priorize e destaque as informações que são mais importantes para a sua loja. 

Editando o visual da sua página de produtos

No painel de controle da sua loja acesse o menu Aparência > Meus Temas e clique no botão azul “Customizar”. Pronto, agora você está no editor visual da sua loja e basta selecionar a página de produtos para começar a edição.

Ao selecionar a página detalhe de produto, as seções da coluna da esquerda da tela serão automaticamente recarregadas. Cada seção da lista corresponde as informações que estão sendo exibidas na página.

Informações de produto

Esta é a seção mais importante da página de produto. É o primeiro bloco de informações que o usuário terá acesso. É aqui que você vai selecionar o estilo de diagramação, estilo de galeria e quais informações serão exibidas. 

Migalha de pão

Este recurso auxilia a navegação em dispositivos com telas maiores, informando o caminho percorrido pelo usuário até chegar na página do produto. Permitindo ainda que o usuário acesse a listagem de produtos que pertencem a mesma categoria que o produto visualizado por ele.

Assim melhorando a usabilidade do site, pois diminui o esforço do usuário para encontrar uma página, facilitando sua navegação ao refletir a ordem do conteúdo acessado.

Posição da imagem

Determina a diagramação da página de produto de acordo com o posicionamento da galeria de imagens.

Esquerda

 

Centralizada

Direita

Galeria de imagens do produto

Você tem quatro tipos de galerias de imagens:

  • 1 - Galeria com miniatura lateral
  • 2 - Galeria com miniatura abaixo
  • 3 - Galeria sem miniatura
  • 4 - Galeria com rolagem: A galeria de imagens rola enquanto as informações do produto permanecem fixas na tela.

Exibir Zoom Mobile

Por padrão o zoom no mobile vem desabilitado, ativando esta opção o usuário, ao clicar sobre a imagem principal, consegue visualizar ela ainda maior na tela do seu dispositivo móvel.

Desativar o zoom da imagem principal

Por padrão, ao passar o mouse sobre a imagem principal da galeria é ativado o zoom na imagem, caso queira você pode desabilitar.

Características no título de produto

Selecione até 5 características do produto para serem exibidas logo abaixo do título do produto, conforme exemplo abaixo:

Exibir referência de produto

Exibe a referência cadastrada do produto. 

Exibir ID ERP

Exibe o código do Sistema de Gestão cadastrado no produto 

Exibir marca do produto

Exibe a marca cadastrada no produto, quando esta marca possui um logo cadastrado, exibe o logo conforme imagem abaixo:

Exibir quantidade disponível em estoque

Exibe uma mensagem com a quantidade de produtos em estoque: “Este produto possui apenas 10 unidades disponíveis em estoque”, por exemplo. Essa mensagem sempre exibirá a quantidade em estoque do seu produto.

Exibir opções de pagamento

Exibe o link para o usuário verificar todas as condições de pagamento do produto em uma modal. Não exibir esta informação é recomendado apenas em lojas com produtos de preço mais baixos, onde o parcelamento não é tão necessário.

Exibir cálculo de frete

Exibe a opção de cotação de frete para o usuário.

Exibir selos de informação de entrega

Exibe um selo com a informação de envio do produto: Envio imediato ou Vendido sob encomenda.

Exibir barra de compra rápida

Exibe a barra de compra rápida na parte inferior, quando o usuário rolar a tela e o botão de compra do produto desaparecer. Informando o nome do produto, o preço e a opção de compra. No mobile esta barra é simplificada apenas com o botão de compra.

Exibir preço de variação com menor preço

Altera a visualização do preço do produto para “A partir de R$ 299,00”, por exemplo, em produtos com as variações de preços diferentes, informando o menor preço de todas as variações. Lembrando que para esta funcionalidade funcionar corretamente todas as variações do produto devem ter preços cadastrados.

Exibir informação de estoque baixo a partir de:

Exibe a quantidade de estoque disponível do produto. Você pode configurar para exibir a mensagem apenas quando o estoque estiver baixo de 5 unidades, por exemplo, no campo de configuração, para nunca exibir a mensagem apenas preencha com o número 0.

Mensagem de estoque baixo personalizada

Personalize a mensagem de alerta de estoque baixo que será exibida no seu site de vendas: “Aproveite, restam poucas unidades!”, por exemplo.

Estilo de exibição de atributos

Selecione qual o visual da seleção dos atributos de produtos com variações. Você tem 3 opções:

  • 1 - Botões: Recomendado para lojas virtuais que possuem produtos com número mais baixo de atributos e que sua legenda é pequena: P, M, G, GG ou 32, 33, 34, 35, 36, 37..., 110v ou 220v, por exemplo.
  • 2 - Seleção: Recomendado em casos onde o número de variação é muito grande e a legenda é maior: De 0 a 1 mês, De 1 a 2 meses, De 2 a 3 meses..., por exemplo.
  • 3 - Grade: Recomendado para lojas que possuem um maior número de itens por pedido, possibilitando ao usuário inserção em lote de produtos. Como por exemplo 2 unidades do tamanho P, 4 unidades do tamanho M e 7 unidades do tamanho G. Esta é uma boa opção para lojas que vendem para atacado.

Estilo de exibição de outras cores

Escolha qual visual que será utilizado para exibir as demais cores de um produto.

  • 1 - Cores: Serão exibidas miniatura das cores configuradas no menu Cores do catálogo de produto.
  • 2 - Imagens: Serão exibidas as imagens principais de cada cor, inseridas no cadastro do produto.

Título do botão de personalizar produto

Nos kits personalizáveis de produtos é exibido um botão abaixo do botão de compra que direciona o usuário para o bloco de opções de personalização de produtos do kit. Neste campo você pode editar o texto que é exibido neste botão.

Kits de produtos

As páginas internas dos kits de produtos possuem um visual diferente da página de produtos simples. Nesta seção você poderá configurar algumas opções para exibir da melhor maneira os seus produtos no kit.

Título e subtítulo

São as informações que serão exibidas no topo da seção de listagem de produtos que pertencem a um kit.

Ordenação de produtos

Quando você cria um kit tem a opção de torna-lo personalizável, ou seja, permite que o usuário possa alterar os produto deste kit.

Para entender melhor como cadastrar um kit de produtos, clique aqui.

Por exemplo: Caso queira ofertar em sua loja virtual uma cesta para o dia dos namorados com rosas, salgadinhos e vinho. Você pode permitir que o usuário selecione qual salgadinho e vinho ele quer na cesta. Caso queira pode deixar a rosa como um produto fixo deste kit, permitindo apenas a troca do salgadinho e o vinho. Nesta aba você define também qual a ordem de exibição destes produtos.

  • Primeiro produtos agrupados: Exibe primeiro os produtos COM opção de personalização.
  • Primeiro produtos sem grupos: Exibe primeiro os produtos do kit SEM opção de personalização.

Estilo de seleção das variações

Do mesmo modo que você pode escolher o visual da seleção de uma variação do produto. Você também tem a opção de escolher o visual de um produto que pertence a um kit. Neste caso você tem duas opções:

  • 1 - Botões: Recomendado para lojas virtuais que possuem produtos com número mais baixo de atributos e que sua legenda é pequena: P,M,G,GG ou 32,33,34,35,36,37..., 110v ou 220v, por exemplo.
  • 2 - Seleção: Recomendado em casos onde o número de variação é muito grande e a legenda é maior: De 0 a 1 mês, De 1 a 2 meses, De 2 a 3 meses..., por exemplo.

Permitir venda avulsa dos produtos

Permita a venda avulsa dos produtos de um kit personalizado ou não. Esta opção habilita um botão de compra ao lado de cada produto do kit, ao clicar no botão o produto é adicionado separadamente no carrinho, desconsiderando o valor do markup configurado no kit, ou seja, o produto é adicionado no carrinho com o valor inserido no seu cadastro. 

Exibição dos produtos de um kit

Você tem três opções para exibir os produtos pertencentes ao kit.

Para fazer essa configuração você deve acessar a aba Configurações(1), na seção Kit de produtos (2), do editor visual.

  • 1 - Lateral: Os produtos pertencentes ao kit serão listados na coluna da direita da tela, acima do botão de compra do produto.
  • 2 - Abaixo, antes da descrição: Os produtos pertencentes ao kit serão listados acima da descrição do produto.
  • 3 - Abaixo, depois da descrição: Os produtos pertencentes ao kit serão listados abaixo da descrição do produto.

Descrição do Produto

Uma descrição completa e detalhada do produto aumenta as vendas do seu site de vendas, pois permite que o cliente conheça melhor a mercadoria da sua loja virtual. 

Estilo da descrição do produto

Você tem três opções de estilo visual para exibição da descrição completa e das características da sua loja virtual.

Descrição e características em abas

A descrição completa do produto é exibida ao lado das características cadastradas no produto em uma navegação por abas. 

Características com ícones + descrição

Os grupos de características são exibidos com suas imagens inseridas no cadastro de características, com os valores dos grupos ao lado. Abaixo a descrição completa do produto. A ordenação de visualização das características é a mesma inserida no cadastro de cada produto.

Características destaques/ícones + descrição 

As primeiras seis características cadastradas no produto são exibidas em uma barra de destaque, a imagem cadastrada no valor do primeiro grupo de característica é exibida recebendo um destaque. Abaixo, mostram os demais grupos de características com suas imagens e valores ao lado. Na sequência é exibida a descrição completa cadastrada no produto.

Caso tenha dúvidas sobre como cadastrar as imagens dos grupos e valores das características, clique aqui. 

Selos customizados

Os selos cadastrados no aplicativo Selos Customizados serão exibidos em uma seção na página de detalhe do produto. Você pode inserir um título como “Premiações” ou “Destaques do produto”, por exemplo. 

Produtos relacionados

Nas páginas de detalhe de produto são exibidos alguns produtos relacionados pertencentes à mesma categoria principal. 

Últimos artigos visitados