Ir al contenido

Icono con texto

Destaca una característica, beneficio o señal de confianza con un icono, un texto breve y un enlace opcional.

Usa este bloque para destacar una sola característica, beneficio o señal de confianza con un icono pequeño y una breve línea de texto. Funciona mejor para mensajes rápidos y fáciles de escanear, como ventajas de envío, beneficios del producto, garantías o detalles de materiales.

Para más contexto sobre cómo encaja este tipo de contenido en un tema, consulta la documentación de Shopify sobre secciones y bloques

Empieza con el icono y el texto. Puedes usar un emoji o un nombre de icono, lo que facilita que coincida con el estilo del resto de tu contenido. Si dejas el icono en blanco, el bloque muestra solo texto.

Mantén el texto breve y específico. Normalmente funcionan mejor las frases cortas que las oraciones completas, sobre todo cuando quieres que los compradores entiendan el mensaje de un vistazo.

También puedes añadir un enlace si el destaque debe llevar a más detalles, como una política, una guía o una página de apoyo. Abrir ese enlace en una nueva pestaña puede ser útil cuando no quieres que los compradores pierdan su lugar.

Estos ajustes controlan la alineación horizontal por separado para escritorio y móvil. Son útiles cuando el bloque aparece en distintos diseños según el tamaño de pantalla o cuando estás ajustando un diseño personalizado para móvil.

Elige la alineación según el contenido circundante. La alineación centrada encaja con destacados independientes, mientras que la alineación a la izquierda suele resultar más natural en diseños apilados o en áreas con mucho texto.

Comprueba la alineación tanto en escritorio como en móvil. Una posición que se ve equilibrada en una pantalla ancha puede resultar incómoda en pantallas más pequeñas.

Estos ajustes permiten que este bloque anule los colores generales del tema para el icono y el texto. Úsalos cuando el destaque necesite más énfasis o cuando necesites mejor contraste dentro de un diseño concreto.

Evita usar demasiados colores de destaque distintos en la misma página. Un uso coherente del color hace que las ventajas sean más fáciles de escanear y evita que el diseño se vea recargado. Para más información sobre el comportamiento compartido del color, consulta Ajustes de color.

Asegúrate de que tanto el icono como el texto sigan siendo fáciles de leer sobre el fondo.

Usa los controles de visibilidad para mostrar u ocultar este bloque en escritorio o móvil. Esto es útil cuando quieres contenido de apoyo diferente según el tamaño del dispositivo o cuando un destaque breve encaja mejor en un diseño que en otro.

Usa la ocultación de forma selectiva. Funciona mejor para decisiones de diseño intencionales, no como sustituto de condensar el contenido. Para más información sobre el comportamiento compartido de la visibilidad, consulta Ajustes de visibilidad.

  1. Mantén el texto breve. Usa una frase corta y centrada en el beneficio para que el mensaje se pueda escanear rápidamente.
  2. Elige iconos claros. Selecciona iconos que refuercen el texto de inmediato en lugar de añadir decoración sin significado.
  3. Enlaza con propósito. Añade un enlace solo cuando los compradores realmente necesiten más detalles detrás del destaque.
  4. Revisa ambos tamaños de pantalla. Comprueba la alineación y el espaciado en escritorio y móvil antes de publicar.
  5. Usa el énfasis con moderación. Reserva los colores personalizados para los destacados que merezcan más atención.
  6. Deja que los valores predeterminados funcionen cuando sea posible. Deja sin definir las opciones de color y estilo cuando quieras que el bloque herede el diseño circundante, y usa anulaciones solo cuando el destaque deba diferenciarse.