Thunder Page Speed Optimizer ayuda inmediatamente con el rendimiento de la búsqueda. Reduce la presión de los scripts no críticos para que los cajones de búsqueda, los resultados predictivos y el descubrimiento de productos respondan más rápido. Instalar Thunder para una limpieza de velocidad automatizada, luego use las comprobaciones manuales a continuación para reparar la lógica del tema.
Solución rápida con Thunder
Search is not decoration. A shopper using search often knows what they want, which makes a broken or slow search bar a direct conversion leak. Heavy review widgets, trackers, page builders, and old app snippets can delay the first tap or stop the predictive dropdown from rendering.
Características del Trueno mejora la carga de scripts, la entrega de imágenes y Core Web Vitals automáticamente. No solucionará un formulario de búsqueda faltante, pero puede eliminar la carga de rendimiento que hace que la búsqueda en funcionamiento parezca interrumpida en el móvil.
Instalar TruenoPrimero revisa el formulario de búsqueda nativo de Shopify
Comience con la prueba más simple. Visita /search?q=test en tu escaparate. Si se carga la página de resultados de búsqueda, la búsqueda de Shopify funciona y es probable que el problema sea el formulario de encabezado, el cajón de búsqueda, la aplicación o el tema JavaScript. Si la página de resultados también está rota, compare su tema en vivo con una nueva vista previa de Dawn.
Un formulario de búsqueda básico de Shopify debe enviar una solicitud GET a /search con una entrada llamada q. Las ediciones de encabezado personalizadas a veces eliminan el nombre de entrada o reemplazan el botón de envío con JavaScript que nunca se activa.
<form action="{{ routes.search_url }}" method="get" role="search">
<input
type="search"
name="q"
value="{{ search.terms | escape }}"
placeholder="Buscar productos"
autocomplete="off">
<button type="submit">Buscar</button>
</form>En un tema real de Shopify, conserve los ayudantes de ruta de Shopify y asegúrese de que la entrada esté dentro del formulario. Si utiliza un cajón de búsqueda, verifique que el cajón contenga el mismo formulario válido en lugar de una entrada decorativa que dependa completamente de JavaScript.
Depurar solicitudes de búsqueda predictiva
La API de búsqueda predictiva de Shopify puede devolver productos, colecciones, páginas, artículos y sugerencias de consultas a medida que los compradores escriben. Cuando la búsqueda predictiva falla, abra DevTools, escriba en el cuadro de búsqueda y observe la pestaña Red para ver las solicitudes. /search/suggest.json o un equivalente con reconocimiento regional.
Una solicitud en buen estado devuelve JSON. Un 404 a menudo significa que el tema creó la URL incorrecta. Un 422 puede significar que los parámetros de consulta están mal formados. Una buena respuesta sin menú desplegable visible apunta a renderizar JavaScript o CSS.
const root = window.Shopify?.routes?.root || '/';
const url = root + 'search/suggest.json?q=' + encodeURIComponent(query)
+ '&resources[type]=product,collection';
const response = await fetch(url, { headers: { 'Accept': 'application/json' } });
const suggestions = await response.json();Los documentos para desarrolladores de Shopify recomiendan URL Ajax con reconocimiento regional, lo cual es importante para tiendas y mercados traducidos. Si la búsqueda solo falla en un mercado o idioma, pruebe la ruta de solicitud y los productos disponibles en ese mercado antes de editar el encabezado completo.
Reparar cajones y superposiciones de búsqueda móvil
Los fallos de la búsqueda móvil suelen ser visuales. La entrada de búsqueda se abre detrás del encabezado, los resultados aparecen debajo de las imágenes del producto o el comprador puede escribir pero no puede tocar un resultado. Inspeccione el cajón después de abrir, busque y verifique. índice z, eventos-puntero, desbordamientoy contenedores principales ocultos.
Pruebe también con aplicaciones emergentes, pancartas de cookies, widgets de chat, barras de anuncios fijos y aplicaciones de menú deshabilitadas en un tema duplicado. Estas herramientas pueden colocar elementos fijos invisibles encima de la capa de búsqueda. Para problemas relacionados con el encabezado, utilice el Guía de depuración del menú móvil de Shopify y lista de verificación del cajón del carrito.
.search-drawer {
position: fixed;
inset: 0;
z-index: 1100;
overflow-y: auto;
background: #fff;
}
.search-drawer [type="search"] {
min-height: 44px;
}Verifique la configuración de búsqueda y descubrimiento antes de culpar al tema
Si la barra de búsqueda se envía pero los resultados son deficientes o están vacíos, abre la aplicación Search & Discovery de Shopify. Verifique la disponibilidad de productos, los filtros, los grupos de sinónimos, las mejoras de productos y si los listados combinados o los productos ocultos están cambiando lo que aparece. El problema puede ser la configuración y no el código roto.
Para tiendas con catálogos grandes, la búsqueda también puede parecer interrumpida cuando los filtros de colección y los filtros de búsqueda sobrecargan la página. Combine esta guía con la guía de solución de problemas del filtro de recolección, guía de velocidad de la página de colección, y guía completa de optimización de velocidad de Shopify.
Si se eliminó una aplicación de búsqueda antigua, ejecute el lista de verificación de limpieza de restos de aplicaciones. Las aplicaciones de búsqueda suelen dejar fragmentos tema.liquido, secciones de encabezado o plantillas de búsqueda predictiva.
Solución manual frente a solución Thunder
| Problema | Corrección manual | Solución de trueno |
|---|---|---|
| Formulario de búsqueda roto | Restaurar el /search forma y Entrada q . | No reemplaza el marcado de tema que falta. |
| Retraso de búsqueda predictiva | Perfilar JavaScript y reducir las aplicaciones de la competencia. | Reduce automáticamente la presión del script no crítico. |
| Búsqueda de bloques de superposición móvil | Se corrigieron eventos de puntero, índice z y CSS del cajón. | Helps keep remaining widgets from delaying taps. |
| Impacto difícil de medir | Pruebe la búsqueda, INP y la ruta de conversión manualmente. | Empareja Thunder con pruebas de velocidad continuas. |
Para proyectos de rendimiento más grandes, compare Precios de trueno con optimización profesional de la velocidad de Shopify.
FAQ
¿Por qué no funciona mi barra de búsqueda de Shopify?
Las causas comunes son JavaScript de tema roto, falta una acción en el formulario de búsqueda, errores de API de búsqueda predictiva, una superposición de aplicación que bloquea los clics, configuraciones de búsqueda y descubrimiento o código personalizado que oculta el cajón de búsqueda en dispositivos móviles.
¿Por qué la búsqueda predictiva de Shopify no muestra resultados?
Predictive search can return empty results when the request URL is wrong, the theme is not using locale-aware URLs, product visibility is limited, or a JavaScript error stops the results from rendering.
¿Pueden las aplicaciones de Shopify romper la barra de búsqueda?
Sí. Las aplicaciones de búsqueda, los creadores de páginas, las aplicaciones de traducción, los encabezados fijos, las ventanas emergentes y los scripts de aplicaciones sobrantes pueden reemplazar o bloquear el formulario de búsqueda nativo.
¿Por qué la búsqueda funciona en computadoras de escritorio pero no en dispositivos móviles?
Mobile-only failures usually come from header drawer JavaScript, z-index overlays, hidden inputs, sticky bars, or CSS that places the search panel behind product media or the mobile menu.
¿La velocidad de la barra de búsqueda afecta las conversiones?
Sí. La búsqueda es una acción de alta intención. Los guiones lentos, los cajones retrasados o los resultados predictivos lentos hacen que los compradores abandonen el descubrimiento de productos antes de llegar a la página de un producto.
Vuelva a acelerar el descubrimiento de productos.
Thunder reduce el arrastre de secuencias de comandos para que la búsqueda, la navegación y el descubrimiento de productos respondan en dispositivos móviles.