Correcto
Producto
Resalte un producto con controles flexibles de estilo de tarjeta, color y visibilidad.
Use este bloque para mostrar una sola tarjeta de producto donde quiera resaltar un artículo específico. Puede heredar el estilo de la tarjeta de producto de su tema o anularlo aquí cuando esta tarjeta necesite su propio diseño o tratamiento visual. Para una visión general más amplia de cómo funcionan los bloques en el editor de temas, consulte documentación de Shopify sobre secciones y bloques
Selección de producto
Sección titulada «Selección de producto»Elija el producto que este bloque debe mostrar. El resto de los ajustes del bloque determinan cómo aparece ese producto, por lo que este bloque funciona mejor cuando el producto seleccionado ya tiene una imagen destacada sólida y un texto de producto claro.
Ajustes estándar del bloque
Sección titulada «Ajustes estándar del bloque»Ajustes de tarjeta
Sección titulada «Ajustes de tarjeta»Estos ajustes controlan el diseño de la tarjeta, el recorte de la imagen, la presentación del texto, el tratamiento del botón y la visualización de variantes. Déjelos en Usar ajuste del tema cuando quiera que este bloque coincida con sus otras tarjetas de producto, o anúlelos cuando este producto necesite un énfasis diferente.
El estilo de la tarjeta es la decisión visual más importante. Los estilos de banner son adecuados para ubicaciones promocionales más grandes, mientras que los estilos más simples suelen ser más fáciles de adaptar a diseños más estrechos o filas de contenido mixto.
Las relaciones de imagen de escritorio y móvil se pueden configurar por separado. Si la tarjeta se ve equilibrada en escritorio pero la imagen se recorta de forma incómoda en pantallas más pequeñas, ajuste la relación móvil en lugar de cambiar el estilo general de la tarjeta.
El estilo del botón cambia cuán destacada se siente la acción de compra. En móvil se usa un tratamiento solo con icono, por lo que la imagen y el texto del producto aún deben hacer que la tarjeta se entienda sin depender de una etiqueta de botón larga.
Los ajustes de texto le permiten simplificar la tarjeta cuando el espacio es limitado. Las ubicaciones más grandes pueden admitir tanto el título como el extracto, mientras que las ubicaciones más pequeñas suelen funcionar mejor con texto solo de título.
La alineación vertical central del texto solo funciona con el estilo de tarjeta Banner.
Los selectores de variantes pueden hacer que la tarjeta sea más útil para productos con opciones significativas, pero solo cuando esas opciones están configuradas claramente y son fáciles de entender desde la propia tarjeta.
Para un comportamiento compartido más amplio, consulte la referencia de ajustes de tarjeta de producto.
Ajustes de color
Sección titulada «Ajustes de color»Estos ajustes anulan los colores de la tarjeta solo para este bloque. Úselos cuando quiera que un producto destacado sobresalga o cuando el fondo de la página circundante necesite un tratamiento de tarjeta diferente para una mejor contraste.
Los ajustes de superposición de banner solo se aplican al estilo de tarjeta Banner. Son útiles cuando las imágenes del producto son recargadas y necesita mejorar la legibilidad del texto sin reemplazar la imagen.
Lo mejor es ajustar juntos los colores de fondo, borde, encabezado y texto. Eso suele ofrecer un resultado más limpio que cambiar un solo color de forma aislada.
Para un comportamiento compartido de color de tarjeta, consulte la referencia de ajustes de tarjetas.
Ajustes de visibilidad
Sección titulada «Ajustes de visibilidad»Use los controles de visibilidad para mostrar este bloque en todas partes o ocultarlo en escritorio o móvil. Esto es útil cuando quiere una versión de una tarjeta de producto destacado para pantallas más grandes y una versión más simple o con un recorte diferente para pantallas más pequeñas.
Para más información sobre el control de visualización, consulte la referencia de ajustes de visibilidad.
Ajustes del editor
Sección titulada «Ajustes del editor»Use el título del editor para etiquetar el bloque claramente en la barra lateral. Esto es especialmente útil cuando un diseño incluye varios bloques de producto y quiere identificar cada uno rápidamente mientras edita.
Notas de uso
Sección titulada «Notas de uso»- Elija un producto sólido. Elija un producto con una imagen destacada clara y texto de apoyo conciso para que la tarjeta se lea bien de un vistazo.
- Use un producto que siga teniendo sentido si la imagen se recorta de forma más ajustada en pantallas más pequeñas.
- Mantenga legible la imagen principal del producto si planea anular los colores de la tarjeta o añadir una superposición.
- Ajuste las anulaciones al objetivo. Deje los ajustes compartidos de la tarjeta tal como están cuando quiera coherencia y anúlelos solo cuando este producto destacado necesite un papel visual más fuerte.
- Los valores en blanco o con estilo predeterminado suelen conservar el estilo de reserva.
- Los colores explícitos o las opciones de medios hacen que esta tarjeta se sienta más independiente del resto del diseño.
- Revise el móvil por separado. Compruebe el recorte de la imagen, la longitud del texto y la claridad del botón en pantallas más pequeñas antes de finalizar el bloque.
- Los controles móviles pueden cambiar la alineación, la visibilidad y el comportamiento de los medios en comparación con escritorio.
- Si los medios de escritorio y móvil son diferentes, revise ambas vistas para confirmar que la tarjeta sigue leyéndose con claridad.
- Use variantes solo cuando sea útil. Muestre muestras o botones tipo pastilla solo cuando mejoren la selección del producto directamente desde la tarjeta.
- Pruebe el contraste con cuidado. Cuando anule colores o superposiciones, asegúrese de que el texto del producto siga siendo fácil de leer en distintas imágenes y dispositivos.