Utiliser les icônes

Liens en vedette

1. Documentation Shopify sur les sections et les blocs
2. Material Symbols
3. Documentation Company XYZ sur les paramètres de couleur

Vidéos utiles

Vidéo de la Shopify Academy : personnaliser votre boutique

Vidéo de la Shopify Academy : personnaliser votre boutique

De nombreuses zones de contenu d’Align comprennent un champ d’icône qui ajoute un repère visuel à côté du texte ou à l’intérieur d’un bouton. Dans l’éditeur de thème Shopify, vous pouvez utiliser ces champs pour les titres, le contenu principal, les points forts, les appels à l’action et d’autres zones similaires.

Pour obtenir une présentation générale des endroits où les paramètres de section et de bloc peuvent apparaître dans Shopify, consultez la documentation Shopify sur les sections et les blocs

Chaque champ d’icône d’Align accepte une seule valeur : un slug d’icône Material ou un emoji. Laissez le champ vide pour obtenir une présentation composée uniquement de texte.

Trouver et utiliser un slug d’icône

Les slugs d’icônes Material sont un choix fiable si vous souhaitez un style contour cohérent dans toute votre boutique en ligne Align. Utilisez la bibliothèque Material Symbols pour trouver les icônes disponibles.

1. Ouvrez Material Symbols
2. Recherchez le symbole dont vous avez besoin.
3. Sélectionnez une icône dans les résultats.
4. Copiez son slug en minuscules, comme local_shipping, verified ou chevron_right.
5. Collez le slug dans le paramètre d’icône Align approprié.

Les espaces et les traits d’union sont traités comme des traits de soulignement, et la casse n’a pas d’importance. Copier directement le slug depuis Material Symbols reste toutefois l’approche la plus fiable.

Astuce

Parcourez les icônes ou filtrez-les en gardant le style Outlined à l’esprit. Il correspond à l’apparence d’icône par défaut d’Align.

Si un slug est mal orthographié ou indisponible, l’icône risque de ne pas s’afficher comme prévu.

Utiliser un emoji à la place

Vous pouvez également coller un seul emoji dans n’importe quel champ d’icône Align compatible. Cela fonctionne pour les icônes de contenu, les icônes de boutons, les séparateurs de fil d’Ariane et d’autres paramètres d’icônes spécialisés.

Ajouter un emoji

1. Collez un emoji dans le champ, par exemple 📦, ✓ ou ⭐.
2. Ne saisissez pas de phrase ni plusieurs symboles.
3. Laissez le champ vide si vous n’avez pas besoin d’une icône.

Choisir le style approprié

Les emoji conviennent bien aux messages conviviaux, informels ou axés sur une campagne. Ils peuvent également apporter une touche personnelle à une simple ligne de réassurance ou d’avantage.

Les emoji utilisent leur style de couleurs natif plutôt que le style d’icône Material en contour. Les paramètres locaux Icon color peuvent avoir moins d’effet sur les emoji ; utilisez-les donc avec discernement à côté d’icônes nommées sur la même page.

Astuce

Les slugs Material constituent généralement le meilleur choix par défaut pour une boutique en ligne soignée et cohérente. Choisissez des emoji lorsqu’une touche plus chaleureuse ou expressive convient au message.

Icônes de contenu et icônes de boutons

Les paramètres d’icône servent généralement à l’un de deux rôles. Les deux utilisent le même format de saisie, mais agissent sur différentes parties de la mise en page.

Icônes de contenu

• Apparaissent à côté ou autour d’un titre, d’une légende ou d’une ligne de fonctionnalité.
• Complètent le message plutôt que de constituer l’action principale.
• Sont généralement libellées Icon dans l’éditeur.

Icônes de boutons

• Apparaissent à l’intérieur d’un bouton ou d’une action de type lien.
• Renforcent le libellé du bouton ou, dans les mises en page composées uniquement d’une icône, deviennent l’action visible.
• Sont généralement libellées Button icon dans l’éditeur.

Associez si possible les icônes de boutons à du texte. Une icône doit indiquer ce qui se passe ensuite, et non constituer l’unique repère.

Positionner clairement les icônes

Certaines zones de contenu comprennent Icon position, qui contrôle la position de l’icône par rapport au texte voisin.

1. Top place l’icône au-dessus de la pile de texte et convient aux mises en page centrées ou éditoriales.
2. Bottom place l’icône sous la pile de texte, permettant au contenu rédactionnel de passer en premier.
3. Left place l’icône avant le texte dans une mise en page horizontale.
4. Right place l’icône après le texte, afin que les lecteurs découvrent d’abord le contenu rédactionnel.
5. Middle centre l’icône comme principal point d’ancrage visuel.

Les mises en page côte à côte peuvent s’empiler verticalement sur les petits écrans. Vérifiez l’affichage mobile lorsque vous utilisez le positionnement gauche, droit ou central.

Définir la disposition de l’icône du bouton

Lorsqu’un bouton prend en charge une icône, Button layout contrôle l’affichage conjoint de l’icône et du libellé.

1. Icon left place l’icône avant le texte du bouton et constitue la disposition avec libellé la plus familière.
2. Icon right place l’icône après le texte du bouton et peut convenir aux actions qui font avancer l’utilisateur.
3. Icon only affiche une icône sans libellé visible.

Attention

Les boutons composés uniquement d’une icône sont faciles à mal interpréter. Utilisez-les avec parcimonie et uniquement lorsque la mise en page environnante rend l’action parfaitement claire.

Ajuster la couleur et le style

Par défaut, les icônes héritent de la couleur d’icône d’Align et s’adaptent à la taille de leur conteneur. Certaines zones proposent également des contrôles locaux pour renforcer le contraste ou ajouter une touche aux couleurs de la marque.

1. Icon color modifie l’icône elle-même.
2. Icon border color est disponible lorsqu’une icône se trouve dans une forme avec bordure.
3. Show icon border est disponible dans certaines mises en page de type fonctionnalité pour créer un contour semblable à celui d’un badge.

Pour obtenir des conseils plus généraux sur les remplacements de couleurs locaux, consultez les paramètres de couleur.

Utiliser les champs d’icônes spécialisés

La plupart des champs d’icônes d’Align suivent les mêmes règles, même lorsque leurs libellés décrivent un rôle précis dans la mise en page. Collez un slug Material ou un emoji, ou laissez le champ vide pour masquer l’icône.

1. Separator icon s’affiche entre les éléments du fil d’Ariane, par exemple sous la forme d’un chevron ou d’un symbole ressemblant à une barre oblique.
2. Home icon affiche le raccourci vers l’accueil dans les fils d’Ariane.
3. Announcement icon ajoute une petite touche à côté du message de la barre d’annonce.
4. Heading icon ajoute une touche intégrée au style d’un titre.
5. Draggable icon définit le symbole de poignée utilisé avec certains contrôles interactifs.
6. Contact or feature icons ajoutent des touches ponctuelles aux blocs de contenu, par exemple pour les coordonnées e-mail ou les points forts.

Il s’agit de slugs Material ou d’emoji choisis par le marchand, et non d’icônes système automatiques.

Identifier les autres types d’icônes

Les champs d’icônes libres ne contrôlent pas tous les éléments ressemblant à des icônes dans Align.

1. Social media icons utilisent les URL des profils sociaux configurées dans les paramètres du thème.
2. Payment icons affichent automatiquement les moyens de paiement activés.
3. Navigation utility icons, notamment les icônes du panier, du compte, de la recherche et du menu, sont intégrées à l’en-tête.

Exemples de scénarios

Mise en avant de la livraison

1. Recherchez local_shipping dans Material Symbols.
2. Copiez le slug et collez-le dans un champ Icon à côté d’un court message sur la livraison gratuite.
3. Vous pouvez également utiliser 📦 pour une touche plus chaleureuse et informelle.

Séparateur de fil d’Ariane

1. Définissez Separator icon sur chevron_right pour obtenir un séparateur compact en contour entre les éléments du fil d’Ariane.
2. Vous pouvez également utiliser › ou → pour un séparateur plus simple, semblable à du texte.

Notes d’utilisation

1. Choisissez délibérément un style. Utilisez des slugs Material pour assurer la cohérence, et des emoji lorsque leur couleur native ou leur ton plus expressif convient au message.
2. Copiez les slugs depuis la bibliothèque. Recherchez dans Material Symbols et collez le slug plutôt que de deviner le nom d’une icône.
3. Masquez les icônes volontairement. Laissez un champ vide lorsqu’un symbole n’apporte aucune signification.
4. Assurez la cohérence des contenus associés. Réutilisez des slugs en contour ou des emoji sur une même page afin de créer une présentation harmonieuse.
5. Vérifiez le contraste et les mises en page mobiles. Examinez les icônes sur des arrière-plans clairs et foncés, en particulier avec des couleurs personnalisées ou des médias d’arrière-plan, et vérifiez que leur positionnement reste adapté sur les petits écrans.