Colección destacada

Enlaces destacados

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

Videos útiles

Vídeo de Shopify Academy: Personalizar tu tienda

Vídeo de Shopify Academy: Personalizar tu tienda

Usa esta sección para mostrar productos de una colección en una cuadrícula o presentación de diapositivas, con control de diseño independiente para escritorio, tableta y móvil. Es una buena opción para filas de productos en la página de inicio, destacados de categorías seleccionadas y funciones promocionales de colecciones.

Ajustes básicos

Empieza seleccionando la colección que quieres mostrar y, después, elige cuántos productos incluir. Si estableces el recuento de elementos en 0, se muestran todos los elementos disponibles de esa colección hasta el límite de la sección, lo que es útil para colecciones pequeñas pero puede hacer que la sección se vea recargada si el contenido de las tarjetas es detallado.

Para ver los detalles de configuración en el editor de temas, consulta documentación de Shopify sobre la personalización de secciones

Si quieres una presentación más ajustada y seleccionada, usa un recuento de elementos menor y deja que la sección actúe como una vista previa. Cuando el orden de los productos importe, asegúrate de que la propia colección esté organizada como quieres antes de usarla aquí.

Esta sección muestra productos de una colección, no una lista seleccionada manualmente. Si necesitas una selección precisa de productos de forma manual, usa en su lugar una sección creada para productos destacados.

Ajustes de diseño

Configuración de diseño controla cuántas tarjetas de producto aparecen y si se muestran como cuadrícula o presentación de diapositivas en cada tamaño de dispositivo. Esto facilita crear un diseño amplio, apto para comparaciones, en pantallas grandes y una experiencia de navegación más compacta en pantallas pequeñas.

La tableta puede heredar el número de columnas de escritorio si se deja en 0, lo que es útil cuando ambas vistas deben mantenerse alineadas. Si cambias un dispositivo al modo de presentación de diapositivas, revisa cuántas tarjetas permanecen visibles a la vez para que el texto, los precios y las imágenes de los productos sigan siendo fáciles de revisar de un vistazo.

Una configuración habitual es una cuadrícula de varias columnas en escritorio y tableta, con una presentación de diapositivas en móvil. Si las tarjetas de producto incluyen más texto u opciones de variante, los diseños en cuadrícula suelen verse más claros que los carruseles más compactos.

Ajustes de presentación de diapositivas

Configuración de presentación de diapositivas se aplica siempre que la sección use el modo de presentación de diapositivas en cualquier dispositivo. Úsala para controlar el estilo de animación, la velocidad, la reproducción automática, la navegación, la paginación, el bucle y si parte de la siguiente diapositiva es visible.

La animación de desvanecimiento es el principal punto de decisión porque obliga a mostrar una sola diapositiva. Eso la hace mejor para destacar un producto a la vez que para permitir que los clientes comparen varios productos en la misma fila.

Consejo

Usa la animación predeterminada cuando quieras mostrar varias tarjetas en una fila deslizable. Usa el desvanecimiento cuando quieras una presentación más enfocada, de un producto a la vez.

La reproducción automática puede funcionar bien para filas de productos simples y muy visuales, pero es menos eficaz cuando los clientes necesitan tiempo para comparar los detalles del producto. Mostrar la siguiente diapositiva puede ayudar a indicar que hay más productos disponibles, aunque reduce el espacio disponible para la tarjeta actual.

Ajustes de color

Estos ajustes reemplazan los colores del encabezado de la sección para el icono, el texto principal y el subtítulo. Son más útiles cuando esta sección se coloca sobre un fondo personalizado o necesita una separación visual más marcada respecto al contenido circundante.

Mantén los colores del encabezado simples si los productos en sí deben seguir siendo el foco. Si también usas un fondo llamativo o un estilo de tarjeta promocional, demasiados cambios de color a la vez pueden hacer que la sección se vea visualmente recargada.

Ajustes estándar de sección

Ajustes de encabezado

Configuración de encabezado controla el contenido introductorio encima de la colección, incluida la alineación, el icono, el subtítulo, el encabezado, el texto de apoyo y un botón opcional. En esta sección, el encabezado es útil para enmarcar la colección con una etiqueta de categoría, un mensaje de campaña o un enlace para ver más productos.

Usa el botón para indicar un siguiente paso claro, como ver la colección completa. Mantén la etiqueta específica y revisa la posición y el ancho del botón en móvil si la sección ya tiene mucho contenido visual.

Ajustes de tarjeta

Configuración de tarjeta te permite reemplazar la presentación predeterminada de la tarjeta de producto solo para esta sección. Puedes ajustar el estilo de la tarjeta, la relación de imagen, el tratamiento del texto, el estilo de llamada a la acción, la alineación del texto y el comportamiento opcional del selector de variante.

Estos reemplazos son útiles cuando esta función de colección necesita un propósito distinto al de tus listados de productos estándar. Por ejemplo, una tarjeta con estilo de banner puede resultar más promocional, mientras que un estilo más simple puede ser mejor para revisar y comparar rápidamente.

Nota

Algunas opciones de la tarjeta funcionan mejor juntas. Por ejemplo, la alineación vertical central del texto solo se aplica a las tarjetas con estilo de banner, y en móvil se usa una acción de producto solo con icono para el ajuste de estilo del botón de la tarjeta.

Ajustes de espaciado

Configuración de espaciado controla el espacio por encima y por debajo de la sección en escritorio y móvil. En una fila de colección, el espaciado afecta a si la sección se percibe como una función independiente o como parte de un flujo de navegación más denso.

Usa un espaciado más ajustado cuando esta sección esté entre otras secciones centradas en productos. Aumenta el espaciado cuando quieras que la colección tenga una sensación más editorial o esté visualmente más separada.

Ajustes de fondo de sección

Configuración de fondo de sección te permite añadir un color de fondo, un degradado, una imagen o un vídeo detrás de la sección. Esto puede convertir una simple fila de productos en una función promocional más potente, especialmente cuando se combina con un encabezado.

Si usas fondos de imagen o vídeo, asegúrate de que las tarjetas de producto y el texto sigan siendo fáciles de leer. Las superposiciones son especialmente útiles cuando el fondo tiene un contraste fuerte o mucho detalle.

Precaución

Los fondos intensos pueden competir con las imágenes de los productos. Si los compradores tienen que esforzarse más para revisar los productos, simplifica el fondo o reduce su intensidad.

Ajustes de separador

Configuración de separador añade una línea opcional encima o debajo de la sección. Son útiles cuando quieres un límite sutil entre esta función de colección y el contenido cercano.

Usa los separadores con moderación si la sección ya tiene un fondo fuerte o un estilo de tarjeta distintivo. Por lo general, un divisor simple basta para mejorar la estructura sin añadir ruido visual.

Ajustes de visibilidad

Configuración de visibilidad controla si la sección aparece en escritorio, móvil o en ambos. Esto resulta útil cuando tu enfoque de comercialización para móvil debe diferir bastante del diseño de escritorio.

Úsalo para diseños alternativos deliberados en lugar de pequeños ajustes visuales. Si el contenido es esencialmente el mismo en ambas versiones, por lo general es más fácil mantener una sola sección adaptable bien ajustada.

Ajustes de ancho

Configuración de ancho controla el ancho máximo del contenido y el ancho exterior de la sección. En esta sección, los cambios de ancho afectan a la densidad de las tarjetas, al espacio de respiración de la presentación de diapositivas y a lo destacada que se siente la colección en pantallas grandes.

Los diseños más anchos pueden admitir más columnas o tarjetas de producto más grandes, mientras que los diseños más estrechos pueden hacer que una colección seleccionada se sienta más enfocada. Si usas un fondo de sección de ancho completo o full-bleed, previsualiza el resultado en la tienda online en directo, porque el encuadre del editor puede hacer que los cambios de ancho resulten engañosos.

Notas de uso

1. Haz que el diseño coincida con el objetivo. Usa una cuadrícula para comparar productos fácilmente y una presentación de diapositivas para una presentación más compacta o editorial.
2. Limita la cantidad de productos cuando sea necesario. Una selección más pequeña suele crear una fila destacada más clara que mostrar todos los elementos disponibles.
3. Usa los reemplazos de tarjeta con un propósito. Sustituye el estilo de la tarjeta solo cuando esta colección necesite sentirse realmente distinta de tus listados de productos predeterminados.
4. Trata el desvanecimiento como un modo de enfoque. El desvanecimiento funciona mejor cuando quieres que los compradores se centren en una tarjeta de producto a la vez, en lugar de revisar varias simultáneamente.
5. Comprueba cada tamaño de dispositivo. Revisa juntos los recuentos de columnas, el comportamiento de la presentación de diapositivas y la colocación del botón del encabezado para que la sección se sienta equilibrada en escritorio, tableta y móvil.
6. Revisa juntos las opciones de medios y color. Los medios separados para escritorio y móvil, los reemplazos de color explícitos y los medios de fondo pueden cambiar el recorte, la legibilidad y el estilo de reserva, así que prueba la sección en ambos tamaños de vista.
7. Mantén intencional el contenido de navegación. Si el encabezado o los controles relacionados llevan a los compradores a menús, cajones o enlaces anidados, asegúrate de que los elementos reordenados u ocultos no bloqueen el recorrido que esperas que sigan los clientes.
8. Prueba las acciones de comercio en contexto. La selección de productos, la elección de variantes, la cantidad y la disponibilidad pueden cambiar lo que los clientes pueden hacer desde la tarjeta, así que verifica el resultado con los productos que planeas destacar.