Comment ajouter un lien Favoris (icône, texte ou bouton) à votre en-tête Shopify

L’ajout d’une icône spécifique « Favoris » à la barre de navigation de votre site (l’« en-tête ») génère plus d’engagement en réduisant les difficultés rencontrées par vos clients pour retrouver leurs produits préférés dans le Customer Hub. En offrant aux acheteurs un point de lancement dédié pour leurs articles enregistrés, vous les encouragez à créer des paniers plus importants et à revenir plus souvent sur votre boutique.

Vous pouvez l’utiliser sous la forme d’une icône (par exemple, un cœur), d’un simple lien textuel (par exemple, « Favoris ») ou d’un bouton. Ce guide explique comment insérer le code nécessaire dans l’en-tête de votre site à l’aide de Shopify Liquid code.

Ce guide explique comment télécharger une icône en forme de cœur dans les ressources de votre thème et insérer le lien de code dans l’en-tête de votre site à l’aide de Shopify Liquid code.

Remarque Ce processus consiste à modifier le code de votre thème Shopify. Si vous n’êtes pas à l’aise pour écrire du code ou si vous n’avez pas de développeur dans votre équipe, nous vous recommandons de contacter un partenaire Klaviyo pour obtenir de l’aide. La prise en charge de Klaviyo ne peut pas résoudre les problèmes liés aux implémentations de code personnalisé.

Avant de commencer

Nous vous recommandons vivement de dupliquer votre thème actif avant d’apporter des modifications. Cela vous permet de tester la nouvelle icône dans un environnement sûr sans affecter votre boutique en ligne.

1. Dans Shopify, accédez à Boutique en ligne > Thèmes.

2. Cliquez sur le menu à trois points (...) à côté de votre thème actif.

3. Sélectionnez Dupliquer.

Étape 1 : Préparer vos ressources (si vous souhaitez utiliser une icône)

Tout d’abord, téléchargez le fichier d’icône qui servira de bouton. Utiliser un fichier SVG est préférable, car il s’adapte à n’importe quelle taille d’écran sans perdre en qualité et peut hériter des couleurs de votre thème.

1. Vous devez trouver une icône que vous souhaitez utiliser. Il peut s’agir de n’importe quelle icône, mais nous vous recommandons d’utiliser un SVG pour éviter la pixellisation. Vous pouvez télécharger une version standard (sous licence MIT) ici : Heroicons heart.svg.

2. Dans votre Administrateur Shopify, accédez à Boutique en ligne > Thèmes.

3. Trouvez votre thème et cliquez sur le menu à trois points (...) > Modifier le code.

4. Dans la barre latérale gauche, descendez jusqu’au dossier Assets et cliquez sur Add a new asset.

5. Téléchargez votre fichier d’icônes.

Étape 2 : Insérez le lien de l’en-tête (barre de navigation supérieure).

Ensuite, ajoutez l’extrait de code qui affiche l’icône et la lie au Customer Hub.

1. Dans l’éditeur de code du thème, recherchez le fichier qui contrôle votre en-tête.

   • Thèmes de la boutique en ligne 2.0 (par exemple, Dawn) : Recherchez sections/header.liquid.

   • Thèmes vintage : Recherchez snippets/header-icons.liquid ou header-bar.liquid.

2. Trouvez le point d’insertion : Appuyez sur Ctrl+F (ou Cmd+F sur Mac) et recherchez le mot panier ou compte. Vous souhaitez coller votre nouveau code dans le même conteneur (généralement un <div> ou <ul>) qui contient ces icônes existantes.

3. Collez une des options de code ci-dessous à l’endroit où vous souhaitez que le lien apparaisse (par exemple, juste avant l’icône du panier).

<a href= »#k-hub/favorites » id=« favorites-icon-bubble » aria-label=« Open Favorites » title=« Favorites » style=« display:flex;align-items:center;justify-content:center;height:4.4rem;width:4.4rem;« >
  <span style=« height:20px;width:20px »>
    {{ 'icon-heart.svg' | inline_asset_content }}
  </span> </a>

<a href= »#k-hub/favorites » class=« en-tête__menu-item header__menu-item-list » style=« text-decoration : none ;« > Favoris </a>

<a href= »#k-hub/favorites » class=« button--primary »> Favoris </a>

Astuce : Correspondance avec le style de votre thème Si votre thème utilise une classe CSS spécifique pour les icônes d’en-tête (par exemple : en-tête__icon or icon-link), you can replace the inline style= attribute in the code above with that class (e.g., class="header__icône »). Ainsi, les effets d’espacement et de survol correspondent parfaitement à vos autres boutons.

Résultat

Une fois enregistré, ouvrez votre boutique dans une nouvelle fenêtre Incognito/Private pour contourner la mise en cache du navigateur. Vous devriez voir l’icône du cœur dans votre barre de navigation. Si vous cliquez sur cette icône, l’onglet Favoris du Customer Hub s’ouvre.

Résolution de problèmes

Si l’icône n’apparaît pas ou semble incorrecte :

• L'icône est une image brisée : Assurez-vous que vous avez téléchargé le fichier dans le dossier Assets et que vous l'avez nommé exactement icon-heart.svg. Les noms de fichiers sont sensibles à la casse.

• L’icône n’est pas alignée : vous devrez peut-être ajuster les valeurs de hauteur et de largeur de l’attribut de style de l’extrait de code pour qu’elles correspondent à la hauteur de la barre de navigation de votre thème.

• Modifications non affichées : les thèmes Shopify sont mis en cache de manière agressive. Essayez de prévisualiser le thème dans une fenêtre Incognito ou d’ajouter ?preview_theme_id= à votre URL si vous travaillez sur un brouillon de thème.