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

Découvrez comment ajouter un lien Favoris à la barre de navigation (en-tête) de votre boutique Shopify afin que les acheteurs puissent ouvrir directement leurs produits enregistrés dans Klaviyo Customer Hub.

Vous pouvez l’implémenter sous forme d’ icône (par exemple, un cœur), d’un simple lien texte (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 du code Liquid de Shopify.

Ce lien d’en-tête ouvre les favoris enregistrés. Pour permettre aux acheteurs d’enregistrer des produits à partir des pages de détail des produits ou des pages de collections, suivez Comment afficher des boutons Favori sur votre site et dans Klaviyo Customer Hub.

Remarque Ce processus implique de 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 demander l’aide d’un partenaire Klaviyo. Le support Klaviyo n’est pas en mesure de dépanner les implémentations de code personnalisées.

Avant de commencer

Avant d’ajouter ce lien, configurez Klaviyo Customer Hub sur votre boutique Shopify et activez les Favoris dans Klaviyo. Assurez-vous que l’intégration de l’application Klaviyo est activée dans le thème Shopify que vous allez modifier.

Nous vous recommandons vivement de dupliquer votre thème en ligne avant d’effectuer des modifications. Cela vous permet de tester le nouveau lien sans affecter votre boutique en ligne.

1. Dans Shopify, accédez à Online Store > Themes.
2. Cliquez sur le menu des 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)

Pour l’option d’icône ci-dessous, utilisez un fichier SVG de moins de 15 KB. Les SVG s’adaptent à toutes les tailles d’écran sans perdre en qualité et peuvent hériter des couleurs de votre thème. Si vous préférez un lien texte ou un bouton, passez à l’étape 2.

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 ici une version standard (sous licence MIT) : Heroicons heart.svg. Enregistrez le fichier sous le nom icon-heart.svg afin qu’il corresponde au code de l’icône ci-dessous.
2. Dans votre interface d’administration Shopify, accédez à Boutique en ligne > Thèmes.
3. Trouvez le thème en double, puis cliquez sur le menu à trois points (...) > Modifier le code.
4. Dans la barre latérale gauche, faites un clic droit sur le dossier assets, puis sélectionnez Télécharger... pour ouvrir le sélecteur de fichiers.
5. Sélectionnez votre fichier SVG et cliquez sur Ouvrir.

Étape 2 : insérer le lien d’en-tête (barre de navigation supérieure)

Ensuite, ajoutez l’extrait de code pour votre icône, votre lien texte, ou votre bouton. Chaque option ouvre les favoris dans Klaviyo Customer Hub.

1. Si vous avez ignoré l’étape 1, ouvrez l’éditeur de code dans Shopify : accédez à Boutique en ligne > Thèmes. À côté du thème dupliqué, cliquez sur le menu à trois points (...) > Modifier le code. Dans l’éditeur de code du thème dupliqué, localisez le fichier qui contrôle votre en-tête.
   • Thèmes Online Store 2.0 (p. ex., 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 cart ou account. Vous devez coller votre nouveau code dans le même conteneur (généralement un <div> ou <ul>) qui contient ces icônes existantes.
3. Collez 1 des options de code ci-dessous à l’endroit où vous souhaitez que le lien apparaisse (p. ex., juste avant l’icône Panier).

Option A : Lien de l’icône

Utilisez ce code si vous avez terminé l’étape 1 et souhaitez afficher une icône en forme de cœur, en supposant qu’elle se nomme icon-heart.svg dans notre exemple :

<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>

Option B : lien texte ou bouton

Utilisez ce code si vous préférez un lien texte ou un bouton. Vous n’avez pas besoin de téléverser d’éléments pour cela.

Pour un lien texte simple :

<a href="#k-hub/favorites" class="header__menu-item header__menu-item--list" style="text-decoration: none;">
  Favorites
</a>

Pour un bouton :

<a href="#k-hub/favorites" class="button button--primary">
  Favorites
</a>

1. Cliquez sur Enregistrer.

Astuce : aligner le style de votre thème Si votre thème utilise une classe CSS spécifique pour les icônes d’en-tête (p. ex., header__icon ou icon-link), vous pouvez remplacer l’attribut style= en ligne dans le code ci-dessus par cette classe (p. ex., class="header__icon"). Prévisualisez le résultat pour vérifier que l’espacement et les effets au survol correspondent à vos autres liens d’en-tête.

Étape 3 : tester et publier vos modifications

Après avoir enregistré votre code, prévisualisez le thème modifié et testez le lien avant de le publier.

1. Dans Shopify, accédez à Online Store > Themes (Boutique en ligne > Thèmes). À côté du thème dupliqué que vous avez modifié, cliquez sur le menu à trois points (...) > Preview.
2. Vérifiez l’en-tête sur ordinateur et sur mobile. Vous devriez voir l’icône, le lien texte, ou le bouton que vous avez ajouté. Cliquez dessus, et confirmez qu’il ouvre vos favoris enregistrés dans Klaviyo Customer Hub.
3. Lorsque vous êtes prêt à rendre toutes les modifications du thème dupliqué visibles pour les clients, revenez à Boutique en ligne > Thèmes. Dans Thèmes en brouillon, trouvez le doublon modifié, puis cliquez sur Publier.
4. Ouvrez votre boutique en ligne active et testez à nouveau le lien Favoris.

Résolution de problèmes

Si le lien n’apparaît pas, semble incorrect, ou n’ouvre pas Klaviyo Customer Hub :

• L’icône ne s’affiche pas : vérifiez que le fichier se trouve dans le dossier assets, qu’il s’agit d’un SVG de moins de 15 KB, et qu’il est nommé exactement icon-heart.svg pour correspondre à l’extrait de code. Le nom de fichier est sensible à la casse.
• L’icône est mal alignée : Vous devrez peut-être ajuster les valeurs height et width dans l’attribut style de l’extrait de code afin de correspondre à la hauteur de la barre de navigation de votre thème.
• Les changements ne s’affichent pas : confirmez que vous prévisualisez le thème que vous avez modifié. Rouvrez son Aperçu depuis Shopify. L’enregistrement d’un thème en double ne met pas à jour votre boutique en ligne ; publiez-le après l’avoir testé.
• Le lien n’ouvre pas le Klaviyo Customer Hub : confirmez que le Klaviyo Customer Hub est configuré et que l’intégration de l’application Klaviyo est activée dans le thème que vous consultez. Vérifiez que le lien utilise toujours #k-hub/favorites.