Correcto
Productos complementarios
Muestre complementos relevantes con diseños adaptables y un estilo flexible de las tarjetas de producto.
- Documentación de Shopify sobre secciones y bloques
- Documentación de Company XYZ sobre ajustes de diseño
- Documentación de Company XYZ sobre ajustes de los controles de la presentación de diapositivas
- Documentación de Company XYZ sobre ajustes de encabezado
- Documentación de Company XYZ sobre ajustes de las tarjetas de producto
- Documentación de Company XYZ sobre ajustes de tarjetas
- Documentación de Company XYZ sobre ajustes de espaciado de sección
- Documentación de Company XYZ sobre ajustes de fondos de sección
- Documentación de Company XYZ sobre ajustes de separadores
- Documentación de Company XYZ sobre ajustes de visibilidad
- Documentación de Company XYZ sobre ajustes de anchos de diseño
Use esta sección para mostrar productos que combinan bien con el producto actual, como accesorios, paquetes o artículos de reposición. Funciona mejor cuando desea aumentar las compras adicionales sin interrumpir el flujo principal de compra. Para obtener una visión general más amplia de cómo funcionan las secciones del tema, consulte la documentación de Shopify sobre secciones y bloques
Esta sección solo muestra productos que se han configurado como recomendaciones complementarias en la aplicación Search & Discovery.
Los productos que están agotados o que ya están en el carrito se excluyen automáticamente de la lista.
Ajustes básicos
Sección titulada «Ajustes básicos»Use Number of items para controlar cuántas recomendaciones aparecen. Si desea que la sección devuelva el conjunto completo disponible, use 0 para permitir todos los artículos coincidentes hasta el límite de la sección.
Un número menor de productos mantiene el área compacta cerca del formulario de compra. Un número mayor tiene más sentido cuando desea una experiencia de navegación más completa en una cuadrícula o presentación en carrusel más amplia.
Ajustes de layout
Sección titulada «Ajustes de layout»Estos ajustes controlan cómo se distribuyen las recomendaciones en escritorio, tableta y móvil. Para un comportamiento de layout compartido, consulte la Configuración de diseño.
Puede elegir un layout distinto para cada dispositivo, lo cual es útil cuando desea una cuadrícula fácil de comparar en pantallas grandes y una presentación en carrusel fácil de deslizar en pantallas más pequeñas. Los ajustes de columnas ayudan a equilibrar el tamaño de la tarjeta con la cantidad de productos que los clientes pueden ver a la vez.
Si no necesita un layout independiente para tableta, deje que la tableta siga la configuración de escritorio para que la sección sea más fácil de gestionar.
Ajustes de presentación en carrusel
Sección titulada «Ajustes de presentación en carrusel»Cuando cualquier dispositivo usa un layout de presentación en carrusel, estos ajustes controlan cómo se desplazan los clientes por las recomendaciones. Para opciones de interacción compartidas, consulte la referencia de controles de presentación en carrusel.
La animación predeterminada es la opción más flexible para navegar por varias tarjetas. Fade crea una presentación más simple, de un elemento a la vez, que resulta más tranquila pero reduce la cantidad de contenido que se puede mostrar al mismo tiempo.
La reproducción automática puede añadir movimiento, pero normalmente conviene usarla con cuidado en las recomendaciones de productos. Si la activa, elija un intervalo que deje tiempo suficiente para leer los nombres de los productos y los precios.
La navegación, la paginación y las vistas previas de la siguiente diapositiva ayudan a indicar que hay más productos disponibles. La vista previa de la siguiente diapositiva es especialmente útil en dispositivos táctiles, pero no se aplica cuando se usa la animación fade.
La animación Fade fuerza una presentación de una sola diapositiva. También desactiva la paginación y las vistas previas de la siguiente diapositiva.
Ajustes estándar de sección
Sección titulada «Ajustes estándar de sección»Ajustes de encabezado
Sección titulada «Ajustes de encabezado»La referencia de ajustes de encabezado cubre los controles compartidos de encabezado que se usan aquí. En esta sección, el encabezado introduce el área de recomendaciones con un título, un subtítulo opcional, texto de apoyo y un botón opcional.
Mantenga el encabezado breve para que los productos sigan siendo el centro de atención. Añada un botón solo cuando ofrezca un siguiente paso claro, como explorar una colección relacionada más amplia.
Ajustes de tarjeta
Sección titulada «Ajustes de tarjeta»La referencia de ajustes de tarjetas de producto y la referencia de ajustes de tarjeta explican los controles compartidos que se usan aquí. Estos ajustes le permiten sustituir la presentación habitual de la tarjeta de producto solo para esta sección.
Úselos para hacer que los productos complementarios se vean más sencillos, más compactos o más promocionales que las tarjetas de otras partes. Los ratios de imagen uniformes suelen ofrecer el resultado más limpio, especialmente cuando varios productos aparecen uno al lado del otro.
Las opciones de CTA y selector de variante cambian cuánta acción ocurre directamente en la sección. Si activa la selección de variantes, asegúrese de que las opciones sean fáciles de entender de un vistazo.
Los colores de superposición del banner solo importan cuando el estilo de la tarjeta está configurado como Banner. Para cualquier cambio de color de la tarjeta, compruebe cuidadosamente el contraste para que los títulos, los precios y las acciones sigan siendo legibles.
Ajustes de espaciado
Sección titulada «Ajustes de espaciado»La referencia de ajustes de espaciado cubre los controles de espaciado compartidos que se usan en esta sección. Use el espaciado para controlar cuán cerca quedan las recomendaciones del contenido del producto circundante.
Un espaciado más reducido ayuda a que la sección se sienta conectada al área del producto principal. Un espaciado mayor funciona mejor cuando desea que se perciba como un bloque de contenido independiente.
Ajustes de fondo de sección
Sección titulada «Ajustes de fondo de sección»La referencia de ajustes de fondo de sección explica las opciones de fondo compartidas que se usan aquí. Puede añadir un color, un degradado, una imagen o un video para hacer que el área de recomendaciones destaque.
Esto funciona mejor cuando desea un separación visual más marcada del resto de la página de producto. Si añade una imagen o un video de fondo, mantenga las tarjetas fáciles de leer y evite fondos que compitan con las imágenes del producto.
Ajustes de separador
Sección titulada «Ajustes de separador»La referencia de ajustes de separador cubre los controles de línea compartidos que se usan aquí. Los separadores superior e inferior dan más estructura a la sección sin añadir un tratamiento de fondo completo.
Esta es una buena opción cuando la página ya tiene suficiente contraste visual y solo necesita un límite ligero alrededor de las recomendaciones.
Ajustes de visibilidad
Sección titulada «Ajustes de visibilidad»La referencia de ajustes de visibilidad explica los controles de visualización adaptables compartidos. En esta sección, son más útiles cuando desea distintas estrategias de recomendaciones en escritorio y en móvil.
Úselos con cuidado para que los clientes no pierdan el acceso a sugerencias útiles de complementos en los dispositivos que más importan para su tienda.
Ajustes de ancho
Sección titulada «Ajustes de ancho»La referencia de ajustes de ancho cubre los controles de ancho compartidos que se usan aquí. El ancho del contenido afecta a cuántas tarjetas caben cómodamente en una fila, mientras que el ancho de la sección importa más cuando usa un fondo o desea un tratamiento visual más amplio.
Los layouts más amplios suelen ser adecuados para conjuntos de productos más grandes y cuadrículas de varias columnas. Los anchos más estrechos pueden ayudar a centrar la atención en un número menor de recomendaciones.
Notas de uso
Sección titulada «Notas de uso»- Configure primero las recomendaciones. Si la sección aparece vacía, confirme que se han asignado productos complementarios en la aplicación Search & Discovery. Si no hay recomendaciones elegibles disponibles, la sección no forzará una experiencia de estado vacío completa.
- Elija el layout por dispositivo. Revise tanto el layout de escritorio como el de móvil, ya que los controles de cuadrícula y presentación en carrusel pueden cambiar la alineación, la visibilidad, la navegación y la cantidad de contenido que se muestra a la vez.
- Mantenga los valores predeterminados cuando quiera un estilo de reserva. Deje sin configurar los colores de fondo, los degradados y los medios si desea que la sección herede un aspecto más sencillo. Las anulaciones explícitas hacen que el área sea más autónoma.
- Revise los medios con cuidado. Si usa medios distintos para escritorio y móvil, compruebe el recorte, la legibilidad y la carga para que las tarjetas de producto sigan viéndose claras en ambas vistas.
- Previsualice con productos reales. Pruebe la sección con productos que tengan varias recomendaciones para confirmar el espaciado, los recuentos y el comportamiento de la presentación en carrusel.