Ajustes de experiencia de usuario

Enlaces destacados

1. Documentación de Company XYZ sobre los ajustes de experiencia de usuario
2. Documentación de Shopify sobre el editor de temas

Videos útiles

Vídeo de Shopify Academy: Cómo personalizar tu tienda

Vídeo de Shopify Academy: Cómo personalizar tu tienda

Usa estos ajustes globales para que las interacciones de compra sean coherentes en todo el tema. Determinan cómo reciben los clientes la confirmación del carrito, inspeccionan las imágenes de productos, reconocen las tarjetas y los banners enlazados, navegan mientras se desplazan y pasan de una página a otra.

Comportamiento del carrito y la galería de productos

Elige el estilo de adición al carrito que mejor se adapte a tu flujo de compra:

1. Redirect to cart lleva a los clientes directamente a su carrito después de añadir un artículo, lo que resulta adecuado para las tiendas que quieren que los clientes revisen su pedido de inmediato.
2. Show mini cart confirma la adición en una superposición y mantiene a los clientes en la página actual. Esta es la opción predeterminada y permite seguir navegando.
3. Update icon only mantiene la interacción al mínimo al actualizar el indicador del carrito sin abrir una vista del carrito.

Elige si los clientes pueden abrir las imágenes de productos en una caja de luz. El zoom de la galería resulta útil cuando los clientes necesitan inspeccionar más de cerca los materiales, los detalles o las variaciones del producto; desactívalo si prefieres una experiencia de visualización de imágenes más sencilla.

Si usas el estilo de carrito que solo muestra el icono, asegúrate de que el indicador del carrito siga siendo fácil de ver. Los clientes deben poder saber que se ha añadido un artículo sin salir de la página.

Superposiciones y respuesta al pasar el cursor

Activa el efecto de desenfoque de la superposición para suavizar el contenido situado detrás de las superposiciones compatibles y llamar la atención sobre la interacción activa. Desactívalo si prefieres un tratamiento visual más nítido o quieres que el contenido de fondo siga siendo más visible.

El escalado de las tarjetas y los filtros de imagen añaden respuesta al pasar el cursor a las tarjetas y los banners enlazados de todo el tema. Ambos están activados de forma predeterminada. Úsalos para que el contenido enlazado sea más fácil de descubrir, pero mantén los efectos sutiles cuando las tarjetas utilicen imágenes detalladas o diseños con mucho texto.

Comportamiento del encabezado

Controla cómo se comporta el encabezado mientras los clientes se desplazan:

1. Fixed mantiene visibles en la parte superior de la pantalla la navegación, la búsqueda y los controles del carrito.
2. Hide on scroll reduce el encabezado mientras los clientes se desplazan hacia abajo y vuelve a mostrarlo cuando se desplazan hacia arriba. Este es el comportamiento predeterminado.
3. Off mantiene el encabezado en su posición normal, en la parte superior de cada página.

Un encabezado fijo permite acceder rápidamente a los controles principales. Un encabezado que se oculta deja más espacio para el contenido, lo que puede resultar especialmente útil en pantallas pequeñas.

Transiciones de página

Usa una transición de desvanecimiento para suavizar el cambio visual entre páginas. Deja las transiciones desactivadas si prefieres una respuesta de navegación inmediata o una experiencia de navegación más sencilla.

Consejo

Evita combinar transiciones de página intensas con efectos marcados al pasar el cursor y superposiciones. Limitar el movimiento simultáneo ayuda a los clientes a centrarse en los productos y las acciones de compra.

Notas de uso

1. Prueba la confirmación del carrito. Añade artículos desde las páginas de productos y las tarjetas de listado para confirmar que los clientes reciben una confirmación clara.
2. Facilita la inspección de productos. Activa el zoom de la galería cuando las imágenes de productos en primer plano ayuden a los clientes a tomar decisiones de compra.
3. Mantén predecible el contenido enlazado. Usa los efectos al pasar el cursor de forma coherente en las tarjetas de producto y los banners promocionales.
4. Comprueba el desplazamiento en dispositivos móviles. Previsualiza el comportamiento del encabezado seleccionado en pantallas pequeñas para equilibrar el espacio del contenido con el acceso a los controles de navegación y del carrito.
5. Usa el movimiento de forma intencionada. Elige una combinación moderada de transiciones, respuesta al pasar el cursor y efectos de superposición para lograr una experiencia de navegación más tranquila.