¿Quieres mejorar el posicionamiento de tus colecciones y la experiencia de tus clientes sin pagar suscripciones mensuales? En este tutorial te enseño a crear un sistema de Preguntas Frecuentes (FAQs) profesional, inyectando datos estructurados para Google y diseñando un acordeón dinámico.
📺 Mira el Tutorial en Vídeo
Antes de empezar con el paso a paso, te recomiendo ver este vídeo donde muestro el proceso en tiempo real:
1. El Objetivo: SEO + UX
Nuestro sistema persigue dos metas:
- Para Google (SEO): Inyectar Schema JSON-LD para conseguir Rich Snippets (resultados enriquecidos) que ocupen más espacio en las búsquedas.
- Para el Usuario (UX): Un diseño limpio y funcional mediante dos rutas: Nativa (manual) o Pro (dinámica).
2. Configuración Inicial (La Base de Datos)
Primero, prepararemos el backend de Shopify para que guarde nuestra información. Ve a Configuración > Datos personalizados > Colecciones y crea estos dos metacampos:
| Nombre | Clave (Namespace) | Tipo de Dato | Función |
| FAQ Schema | custom.faq_schema | JSON | El código “invisible” para Google. |
| FAQ Contenido | custom.faq_contenido | Texto Enriquecido | Las preguntas y respuestas que verá el cliente. |
3. Instalando el “Motor SEO”
Este código permitirá que Google lea tus FAQs independientemente del diseño que elijas.
- Crea un Snippet llamado
ct-faq-schema.liquid. - Usa este Prompt en Google AI Studio para generar el código:“Actúa como un desarrollador experto en Shopify Liquid. Necesito crear un archivo Snippet llamado
ct-faq-schema.liquidque renderice el metacampocustom.faq_schema. Solo debe ejecutarse en páginas de colección y si el campo no está vacío.” - Conexión: Pega la línea
{% render 'ct-faq-schema' %}dentro del archivotheme.liquid, justo antes de la etiqueta</head>.
4. Dos Caminos para mostrar tus FAQs
Opción A: La Ruta Nativa (Fácil)
Ideal si tienes pocas colecciones o quieres usar el diseño por defecto de tu tema (Dawn, Sense, etc.).
- Cómo: Crea una plantilla de colección diferente para cada categoría y añade la sección “Acordeón” o “Collapsible row”.
- El Truco: Como el tema no genera el código SEO automáticamente, pídele a una IA que convierta tus textos a JSON-LD y pégalo en el metacampo
faq_schema.
Opción B: La Ruta PRO (Dinámica y Escalable)
Esta es mi favorita. Usarás una sola plantilla para todas tus colecciones y el contenido cambiará mágicamente según la colección que visite el usuario.
- Rellena el contenido: En el admin de la colección, escribe tus FAQs en el metacampo de “Texto Enriquecido”.
- Crea el Acordeón: Añade una sección de “Liquid Personalizado” en tu editor de temas y usa este prompt maestro para obtener el código final (HTML, CSS y JS):
Prompt Maestro: “Actúa como Desarrollador Senior. Necesito un código para ‘Liquid Personalizado’ que convierta el metacampo
collection.metafields.custom.faq_contenidoen un acordeón funcional, con iconos ‘+’ que rotan y diseño optimizado para móvil…”
5. Validación: ¿Realmente funciona?
No asumas que está bien, ¡compruébalo!
- Prueba Visual: Entra desde tu móvil y verifica que los acordeones se despliegan suavemente.
- Prueba SEO: Pega la URL de tu colección en la Herramienta de Resultados Enriquecidos de Google. Si ves el check verde en “Preguntas frecuentes”, ¡enhorabuena! Estás listo para dominar las búsquedas.
🔄 ¿Qué pasa si actualizo mi tema?
¡No entres en pánico! Tus datos están a salvo en los metacampos. Solo tendrás que:
- Volver a pegar la línea del
{% render %}en eltheme.liquid. - Re-insertar el bloque de Liquid Personalizado en tu plantilla de colección.
¿Necesitas los prompts exactos para copiar y pegar? He preparado un documento con todos los códigos listos para usar que puedes encontrar en el enlace de la descripción de mi vídeo.
¿Te ha servido esta guía? ¡Déjame tus dudas en los comentarios o comparte este post con otro emprendedor de Shopify!
