Ir al contenido

Productos complementarios

Promocione productos complementarios relacionados con diseños flexibles y estilo de tarjeta apto para ventas cruzadas.

Muestre productos complementarios relacionados junto al producto actual para fomentar pedidos más grandes. Este bloque usa la configuración de sus productos complementarios para mostrar artículos relevantes mientras oculta automáticamente los productos no disponibles y los productos que ya están en el carrito. Para ver cómo se organizan los bloques en los temas, consulte documentación de Shopify sobre secciones y bloques

Este bloque depende de que los datos de productos complementarios estén configurados en la aplicación Search & Discovery. Si no aparece nada, compruebe que se hayan asignado productos relacionados para el producto que está viendo.

Use el número de elementos para controlar cuántas opciones muestra a la vez. Establecer el número en 0 devuelve todas las coincidencias disponibles, hasta 50, lo que puede funcionar bien para catálogos amplios, pero puede resultar recargado si las tarjetas de producto muestran mucho detalle.

Si quiere que este bloque actúe como un aviso rápido de complementos, mantenga la lista más reducida. Un conjunto más pequeño suele ser más fácil de revisar y parece más intencional.

Estos ajustes controlan cómo se organizan las recomendaciones en escritorio, tableta y móvil. Use una cuadrícula cuando quiera que se vean más productos a la vez, o una presentación cuando quiera una presentación más compacta y centrada.

Las opciones de columnas importan más en las cuadrículas y en las presentaciones con varias tarjetas. En tableta, establecer el número de columnas en 0 reutiliza el valor de escritorio, lo que resulta útil cuando quiere menos ajustes específicos por dispositivo.

Los números de columnas más altos funcionan mejor con tarjetas más sencillas. Si las tarjetas incluyen texto adicional, botones o selectores de variantes, menos columnas suelen facilitar la navegación por el bloque.

Cuando usa diseños de presentación, estos ajustes determinan cómo se mueve el bloque y cómo interactúan los compradores con él. Puede controlar el estilo y la velocidad de la animación, la reproducción automática, el bucle, la posición de la navegación, la paginación y las vistas previas de las diapositivas. Para obtener más información sobre estos controles, consulte controles de presentación.

Desvanecimiento es mejor cuando quiere destacar una recomendación a la vez. Obliga a un diseño de una sola diapositiva y desactiva el comportamiento de vista previa y los estilos de paginación que dependen de varias diapositivas visibles.

Si activa la reproducción automática, mantenga el movimiento suave y fácil de interrumpir. Pausar al pasar el cursor puede hacer que la reproducción automática resulte menos intrusiva en escritorio.

El encabezado opcional ayuda a explicar por qué estos productos van juntos y le da más estructura al bloque en la página. Un encabezado, un subtítulo o una subtitular corta puede hacer que las recomendaciones parezcan seleccionadas en lugar de automáticas.

También puede añadir un icono y un botón para dirigir a los compradores a una colección más amplia, una página de paquete o una guía de compra. Mantenga el texto del botón específico para que apoye las recomendaciones en lugar de competir con ellas.

Elija el tipo de encabezado para que encaje con el resto de la jerarquía de la página. Si la página ya tiene un encabezado principal sólido, normalmente encajará mejor un nivel de encabezado inferior. Para obtener más orientación, consulte encabezados e iconos.

Estos ajustes compartidos le permiten anular la presentación habitual de la tarjeta de producto para este bloque. Puede ajustar el estilo de la tarjeta, las proporciones de imagen, la densidad del texto, el tratamiento de la CTA, la alineación del texto y el comportamiento del selector de variantes para adaptarlo mejor a las recomendaciones de complementos.

Los estilos de tarjeta más sencillos suelen funcionar mejor cuando muestra varios productos a la vez. Si activa los selectores de variantes, asegúrese de que realmente ayuden a la decisión de compra en lugar de hacer que el bloque se vea demasiado cargado. Para configurar los selectores de variantes, consulte variantes de producto y, para un comportamiento de tarjeta más amplio, consulte tarjetas de producto.

Estos ajustes anulan la apariencia de la tarjeta solo dentro de este bloque. Son útiles cuando quiere que los productos complementarios destaquen frente a otras listas de productos sin cambiar el tema más amplio.

Los controles de superposición de banner solo se aplican cuando usa el estilo de tarjeta Banner. En caso contrario, céntrese en los colores de fondo, borde, encabezado y texto que mantengan fáciles de leer los precios, títulos y acciones. Para más información, consulte tarjetas.

Estos ajustes controlan los colores del icono y del texto a nivel de bloque alrededor del contenido del encabezado. Son más útiles cuando quiere que el área del encabezado se coordine con un fondo personalizado o con un estilo de campaña.

Compruebe bien el contraste si el bloque se sitúa sobre un fondo de color, imagen o video, para que los encabezados y el texto complementario sigan siendo legibles. Consulte colores.

El espaciado controla el espacio encima y debajo del contenido del bloque. Auméntelo cuando las recomendaciones necesiten más espacio, o redúzcalo cuando el bloque deba sentirse más vinculado a los detalles del producto cercanos.

Los cambios de espaciado son más visibles cuando también usa fondos o separadores. Consulte espaciado de sección.

Estos ajustes añaden un color, degradado, imagen o video detrás de todo el bloque. Pueden ayudar a destacar el área de recomendaciones, pero los fondos intensos también pueden hacer que el diseño se sienta más pesado si las tarjetas de producto ya contienen mucho detalle.

Los controles de superposición ayudan a mantener la legibilidad del texto en fondos de imagen o video. Los medios de fondo específicos para móvil son útiles cuando la imagen de escritorio se recorta mal en pantallas más pequeñas. Consulte fondos de sección y usar video.

Los separadores añaden una línea superior o inferior para dividir visualmente este bloque del contenido cercano. Funcionan bien cuando la página tiene varias áreas de contenido apiladas y necesita un poco más de estructura.

Si el espaciado o el contraste del fondo ya separan claramente el bloque, puede que no los necesite. Consulte separadores.

Los controles de visibilidad le permiten ocultar este bloque en escritorio o en móvil. Esto es útil cuando quiere una estrategia de recomendaciones o un diseño diferente en pantallas más pequeñas.

Si oculta el bloque en un rango de dispositivos, asegúrese de que los productos relacionados sigan siendo fáciles de descubrir en otra parte de la página. Consulte visibilidad.

El título del editor solo cambia cómo se etiqueta este bloque en la barra lateral del editor. Cámbiele el nombre cuando use varios bloques de estilo de recomendación para distinguirlos mejor mientras edita. Para ver opciones de personalización relacionadas, consulte documentación de Shopify sobre la personalización de secciones

  1. Configure primero las relaciones. Si el bloque aparece vacío, confirme que se hayan asignado productos complementarios para el producto actual.
  2. Mantenga la lista enfocada. Menos artículos suelen crear un área de recomendación más sólida y facilitan la toma de decisiones.
  3. Adapte el diseño a la densidad de las tarjetas. Use menos columnas o estilos de tarjeta más sencillos cuando las tarjetas incluyan texto adicional, botones o selectores de variantes.
  4. Use el movimiento con cuidado. La reproducción automática, el desvanecimiento y los ajustes de vista previa deben apoyar la navegación y no distraer de la página del producto.
  5. Pruebe ambos tamaños de ventana. Revise escritorio y móvil para asegurarse de que los controles, el espaciado y las opciones de medios sigan viéndose claros en cada diseño.
  6. Espere diferentes estados de producto. Compruebe el bloque con productos que cumplan los requisitos, artículos no disponibles y productos que ya están en el carrito para poder evaluar el resultado real.