Thunder Page Speed Optimizer ayuda a que las páginas de colección sigan respondiendo al reducir el trabajo de scripts no críticos y mejorar la carga del escaparate. Instalar Thunder para una limpieza rápida automática, luego repare la configuración del filtro con los pasos a continuación.
Solución rápida con Thunder
El filtrado es una interacción de descubrimiento de productos. Si la página tarda demasiado en responder después de que un comprador elige el tamaño, el color, el precio, la marca o la disponibilidad, es posible que el filtro parezca roto incluso cuando la URL finalmente se actualice.
Características del Trueno reduce la presión de las secuencias de comandos y respalda Core Web Vitals más saludables. No creará metacampos faltantes, pero puede mejorar el entorno de rendimiento en torno al filtrado de colecciones.
Instalar TruenoVerifique la configuración del filtro de búsqueda y descubrimiento
Abre la aplicación Search & Discovery de Shopify y confirma que los filtros que esperas estén habilitados. Los filtros nativos de Shopify pueden usar disponibilidad, precio, tipo de producto, proveedor, opciones de producto, metacampos y etiquetas según su catálogo y tema. Si una fuente de filtro no está habilitada, el escaparate no puede mostrarla.
Luego prueba una colección que realmente contenga productos con esos valores. No se mostrará un filtro de color si la colección no tiene productos con una opción de color o metacampo. Un filtro de precios puede parecer inútil si todos los productos se encuentran en el mismo rango estrecho. Un filtro de etiquetas puede volverse ruidoso porque todas las etiquetas de productos pueden quedar expuestas.
Para filtros más limpios, prefiera metacampos y opciones de productos estructurados en lugar de etiquetas amplias. Si su configuración de Búsqueda y descubrimiento también afecta la búsqueda, utilice el Guía de solución de problemas de la barra de búsqueda de Shopify.
Verificar el formulario de filtro de tema y los parámetros de URL
Los temas modernos de Shopify representan filtros de colección.filtros y envíe opciones de filtro como parámetros de URL. Si una plantilla de colección personalizada eliminó el formulario de filtro, cambió los nombres de entrada o reemplazó enlaces nativos con JavaScript personalizado, es posible que los filtros hagan clic pero nunca se apliquen.
<form id="FacetFiltersForm" class="facets">
{% for filter in collection.filters %}
<fieldset>
<legend>{{ filter.label }}</legend>
{% for value in filter.values %}
<label>
<input
type="checkbox"
name="{{ value.param_name }}"
value="{{ value.value }}"
{% if value.active %}checked{% endif %}>
{{ value.label }} ({{ value.count }})
</label>
{% endfor %}
</fieldset>
{% endfor %}
</form>Después de hacer clic en un filtro, la URL debería actualizarse con los parámetros del filtro y la cuadrícula del producto debería coincidir. Si la URL cambia pero los productos no, inspeccione la representación de la sección de colección. Si la URL no cambia, inspeccione los errores de JavaScript y envíe los controladores.
Compatibilidad de temas de prueba y conflictos de aplicaciones
Duplica el tema en vivo y obtén una vista previa de un tema de Shopify nuevo si es necesario. Si los filtros funcionan en el tema nuevo pero no en el tema activo, el problema está dentro del código de colección personalizado, una aplicación de filtro, un creador de páginas o una aplicación incrustada. Deshabilite las incrustaciones de aplicaciones una a la vez y vuelva a probar la misma URL de colección.
Las aplicaciones de filtrado pueden ser útiles para la comercialización avanzada, pero a menudo agregan cuadrículas de productos renderizados en JavaScript, llamadas API adicionales y actualizaciones DOM más grandes. Si la aplicación se rompe o se carga lentamente, los compradores ven productos faltantes, controles giratorios atascados o filtros que se reinician después de cada clic.
Para páginas de colección con muchas aplicaciones, siga las guía de limpieza de scripts de aplicaciones, lista de verificación de restos de aplicaciones, y guía de velocidad de la página de colección.
Mantenga las páginas de colección grandes lo suficientemente rápidas como para filtrarlas
Los filtros se vuelven más difíciles de usar cuando las páginas de la colección muestran demasiadas tarjetas de productos, imágenes de gran tamaño, insignias de aplicaciones, estrellas de reseñas, widgets de adición rápida y scripts de personalización. Eso aumenta el tamaño del DOM, la carga útil de la red y el trabajo del hilo principal incluso antes de que el comprador haga clic en un filtro.
Utilice paginación o desplazamiento infinito razonable, cargue de forma diferida imágenes de productos en la mitad inferior de la página y evite cargar cada imagen variante en cada tarjeta de producto. Para la limpieza técnica, lea el guía completa de optimización de velocidad de Shopify, guía de tamaño excesivo de DOM, y guía de reducción de carga útil de red.
Después de cada corrección, prueba la misma colección en el móvil. El filtrado se acerca a la intención de compra: si los compradores no pueden limitar el catálogo rápidamente, se van antes de que las páginas de productos tengan la oportunidad de realizar una conversión.
Solución manual frente a solución Thunder
| Problema | Corrección manual | Solución de trueno |
|---|---|---|
| Falta filtro | Habilite la fuente en Search & Discovery y corrija los datos del producto. | No reemplaza la configuración del catálogo. |
| El clic en filtro no hace nada | Restaurar las entradas del formulario de filtro nativo y el comportamiento de envío. | Ayuda con la capacidad de respuesta del script, sin falta de marcado. |
| La aplicación de filtro ralentiza la página | Eliminar la sobrecarga de aplicaciones, reducir los scripts de tarjetas de productos, probar alternativas. | Reduce automáticamente la presión del script no crítico. |
| Retraso en cobros grandes | Optimice imágenes, paginación, tamaño DOM y widgets de aplicaciones. | Admite velocidad de página y limpieza de Core Web Vitals. |
Si la limpieza de la página de la colección va más allá de las soluciones rápidas, compare Precios de trueno con optimización profesional de la velocidad de Shopify.
FAQ
¿Por qué no funcionan los filtros de mi colección de Shopify?
The common causes are disabled Search & Discovery filters, an incompatible theme, missing filter form markup, product data problems, app conflicts, or JavaScript that prevents filter URLs from updating.
¿Por qué los filtros de Shopify no se muestran en algunas colecciones?
Los filtros dependen de los productos de esa colección y de las fuentes de filtro que habilitó. Si una colección no tiene productos con esa opción, etiqueta, proveedor, tipo, rango de precios o valor de metacampo, es posible que ese filtro no aparezca.
¿Pueden las etiquetas de productos ensuciar los filtros de Shopify?
Sí. Los filtros de etiquetas pueden exponer todas las etiquetas de productos. Para filtros de escaparate más limpios, utilice opciones de productos estructurados o metacampos siempre que sea posible.
¿Pueden los filtros de colección ralentizar Shopify?
Sí. Las colecciones grandes, los filtros de aplicaciones, las tarjetas de productos pesadas y el filtrado renderizado en JavaScript pueden agregar solicitudes de red, tamaño de DOM y trabajo del hilo principal.
¿Debería usar una aplicación para filtros de Shopify?
Usa Shopify Search & Discovery primero cuando cubra tus necesidades. Agregue una aplicación de filtro solo cuando necesite un comportamiento que el sistema nativo no pueda proporcionar y pruebe su impacto en el rendimiento antes de publicarla.
Mantener el filtrado de colecciones receptivo.
Thunder reduce la carga del script en torno al descubrimiento de productos para que los compradores puedan filtrar, comparar y comprar más rápido.