Productos destacados

Enlaces destacados

1. Documentación de Shopify sobre secciones y bloques
2. Documentación de Company XYZ sobre ajustes de diseño
3. Documentación de Company XYZ sobre ajustes de controles de presentación de diapositivas
4. Documentación de Company XYZ sobre ajustes de encabezados
5. Documentación de Company XYZ sobre ajustes de tarjetas de producto
6. Documentación de Company XYZ sobre variantes de producto
7. Documentación de Company XYZ sobre ajustes de espaciado de sección
8. Documentación de Company XYZ sobre ajustes de fondos de sección
9. Documentación de Company XYZ sobre ajustes de separadores
10. Documentación de Company XYZ sobre ajustes de visibilidad
11. Documentación de Company XYZ sobre ajustes de anchos de diseño

Videos útiles

Vídeo de Shopify Academy: Personalizar tu tienda

Vídeo de Shopify Academy: Personalizar tu tienda

Use Featured products para destacar un conjunto específico de artículos en cualquier lugar de la página. Es ideal para ediciones seleccionadas como novedades, selecciones de temporada, guías de regalo o llamadas destacadas de campaña, cuando desea tener control total sobre qué productos aparecen. Para obtener una visión general más amplia de cómo funcionan las secciones y los bloques, consulte documentación de Shopify sobre secciones y bloques

Ajustes principales

Empiece por seleccionar los productos que desea destacar. Como esta sección está seleccionada manualmente, funciona mejor cuando desea una mezcla de productos deliberada en lugar de un feed que cambia automáticamente.

Consejo

Use esta sección cuando la línea exacta de productos sea importante. Si desea que los productos se actualicen automáticamente a medida que cambia una colección, use en su lugar una sección basada en colecciones.

Ajustes de diseño

Los ajustes de diseño controlan cuántas tarjetas de producto aparecen en escritorio, tableta y móvil, y si cada dispositivo usa un diseño de cuadrícula o de presentación. Esto le da mucha flexibilidad cuando desea filas fáciles de comparar en pantallas grandes y una navegación deslizable en pantallas más pequeñas. Para obtener detalles sobre el control del diseño, consulte documentación de Company XYZ sobre ajustes de diseño.

Las columnas de tableta pueden seguir el ajuste de escritorio cuando el valor de tableta se deja en 0. Esto es útil cuando desea un único diseño coherente para pantallas grandes sin gestionar un recuento de tabletas independiente.

Elija los recuentos de columnas según la cantidad de detalle del producto que deba mostrar cada tarjeta. Menos columnas dan más espacio a las imágenes, los títulos y las acciones del producto, mientras que recuentos más altos crean un diseño de merchandising más denso.

Si muestra más detalles en la tarjeta, evite aumentar demasiado el número de columnas. Los diseños densos pueden dificultar la lectura de la información y las acciones del producto, especialmente en tableta y móvil.

Ajustes de presentación

Los ajustes de presentación controlan el movimiento, la reproducción automática, el bucle, la navegación, la paginación y el comportamiento de vista previa de diapositivas cuando el diseño de presentación está habilitado en un dispositivo. Estos ajustes son más útiles cuando desea una experiencia de navegación más guiada que una cuadrícula de productos fija. Para obtener detalles sobre el control de la presentación, consulte documentación de Company XYZ sobre controles de presentación.

El estilo de animación es la decisión principal. Desvanecer crea una presentación más limpia, de un elemento a la vez, mientras que la animación predeterminada es mejor cuando desea que varios productos sean visibles dentro del mismo flujo de carrusel.

La reproducción automática puede añadir movimiento, pero no debe acelerar el descubrimiento de productos. Un retraso de reproducción automática más lento suele funcionar mejor cuando las tarjetas incluyen títulos de productos, extractos u opciones de variantes.

La navegación y la paginación ayudan a los usuarios a entender cuánto contenido hay disponible. Mostrar la vista previa de la siguiente diapositiva puede hacer que el carrusel resulte más interactivo, pero no está disponible con la animación de desvanecimiento.

La animación de desvanecimiento fuerza un diseño de una sola diapositiva y oculta algunas funciones de la presentación, como la paginación y las vistas previas de diapositivas. Use la animación predeterminada cuando desee un carrusel multitarjeta más tradicional.

Ajustes de color de tarjeta

Use estos ajustes para sustituir los colores de las tarjetas solo para esta sección. Son útiles cuando los productos destacados necesitan una apariencia específica de campaña sin cambiar las tarjetas de producto en el resto de la tienda.

Los ajustes de superposición de banner se aplican solo cuando el estilo de tarjeta está establecido en Banner. Para otros estilos de tarjeta, concéntrese en el fondo de la tarjeta, el borde, el encabezado y los colores del texto para que los detalles del producto permanezcan claros y legibles.

Precaución

Después de cambiar los fondos o las superposiciones de las tarjetas, compruebe el contraste del título y del texto en distintas imágenes de producto para que las tarjetas sigan siendo fáciles de leer.

Ajustes de color

Estos ajustes controlan los colores del icono, el encabezado y el subtítulo a nivel de sección. Úselos cuando el contenido de introducción deba coincidir con una paleta de campaña o diferenciarse del estilo de texto predeterminado.

Si también utiliza una imagen, un degradado o un video de fondo de sección, revise estos colores de texto después de colocar el fondo. El contraste que se ve bien sobre un fondo plano puede no mantenerse una vez que se añade contenido multimedia.

Ajustes estándar de sección

Ajustes de encabezado

Use los controles compartidos del encabezado para añadir estructura y contexto con un icono, un subtítulo, un encabezado, texto de apoyo y un botón opcionales. Esto puede mejorar la claridad y ayudar a que el grupo de productos parezca más intencional, especialmente en diseños editoriales o promocionales. Para obtener detalles sobre el control del encabezado, consulte documentación de Company XYZ sobre encabezados.

El botón del encabezado puede situarse encima o debajo del texto, con colocación independiente en móvil y un tratamiento móvil opcional de ancho completo. Mantenga el botón centrado en un único siguiente paso claro, como ver un rango de productos más amplio.

Ajustes de tarjeta

Use los controles compartidos de la tarjeta para sustituir la presentación predeterminada de la tarjeta de producto solo en esta sección. Puede ajustar el estilo de la tarjeta, la proporción de la imagen, la densidad del texto, el tratamiento del botón, la alineación del texto y el comportamiento del selector de variantes. Para obtener detalles sobre la tarjeta de producto, consulte documentación de Company XYZ sobre tarjetas de producto.

Este es el lugar principal para equilibrar el merchandising visual con el detalle del producto. Si la sección se centra en la imagen, simplifique el texto y las acciones; si la sección se centra en la comparación, mantenga los títulos y las llamadas a la acción coherentes y fáciles de revisar.

La visualización del selector de variantes requiere configuración adicional para funcionar correctamente. Para obtener detalles de configuración, consulte documentación de Company XYZ sobre variantes de producto.

Ajustes de espaciado

Use los controles compartidos de espaciado para ajustar el espacio por encima y por debajo de la sección en escritorio y móvil. Para obtener detalles sobre el control del espaciado, consulte documentación de Company XYZ sobre espaciado de sección.

Un espaciado mayor puede ayudar a que un grupo de productos destacados parezca más premium o autosuficiente, mientras que un espaciado más reducido funciona bien cuando esta sección da soporte al contenido cercano. El espaciado móvil independiente es útil si las tarjetas apiladas o los diseños de presentación hacen que la sección parezca demasiado alta.

Ajustes de fondo de sección

Use los controles compartidos de fondo para añadir un color, un degradado, una imagen o un video detrás de la sección. Para obtener detalles sobre el control del fondo, consulte documentación de Company XYZ sobre fondos de sección.

El contenido multimedia de fondo puede dar a la sección un aspecto más editorial, pero también afecta a la legibilidad. Use las superposiciones con cuidado y compruebe que el texto del encabezado y las tarjetas de producto sigan destacando claramente sobre el fondo.

Ajustes de separador

Use los controles compartidos de separador para añadir un divisor superior o inferior alrededor de la sección. Para obtener detalles sobre el control del separador, consulte documentación de Company XYZ sobre separadores.

Los separadores son útiles cuando esta sección se sitúa entre contenidos visualmente similares y necesita un límite más claro. Manténgalos sutiles si sus tarjetas o fondos ya crean una separación visual fuerte.

Ajustes de visibilidad

Use los controles compartidos de visibilidad para mostrar u ocultar la sección según el tamaño del dispositivo. Para obtener detalles sobre el control de visibilidad, consulte documentación de Company XYZ sobre visibilidad.

Esto es útil cuando su estrategia de merchandising difiere según el tamaño de pantalla. Si oculta la sección en un rango de dispositivos, asegúrese de que los mismos productos sigan apareciendo en algún lugar adecuado allí.

Ajustes de ancho

Use los controles compartidos de ancho para gestionar tanto el ancho del contenido como el ancho externo de la sección. Para obtener detalles sobre el control del ancho, consulte documentación de Company XYZ sobre anchos de diseño.

El ancho del contenido afecta a cuánto puede crecer el área de productos, mientras que el ancho de la sección importa más cuando utiliza fondos o cuando quiere que el contenedor exterior se extienda más. Los cambios de ancho son más fáciles de evaluar en la vista de la página en vivo, donde el espaciado y el comportamiento de borde a borde son más precisos.

Notas de uso

1. Cree una historia de producto clara. Elija productos que vayan juntos por tema, público o caso de uso, para que la sección parezca intencional.
2. Ajuste el diseño al objetivo. Use cuadrículas para una comparación más sencilla y diseños de presentación para una experiencia de navegación más guiada y apta para deslizar.
3. Revise ambas vistas del dispositivo. Escritorio y móvil pueden diferir en diseño, alineación, navegación y comportamiento del contenido multimedia, así que compruebe cada punto de interrupción después de hacer cambios.
4. Trate con cuidado las sustituciones de contenido multimedia. Las opciones separadas de contenido multimedia para escritorio y móvil pueden cambiar el recorte, la carga, el comportamiento de respaldo y la legibilidad, especialmente cuando intervienen fondos o superposiciones.
5. Mantenga proporcional el contenido de la tarjeta. Cuantas más columnas muestre, más simple debería ser cada tarjeta para que los títulos, los precios y las acciones sean fáciles de revisar.
6. Compruebe las acciones de comercio en contexto. Los detalles del producto, las variantes seleccionadas, la cantidad, la disponibilidad y las acciones de carrito configuradas pueden afectar a lo que los clientes pueden añadir o hacer desde la sección.