O GemPages V7 não oferece suporte à divisão automática da descrição do produto em itens de acordeão com base em tags de cabeçalho, como no V6. No entanto, você pode obter o mesmo resultado preparando a descrição do seu produto Shopify com tags de cabeçalho e adicionando um trecho de código personalizado a cada item de acordeão. Este guia explica todo o processo para que você possa implementá-lo por conta própria, sem precisar da ajuda da equipe técnica.
Visão geral
Este método funciona dividindo a descrição do seu produto em várias seções usando tags de cabeçalho HTML. O elemento Acordeão exibirá cada seção de acordo com a ordem, utilizando um trecho de código personalizado. Você pode usar qualquer nível de cabeçalho (H1 a H6). O trecho de código utiliza Por exemplo, você pode substituí-lo por qualquer tag de cabeçalho que utilize na descrição do seu produto.
Etapa 1: Prepare a descrição do produto no Shopify
- Acesse o painel de administração do Shopify → Produtos → abra seu produto.
- No campo Descrição, divida seu conteúdo em seções separadas.
- Insira uma tag de título antes de cada seção. Você deve usar o mesmo tipo de título consistentemente (H1–H6). O código detectará qualquer tag de título que você usar.
Exemplo de estrutura:
Material
Detalhes sobre o material…
Guia de Tamanhos
Detalhes de tamanho…
Garantia
Informações sobre a garantia…
Se preferir usar H2, H3, H5, etc., basta substituir. com a tag de cabeçalho de sua preferência e ajuste o código posteriormente.
Passo 2: Adicione um elemento de acordeão no GemPages
- Abra o editor GemPages (V7).
- Arraste e solte o elemento Acordeão na sua página.
- Crie quantos itens de acordeão forem necessários. Cada item exibirá uma seção da descrição do seu produto.
Passo 3: Insira o trecho de código personalizado
Você deverá inserir o mesmo trecho de código em cada item do acordeão. Em seguida, para cada aba, você só precisará alterar o valor de `secNum` dependendo da seção que deseja exibir.
Como inserir:
1. Selecione um item do acordeão.
2. Na barra lateral esquerda, abra Conteúdo → Código Personalizado.
3. Cole o trecho de código completo.
|
{% assign secNum = 2 %} {% assign descSec = product.description | split: ' ' %} {% assign gPDCount = 0 %} {% assign chosenDescSec = ” %} {% for sec in descSec %} {% assign testDescSec = seg | split: ' ' %} {% if testDescSec[1] %} {% assign testDescSec = testDescSec[1] %} {% outro %} {% assign testDescSec = testDescSec[0] %} {% fim se %}
{% assign checkSec = testDescSec | strip_html %} {% assign checkSec = checkSec | strip %}
{% assign isMediaSec = false %} {% if testDescSec contains 'img' or testDescSec contains 'video' or testDescSec contains 'iframe' %} {% if testDescSec contains 'src' %} {% assign isMediaSec = true %} {% fim se %} {% fim se %}
{% if checkSec != ” or isMediaSec %} {% assign gPDCount = gPDCount | plus: 1 %} {% if gPDCount == secNum %} {% assign chosenDescSec = testDescSec %} {% quebrar %} {% fim se %} {% fim se %} {% endfor%}
{% if chosenDescSec %} {{ chosenDescSec | strip }} {% outro %} {{ product.description | strip }} {% fim se %} </div> |
Passo 4: Ajuste a tag de cabeçalho
O código usa Por exemplo, porque é o título mais comum usado em descrições de produtos.
Se a descrição do seu produto usar um título diferente, substitua-o. com a sua tag de cabeçalho dentro desta parte:
{% assign descSec = product.description | split: '' %}
Exemplos:
Se a sua descrição do Shopify usar , alterar para:
{% assign descSec = product.description | split: '' %}
Se a sua descrição usar , alterar para:
{% assign descSec = product.description | split: '' %}
Passo 5: Defina o número da seção para cada item do acordeão.
A variável secNum controla qual seção aparece dentro de cada item do acordeão.
Por exemplo:
Aba de acordeão 1 → secNum = 1
Aba de acordeão 2 → secNum = 2
Aba de acordeão 3 → secNum = 3
Para editar este número, modifique esta parte:
{% assign secNum = 1 %}
Altere apenas o número de cada aba.
Etapa 6: salvar e visualizar
- Clique em Salvar no Editor do GemPages.
- Visualize a página do seu produto.
- Confirme se cada item do acordeão exibe a seção correta da descrição do seu produto.
Obrigado por seus comentários