Correcto
Recomendaciones de productos
Añada sugerencias automáticas de productos relacionados con opciones flexibles de diseño y estilo de tarjeta.
- Documentación de Shopify sobre las recomendaciones de productos
- Documentación de Company XYZ sobre la sección de recomendaciones de productos
- Documentación de Company XYZ sobre los ajustes de diseño
- Documentación de Company XYZ sobre los ajustes de los controles de presentación
- Documentación de Company XYZ sobre los ajustes de color
- Documentación de Company XYZ sobre los ajustes de encabezado
- Documentación de Company XYZ sobre los ajustes de las tarjetas de producto
- Documentación de Company XYZ sobre las variantes de producto
- Documentación de Company XYZ sobre los ajustes de espaciado de sección
- Documentación de Company XYZ sobre los ajustes de fondo de sección
- Documentación de Company XYZ sobre los ajustes de separadores
- Documentación de Company XYZ sobre los ajustes de visibilidad
- Documentación de Company XYZ sobre los ajustes de ancho del diseño
Utilice esta sección para mostrar productos relacionados en las páginas de producto con recomendaciones generadas automáticamente. Es una forma práctica de añadir ventas cruzadas sin curar manualmente los productos de cada artículo, a la vez que le ofrece un gran control sobre el diseño, la presentación de las tarjetas y el estilo de la sección.
Las recomendaciones mejoran con el tiempo en función de los datos de productos y pedidos, y también pueden verse influenciadas a través de Search & Discovery. Para obtener más información sobre cómo Shopify gestiona las recomendaciones, consulte documentación de Shopify sobre recomendaciones de productos. Puede revisar la referencia de la sección en Recomendaciones de productos.
Ajustes principales
Sección titulada «Ajustes principales»El control principal a nivel de sección es Number of items. Úselo para limitar cuántos productos recomendados aparecen, o configúrelo en 0 cuando quiera que la sección devuelva tantos elementos como estén disponibles hasta el máximo integrado.
Los recuentos más bajos suelen funcionar mejor en diseños más compactos o cuando la sección aparece más abajo en la página. En diseños más grandes, un recuento más alto puede hacer que la sección se perciba más completa, especialmente cuando es probable que los clientes exploren más allá de los primeros elementos.
La sección puede mostrar menos productos que su límite cuando solo hay disponible un conjunto más pequeño de recomendaciones relevantes.
Ajustes de diseño
Sección titulada «Ajustes de diseño»Estos ajustes controlan cómo se organizan los productos recomendados en escritorio, tableta y móvil. Puede elegir entre diseños de cuadrícula y presentación por dispositivo, y después establecer el número de columnas para cada tamaño de pantalla.
Consulte documentación de Company XYZ sobre ajustes de diseño. En general, use más columnas cuando las tarjetas sean visualmente simples y menos columnas cuando incluyan títulos más largos, extractos, muestras o un estilo de llamada a la acción más marcado.
La tableta puede heredar el número de columnas del escritorio cuando se deja en 0. Eso es útil cuando quiere una configuración más sencilla, pero conviene revisar la tableta con cuidado si el diseño de escritorio ya es denso.
Un patrón habitual es usar cuadrícula en pantallas grandes para comparar rápidamente y presentación en móvil para facilitar la navegación horizontal. Si mantiene una cuadrícula en móvil, evite saturar las tarjetas para que los detalles del producto sigan siendo fáciles de revisar.
Ajustes de presentación
Sección titulada «Ajustes de presentación»Cuando el diseño de presentación está activado en cualquier dispositivo, estos ajustes controlan el movimiento, la reproducción automática, el bucle, la navegación, la paginación y las vistas previas de diapositivas. Le permiten decidir si la sección tiene un aspecto más editorial y pausado o más directo y navegable.
Consulte documentación de Company XYZ sobre controles de presentación. Utilice estos ajustes para facilitar la navegación, no para competir con los productos en sí.
La animación Fade es la mejor cuando quiere mostrar un producto a la vez. Como obliga a un diseño de una sola diapositiva y elimina algunas señales de navegación entre varias tarjetas, suele ser menos eficaz cuando los clientes necesitan comparar varias recomendaciones rápidamente.
La reproducción automática funciona mejor cuando el movimiento es sutil y el retardo da tiempo suficiente a los compradores para leer. En escritorio, pausar al pasar el cursor es una medida útil de seguridad cuando los clientes interactúan con las tarjetas.
La paginación es más útil cuando hay suficientes diapositivas como para justificar una orientación adicional. Mostrar una vista previa de la siguiente diapositiva también puede ayudar a indicar que hay más recomendaciones disponibles sin depender solo de las flechas o la paginación.
Ajustes de color
Sección titulada «Ajustes de color»Estos controles ajustan el contenido introductorio de la sección, incluido el icono, el texto del encabezado y el texto del subtítulo. Úselos cuando esta sección necesite más contraste o un énfasis ligeramente distinto del contenido circundante.
Consulte documentación de Company XYZ sobre ajustes de color. Esto es especialmente útil cuando añade un fondo personalizado y necesita que el área del encabezado se mantenga clara y legible.
Ajustes estándar de sección
Sección titulada «Ajustes estándar de sección»Ajustes de encabezado
Sección titulada «Ajustes de encabezado»Utilice los controles compartidos del encabezado para añadir una introducción opcional encima de las recomendaciones, incluida la alineación, el icono, el pie, el encabezado, el subtítulo y un botón opcional. Más información en documentación de Company XYZ sobre ajustes de encabezado.
Un encabezado es útil cuando la sección necesita contexto, por ejemplo, para presentar los productos como artículos relacionados o selecciones complementarias. El botón opcional funciona bien para enlazar a una lista de productos más amplia, siempre que el destino coincida claramente con las recomendaciones mostradas.
Ajustes de tarjeta
Sección titulada «Ajustes de tarjeta»Utilice los controles compartidos de tarjeta para sobrescribir la presentación predeterminada de la tarjeta de producto solo para esta sección. Más información en documentación de Company XYZ sobre ajustes de tarjeta de producto.
Aquí es donde puede hacer que las tarjetas de recomendaciones sean más visuales, más compactas o más centradas en texto, según la prominencia de la sección en la página. Si activa un selector de variantes, asegúrese de que la configuración de variantes admita el estilo de visualización que elija; la guía del selector de variantes está disponible en documentación de Company XYZ sobre variantes de producto.
Ajustes de espaciado
Sección titulada «Ajustes de espaciado»Utilice los controles compartidos de espaciado para ajustar el espacio por encima y por debajo de la sección. Más información en documentación de Company XYZ sobre espaciado de sección.
Aumente el espaciado cuando las recomendaciones deban sentirse como un bloque de contenido independiente. Redúzcalo cuando la sección deba mantenerse estrechamente conectada con el contenido cercano de la página de producto.
Ajustes de fondo de sección
Sección titulada «Ajustes de fondo de sección»Utilice los controles compartidos de fondo para añadir un color, degradado, imagen o vídeo detrás de la sección. Más información en documentación de Company XYZ sobre fondos de sección.
Los fondos pueden ayudar a separar las recomendaciones del resto de la página, pero también añaden peso visual. Si utiliza un fondo más intenso, compruebe que el contenido de la tarjeta y el texto del encabezado sigan destacando con claridad.
Ajustes de separador
Sección titulada «Ajustes de separador»Utilice los controles compartidos de separador para añadir una línea divisoria superior o inferior alrededor de la sección. Más información en documentación de Company XYZ sobre separadores.
Los separadores ayudan cuando esta sección se sitúa entre áreas densas de la página y necesita un límite más claro. Los estilos sutiles de separador suelen ser suficientes para los diseños de páginas de producto.
Ajustes de visibilidad
Sección titulada «Ajustes de visibilidad»Utilice los controles compartidos de visibilidad para decidir si esta sección aparece en todos los dispositivos o solo en escritorio o móvil. Más información en documentación de Company XYZ sobre ajustes de visibilidad.
Esto es útil cuando quiere distintas experiencias de recomendaciones según el dispositivo, como una cuadrícula de escritorio más amplia y una presentación móvil más sencilla. Si crea versiones separadas, asegúrese de que no resulten repetitivas.
Ajustes de ancho
Sección titulada «Ajustes de ancho»Utilice los controles compartidos de ancho para gestionar tanto el ancho del contenido como el ancho exterior de la sección. Más información en documentación de Company XYZ sobre anchos de diseño.
Los anchos más amplios pueden mostrar más productos a la vez, mientras que los anchos más estrechos suelen mejorar la concentración y la legibilidad. Previsualice los cambios de ancho tanto en la tienda online en vivo como en el editor, ya que la escala del diseño puede percibirse de forma distinta.
Notas de uso
Sección titulada «Notas de uso»- Prevea resultados ausentes. Las recomendaciones solo aparecen cuando existe un contexto de producto adecuado y suficientes elementos devueltos, por lo que la sección puede parecer más ligera de lo esperado en algunos productos.
- Revise ambas ventanas gráficas. Los diseños de escritorio y móvil pueden comportarse de forma distinta, especialmente con controles deslizantes, controles y medios, así que compruebe siempre ambos tamaños antes de publicar.
- Use los reemplazos con intención. Las opciones vacías o con estilo predeterminado suelen conservar el estilo alternativo del tema, mientras que los colores explícitos, los degradados o los medios personalizados hacen que la sección se sienta más independiente del resto de la página.
- Mantenga los medios legibles. Si usa medios distintos para escritorio y móvil, verifique el recorte, la carga y el contraste del texto para que la sección siga viéndose clara en todos los dispositivos.
- Haga que los estados sean fáciles de leer. Si la sección incluye interacción de tipo formulario o mensajes de validación, mantenga los estados de éxito y error sencillos y legibles para que los compradores puedan recuperarse rápidamente.