faq inteligente
Comprar
Demonstração em Tempo Real

CST - FAQ Inteligente (SEO Optimized)

Esta seção foi desenvolvida para oferecer um sistema de perguntas frequentes (FAQ) moderno, de alta performance e totalmente otimizado para os motores de busca (SEO). Ela utiliza um sistema de sanfona (accordion) em JavaScript puro e gera automaticamente dados estruturados para o Google.

Funcionalidades

  • Accordion Premium: Sistema de sanfona suave com animações de altura e ícones interativos (+ / -) que giram ao abrir.
  • Diferencial SEO (JSON-LD): Gera automaticamente o Schema FAQPage do Schema.org. Isso permite que suas perguntas apareçam diretamente nos resultados de busca do Google, aumentando sua taxa de cliques (CTR).
  • Totalmente Integrado: Utiliza os Esquemas de Cores (Color Schemes) nativos do tema Dawn/Shopify OS 2.0.
  • Performance: Sem dependências externas ou bibliotecas pesadas (Vanilla JS).
  • Customizável: Controle a largura máxima, espaçamentos e se permite abrir múltiplos itens simultaneamente.

Onde Encontrar os Arquivos

  1. Seção Principal: sections/cst-faq-inteligente.liquid
    • Contém o HTML semântico.
    • Contém o CSS moderno e responsivo.
    • Contém a lógica JavaScript do Accordion.
    • Contém o gerador dinâmico de Schema JSON-LD.

Como Configurar no Editor de Temas

Para adicionar e configurar a seção:

  1. Acesse o Editor de Temas do Shopify.
  2. Clique em Adicionar Seção na página desejada (Home, Produto, Página, etc).
  3. Procure por CST - FAQ Inteligente.
  4. No menu da direita, você pode configurar:
    • Título e Subtítulo: Textos de cabeçalho da seção.
    • Largura Máxima: Controla quão larga a sanfona fica na tela (padrão: 800px).
    • Permitir abrir vários simultaneamente: Se ativado, permite que o cliente abra várias perguntas ao mesmo tempo. Se desativado, ao abrir uma nova, a anterior fecha automaticamente.
    • Esquema de Cores: Selecione qual esquema de cores do seu tema (Scheme 1, 2, Accent, etc) a seção deve usar.
    • Espaçamento Superior/Inferior: Ajuste o padding para respiro visual.

Adicionando Perguntas:

  1. Dentro da seção, clique em Adicionar Bloco.
  2. Escolha o bloco Pergunta/Resposta.
  3. Preencha a pergunta (texto simples) e a resposta (aceita rich text, links e listas).

Detalhes Técnicos

Schema.org (SEO)

O código Liquid percorre todos os blocos adicionados e constrói um objeto JSON no padrão exigido pelo Google:

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [ ... ]
}

Isso garante que, assim que o Google indexar sua página, ele reconheça as perguntas e respostas estruturadas.

JavaScript (Accordion)

Utiliza um sistema de max-height animado com cubic-bezier para garantir uma transição suave, independente do tamanho do conteúdo da resposta. A lógica de aria-expanded é implementada para garantir acessibilidade.

Perguntas Frequentes sobre a Seção

Posso mudar as cores?

Sim! A seção respeita o Esquema de Cores que você selecionar. Se quiser cores específicas para o FAQ, recomendamos editar um esquema de cores global (ex: Esquema 3) nas configurações do seu tema e aplicá-lo à seção.

Posso colocar links na resposta?

Sim, o campo de resposta é um editor de texto rico (Richtext), permitindo links, negrito, listas e outros formatos básicos.