La página de preguntas frecuentes de Kestrel había crecido tanto que los clientes pasaban de largo la respuesta que buscaban. El comerciante nos enseñó la página de ayuda de un competidor con un buscador en la cabecera y pidió lo mismo: escribir una palabra y ver solo las preguntas que coinciden.
Esta es la historia de esa búsqueda FAQ Shopify: el snippet, el error que hizo que la primera versión no encontrara nada en la tienda real y el arreglo, que resultó ser una lección sobre los scripts en línea de los temas de Shopify.
Sobre este caso práctico: es una composición basada en trabajo real con Shopify. El nombre de la marca y algunos detalles se han cambiado. El código, el error y el arreglo son exactamente como ocurrieron.
¿Por qué no usar la búsqueda de Shopify?
La búsqueda de la tienda de Shopify cubre productos, colecciones, páginas y artículos del blog. El texto que el comerciante escribe en los bloques de las secciones del tema, que es donde la mayoría de secciones de FAQ guardan sus preguntas, no forma parte de ese índice. Quien busca “retour” en la tienda encuentra productos, no la respuesta sobre devoluciones.
Sin embargo, las respuestas ya están en el HTML de la página. Filtrarlas en el navegador no necesita peticiones, ni app, ni índice. Los resultados aparecen mientras el cliente todavía escribe.
Versión uno: un snippet y una línea de render
El comerciante edita el tema en el editor de código, así que mantuvimos el cambio lo más pequeño posible: un snippet nuevo con el marcado, los estilos y el script, y una línea en la sección de FAQ para mostrarlo.
{%- render 'faq-search', section: section -%}
<div class="faqs ..."> <!-- the theme's existing FAQ markup -->El script es un pequeño elemento personalizado. En cada pulsación hace cuatro cosas:
- Normaliza el texto: minúsculas y sin acentos, para que “e” también encuentre “é”.
- Divide la búsqueda en palabras y conserva una pregunta solo si contiene todas, en el título o en la respuesta.
- Oculta una categoría entera, título incluido, cuando ninguna de sus preguntas coincide.
- Muestra un mensaje de “no se encontraron preguntas” con una invitación a contactar con soporte cuando no coincide nada.
Lo probamos con una copia del marcado de las FAQ en un navegador sin interfaz. Todas las búsquedas devolvían las preguntas correctas. Lo enviamos.
La captura de pantalla
La respuesta llegó con una captura. El comerciante había pegado una frase completa de una de las respuestas en el buscador. La página mostraba “no se encontraron preguntas” y, debajo, todas las preguntas seguían visibles. No se ocultaba nada y no se encontraba nada.
Ambos síntomas apuntaban a lo mismo: el script creía que la página no tenía preguntas. Abrimos la página real y preguntamos directamente al elemento. La página tenía dos grupos de FAQ con siete preguntas. La lista de grupos del propio buscador estaba vacía.
La causa: un script en línea que se ejecuta demasiado pronto
El snippet se muestra encima de las preguntas, y su etiqueta <script> está dentro del snippet. El navegador lee el HTML de arriba abajo. Al llegar al script define el elemento personalizado y, como <faq-search> ya está en el documento, su connectedCallback se ejecuta en ese instante. En ese momento el analizador todavía no ha llegado a las preguntas de abajo.
Nuestra primera versión buscaba los grupos en connectedCallback y los guardaba. Guardó una lista vacía, una vez y para siempre. La prueba pasó porque la página de prueba tenía el script después de las preguntas por casualidad.
El arreglo es un solo getter. En lugar de guardar los grupos al conectarse, el script los busca cada vez que el cliente escribe:
get groups() {
return Array.from(this.closest('.section').querySelectorAll('.faq'));
}Cuando alguien escribe, la página ya se ha leído entera. La búsqueda no cuesta casi nada con unas decenas de preguntas y además sigue funcionando cuando el editor de temas vuelve a renderizar la sección mientras el comerciante edita, algo que una lista guardada no haría.
Un segundo error, más silencioso
Al mover el código a su snippet definitivo encontramos otro problema. La regla CSS que ocultaba los elementos filtrados estaba escrita como .faq [data-faq-hidden], con un espacio. Eso oculta preguntas dentro de un grupo, pero no el grupo en sí, así que el título de una categoría podía quedarse sin nada debajo. Ahora la regla cubre ambos casos: .faq [data-faq-hidden], .faq[data-faq-hidden].
Probar donde funciona de verdad
Esta vez probamos en la propia página real, ejecutando la lógica corregida en el navegador contra el marcado auténtico, antes de pedir al comerciante que cambiara nada.
| “levertijd” | Solo la pregunta sobre el plazo de entrega |
| “garantie” | Las preguntas de garantía de dos categorías distintas |
| “€70 gratis” | Solo la pregunta sobre gastos de envío, encontrada por su respuesta |
| “retour” | Solo la pregunta sobre devoluciones, la otra categoría oculta |
| “xyz” | Nada, con el mensaje “no se encontraron preguntas” |
Lo que aprendimos
- Prueba en el orden que usa la página real. Un elemento personalizado definido en un script en línea solo ve el HTML que tiene encima.
- No guardes consultas al DOM en
connectedCallbacksalvo que sepas que el contenido ya existe. Un getter es más simple que esperar aDOMContentLoadedy resiste los renderizados del editor de temas. - Cuando un comerciante envía una captura, lee los síntomas juntos. “Sin resultados” más “nada oculto” acotó el error antes de abrir la consola.
La búsqueda acabó formando parte de una página de ayuda completa; lo contamos en nuestro caso práctico de plantilla de página de FAQ en Shopify. La oferta en la ficha de producto que hicimos para la misma tienda está en el selector compra uno y llévate otro gratis. Si tus FAQ u otra parte de tu tema necesitan un trabajo así, consulta nuestro servicio de desarrollo de temas Shopify.
Preguntas frecuentes
¿Una barra de búsqueda en las FAQ perjudica el SEO?
No. Todas las preguntas y respuestas siguen en el HTML. Solo se ocultan en el navegador del cliente después de que escriba una búsqueda.
¿Necesito una app para añadir búsqueda a las FAQ de Shopify?
No. Como las preguntas ya están en la página, un pequeño script puede filtrarlas. Es más rápido que una app y no tiene coste mensual.
¿Funciona con unas FAQ grandes?
Sí. Filtrar unos cientos de preguntas en el navegador es instantáneo. A partir de ahí, suele ser mejor para el cliente dividir las FAQ en varias páginas.
¿Busca también en las respuestas?
Sí. Cada pregunta se compara por título y texto de la respuesta, sin acentos, y todas las palabras de la búsqueda deben aparecer.