Usar iconos

Enlaces destacados

1. Documentación de Shopify sobre secciones y bloques
2. Material Symbols
3. Documentación de Company XYZ sobre ajustes de color

Videos útiles

Vídeo de Shopify Academy: Personalizar su tienda

Vídeo de Shopify Academy: Personalizar su tienda

Muchas áreas de contenido de Align incluyen un campo de icono que añade una señal visual junto al texto o dentro de un botón. En el editor de temas de Shopify, puede usar estos campos para encabezados, contenido principal, aspectos destacados, llamadas a la acción y áreas similares.

Para obtener una descripción general de dónde pueden aparecer los ajustes de secciones y bloques en Shopify, consulte la documentación de Shopify sobre secciones y bloques

Cada campo de icono de Align acepta un valor: un slug de icono de Material o un emoji. Deje el campo en blanco para mostrar solo texto.

Buscar y usar un slug de icono

Los slugs de iconos de Material son una opción fiable cuando desea un estilo de contorno coherente en toda su tienda online de Align. Use la biblioteca Material Symbols para buscar los iconos disponibles.

1. Abra Material Symbols
2. Busque el símbolo que necesita.
3. Seleccione un icono de los resultados.
4. Copie su slug en minúsculas, como local_shipping, verified o chevron_right.
5. Pegue el slug en el ajuste de icono de Align correspondiente.

Los espacios y los guiones se tratan como guiones bajos, y las mayúsculas y minúsculas no importan. Aun así, copiar el slug directamente desde Material Symbols es el método más fiable.

Consejo

Explore o filtre teniendo en cuenta el estilo Outlined. Coincide con la apariencia de icono predeterminada de Align.

Si un slug está mal escrito o no está disponible, es posible que el icono no se muestre como esperaba.

Usar emojis en su lugar

También puede pegar un solo emoji en cualquier campo de icono compatible de Align. Esto funciona para iconos de contenido, iconos de botones, separadores de rutas de navegación y otros ajustes especializados de iconos.

Añadir un emoji

1. Pegue un emoji en el campo, como 📦, ✓ o ⭐.
2. No introduzca una frase ni varios símbolos.
3. Deje el campo en blanco si no necesita un icono.

Elegir el estilo adecuado

Los emojis funcionan bien para mensajes cercanos, informales o relacionados con campañas. También pueden aportar personalidad a una línea sencilla de confianza o beneficios.

Los emojis usan su estilo de color nativo en lugar del estilo de icono de Material con contorno. Los ajustes locales de Icon color pueden tener menos efecto en los emojis, así que úselos con criterio junto con iconos con nombre en la misma página.

Consejo

Los slugs de Material suelen ser la mejor opción predeterminada para una tienda online pulida y coherente. Elija emojis cuando un detalle más cálido o expresivo se adapte mejor al mensaje.

Iconos de contenido e iconos de botones

Los ajustes de iconos suelen cumplir una de dos funciones. Ambos usan el mismo formato de entrada, pero afectan a distintas partes del diseño.

Iconos de contenido

• Aparecen junto a un encabezado, un pie de foto o una línea de características, o alrededor de estos elementos.
• Apoyan el mensaje en lugar de actuar como la acción principal.
• Normalmente aparecen con la etiqueta Icon en el editor.

Iconos de botones

• Aparecen dentro de un botón o una acción con estilo de enlace.
• Refuerzan la etiqueta del botón o, en diseños con solo iconos, se convierten en la acción visible.
• Normalmente aparecen con la etiqueta Button icon en el editor.

Combine los iconos de botones con texto siempre que sea posible. Un icono debe reforzar lo que ocurre a continuación, no ser la única indicación.

Colocar los iconos con claridad

Algunas áreas de contenido incluyen Icon position, que controla cómo se sitúa un icono en relación con el texto cercano.

1. Top coloca el icono encima del conjunto de texto y es adecuado para diseños centrados o editoriales.
2. Bottom coloca el icono debajo del conjunto de texto y permite que el contenido escrito sea lo primero.
3. Left coloca el icono antes del texto en un diseño horizontal.
4. Right coloca el icono después del texto, para que los lectores encuentren primero el contenido escrito.
5. Middle centra el icono como el principal punto de atención visual.

Los diseños en paralelo pueden apilarse verticalmente en pantallas más pequeñas. Revise la presentación en dispositivos móviles cuando use la posición izquierda, derecha o central.

Configurar el diseño del icono del botón

Cuando un botón admite un icono, Button layout controla cómo aparecen juntos el icono y la etiqueta.

1. Icon left coloca el icono antes del texto del botón y es el patrón con etiqueta más habitual.
2. Icon right coloca el icono después del texto del botón y puede adaptarse a acciones que avanzan hacia delante.
3. Icon only muestra un icono sin una etiqueta visible.

Precaución

Los botones que solo tienen iconos pueden malinterpretarse fácilmente. Úselos con moderación y solo cuando el diseño que los rodea haga que la acción sea inequívoca.

Ajustar el color y el estilo

Los iconos heredan de forma predeterminada el color de icono de Align y se escalan con su contenedor. Algunas áreas también ofrecen controles locales para lograr un mayor contraste o un detalle de marca.

1. Icon color cambia el color del icono.
2. Icon border color está disponible cuando un icono se encuentra dentro de una forma con borde.
3. Show icon border está disponible en algunos diseños de estilo destacado para crear un contorno similar al de una insignia.

Para obtener más información sobre las anulaciones de color locales, consulte Ajustes de color.

Usar campos de iconos especializados

La mayoría de los campos de iconos de Align siguen las mismas reglas, aunque sus etiquetas describan una función de diseño específica. Pegue un slug de Material o un emoji, o deje el campo en blanco para ocultar el icono.

1. Separator icon se muestra entre los elementos de la ruta de navegación, como un símbolo de tipo chevrón o barra.
2. Home icon muestra el acceso directo a la página de inicio en las rutas de navegación.
3. Announcement icon añade un pequeño detalle junto al mensaje de la barra de anuncios.
4. Heading icon añade un detalle integrado al tratamiento del encabezado.
5. Draggable icon define el símbolo con estilo de controlador que se usa con ciertos controles interactivos.
6. Contact or feature icons añaden detalles únicos a bloques de contenido, como datos de correo electrónico o aspectos destacados.

Estos son slugs de Material o emojis elegidos por el comerciante, no iconos automáticos del sistema.

Reconocer otros tipos de iconos

Los campos de iconos libres no controlan todos los elementos similares a iconos de Align.

1. Social media icons usan las URL de perfiles sociales configuradas en los ajustes del tema.
2. Payment icons muestran automáticamente los métodos de pago habilitados.
3. Navigation utility icons, incluidos el carrito, la cuenta, la búsqueda y el menú, están integrados en el encabezado.

Ejemplos de situaciones

Destacado de envío

1. Busque local_shipping en Material Symbols.
2. Copie el slug y péguelo en un campo Icon junto a un mensaje breve sobre el envío gratuito.
3. Como alternativa, use 📦 para añadir un detalle más cálido e informal.

Separador de rutas de navegación

1. Establezca Separator icon en chevron_right para usar un separador compacto con contorno entre los elementos de la ruta de navegación.
2. Como alternativa, use › o → para un separador más sencillo, similar al texto.

Notas de uso

1. Elija el estilo deliberadamente. Use slugs de Material para mantener la coherencia y emojis cuando el color nativo o un tono más expresivo se adapte al mensaje.
2. Copie los slugs de la biblioteca. Busque en Material Symbols y pegue el slug en lugar de adivinar el nombre de un icono.
3. Oculte los iconos intencionadamente. Deje un campo en blanco cuando un símbolo no aporte significado.
4. Mantenga coherente el contenido relacionado. Reutilice slugs con contorno o emojis en una página para que la presentación parezca coordinada.
5. Compruebe el contraste y los diseños móviles. Revise los iconos sobre fondos claros y oscuros, especialmente con colores personalizados o medios de fondo, y confirme que la posición siga funcionando en pantallas más pequeñas.