Onglets personnalisés sur une fiche produit PrestaShop
Conversão e UX

Como acrescentar separadores personalizados a uma ficha de produto PrestaShop?

Uma ficha de produto tem de transportar muita informação sem se tornar um muro de texto. Os separadores respondem a essa necessidade, desde que não enterrem o que decide a compra e continuem legíveis para os motores.

O que o PrestaShop propõe de origem

O tema por defeito mostra separadores predefinidos: descrição, detalhes do produto, e anexos quando existem. Os módulos instalados podem acrescentar outros, cada um enxertando-se no mesmo sítio.

Dois limites. O conteúdo de cada separador corresponde a um campo fixo do produto, sem possibilidade de criar outros. E a ordem é determinada pela posição dos módulos, não por uma intenção editorial.

Resultado comum: um separador «Avaliações» antes de um separador «Características», quando o cliente quer primeiro verificar as especificações.

Separadores ou acordeão

A questão decide-se pelo formato do ecrã.

Em computador, os separadores horizontais funcionam bem: os títulos estão todos visíveis, o visitante vê o que existe e escolhe.

Em mobile, os separadores horizontais tornam-se problemáticos. Quatro ou cinco títulos não cabem na largura, e o deslocamento horizontal esconde os últimos. O acordeão vertical, em que cada secção se abre no lugar, é nitidamente mais utilizável.

A solução que funciona consiste em passar de um formato ao outro consoante a largura, mantendo o mesmo conteúdo e a mesma estrutura HTML.

A indexabilidade, ponto crítico

É o aspeto que a maioria das implementações trata mal.

Um conteúdo recolhido num separador continua indexável desde que esteja presente no código HTML da página, apenas ocultado por estilo. É o comportamento padrão e não coloca problema nenhum.

Em contrapartida, um conteúdo carregado ao clique, por uma chamada assíncrona, não existe no momento da análise inicial. Pode ser visto numa renderização posterior, mas nada o garante, e o seu peso na avaliação da página é incerto.

A regra é portanto simples: todo o conteúdo dos separadores deve estar presente no HTML servido. O carregamento diferido só se justifica para elementos pesados como um vídeo ou uma lista de avaliações paginada.

Um ponto complementar muitas vezes ignorado: o Google indica tratar o conteúdo ocultado atrás de uma interação como conteúdo de menor importância na versão móvel. Isso não o desqualifica, mas defende que se deixe aberto o que mais conta.

Separadores da Ficha de Produto PrestaShop: Gestor por Arrastar e LargarSeparadores de ficha de produto à medida, reorganizados por arrastar e largar.79,00

Que separadores consoante o tipo de produto

Três configurações, consoante a natureza do catálogo.

Produto técnico. Características, compatibilidades, documentação, garantia e pós-venda. A descrição comercial fica curta e aberta por cima.

Produto têxtil ou moda. Descrição, composição e conservação, guia de tamanhos, entrega e devoluções. O guia de tamanhos não devia estar num separador mas ao lado do seletor, servindo o separador para a versão detalhada.

Produto alimentar ou cosmético. Descrição, composição e alergénios, valores nutricionais ou lista de ingredientes, conservação, origem. Atenção: as menções obrigatórias do Regulamento (UE) 1169/2011 têm de estar acessíveis antes da compra, coisa que um separador permite, mas não podem ser difíceis de encontrar, e têm de estar em português nas vendas para Portugal.

A ordem

Três princípios.

O primeiro separador está aberto por defeito e é visto pela quase totalidade dos visitantes. Os seguintes são vistos por uma fração decrescente. Coloque portanto em primeiro aquilo que levanta a objeção mais frequente nessa categoria.

A ordem segue o percurso de decisão, não a ordem administrativa dos seus campos. Descrição, depois verificação técnica, depois confiança, depois logística.

A ordem pode variar por categoria. Em produtos técnicos, as características passam à frente da descrição. Em decoração, o contrário.

Os separadores vazios

Problema sistemático assim que a configuração é aplicada a todo o catálogo: um separador «Documentação» apresentado em produtos que não a têm.

O comportamento esperado é a ocultação automática de qualquer separador sem conteúdo. É óbvio e ainda assim raramente implementado, porque a configuração é feita produto a produto nos casos simples e globalmente nos outros.

Preveja também o caso inverso: um conteúdo preenchido mas nenhum separador configurado para o receber, o que torna a informação invisível.

Quantos separadores

Quatro a cinco no máximo. Acima disso, dois efeitos somam-se: os títulos deixam de caber numa linha, e o visitante deixa de os ler.

Se tiver mais conteúdo, a pergunta a fazer não é como acrescentar um separador, mas se esse conteúdo merece estar na ficha. Um manual completo está mais no seu lugar em download do que como sexto separador.

A ligação direta para um separador

Pormenor útil e barato: permitir apontar para um separador preciso a partir de uma ligação.

Serve em três casos: uma ligação «ver as avaliações» junto à nota no topo da ficha, um reenvio a partir de um e-mail do apoio ao cliente, e uma ligação a partir de um artigo do blogue para a secção técnica de um produto.

Tecnicamente, isso pressupõe que cada separador tenha um identificador e que o script abra o separador certo à chegada à página.

O módulo Separadores da Ficha de Produto para PrestaShop gere esta configuração no PrestaShop 8 e 9: criação de separadores personalizados com ordem por arrastar e largar, configuração por categoria de produto, conteúdo presente no HTML para continuar indexável, ocultação automática dos separadores vazios e passagem a acordeão em mobile.

Continuar a ler

Artigos relacionados