Comment installer Yaco Progress Bar sur une boutique Shopify

Installer l’app et suivre le guide de configuration

Installez Yaco Progress Bar depuis le Shopify App Store, puis ouvrez-la : la page Accueil affiche un Guide de configuration en trois étapes, plus une quatrième facultative. Suivez-les dans l’ordre.

Étape	À quoi elle sert	Bouton
1. Configurer vos paliers et réductions	Ouvrir la liste des paliers pour les vérifier ou les modifier : l’étape est cochée dès que vous l’avez ouverte	Aller à la configuration
2. Activer l’application dans le thème	Activer l’app embed dans votre thème	Activer l’intégration de l’app ou Ouvrir l’intégration au thème
3. Intégrer la barre de progression au thème	Choisir où la barre s’affiche (tiroir panier, page panier, page produit)	Intégrer la barre de progression
4. Votre plan (facultatif)	Voir où en est votre essai gratuit, ou choisir un plan payant	Voir les plans

Après une première installation, un e-mail de bienvenue est envoyé à chaque personne qui a ouvert Yaco sur votre boutique, dans sa langue (à l’adresse e-mail de votre boutique si personne ne l’a encore ouvert). Il récapitule les paliers trouvés et les étapes restantes.

Vérifier les paliers créés pour vous

À l’installation, l’app regarde les offres déjà en place dans votre boutique : livraison offerte, et chaque réduction automatique active avec un minimum à atteindre (un montant ou un nombre d’articles), « Achetez X, obtenez Y » compris. Chaque réduction devient son propre palier, pour que la barre annonce ce que votre checkout accorde déjà. Une réduction « Achetez X, obtenez Y » qui offre un article d’un seul produit dès un montant dépensé (« dès 100 € d’achat, le tote offert » ou « 20 € de remise sur le tote ») devient un palier Produit offert : la barre ajoute ce produit au panier quand le montant est atteint, et votre réduction Shopify en fixe toujours le prix (Utiliser ma remise Shopify). Les autres réductions « Achetez X, obtenez Y » (un nombre d’articles à acheter, plusieurs produits ou une collection au choix) deviennent un palier qui montre seulement la progression. Une réduction limitée à certains produits a sa propre barre. Une réduction réservée à un segment ou à des clients précis n’est importée que si l’app a déjà accès à vos clients, ce qu’elle ne demande que plus tard : à l’installation, elle est donc en général écartée. Dans ce cas, l’accueil de l’app liste ces réductions : cliquez sur Autoriser l’accès aux clients et ajouter, confirmez dans Shopify, et l’app les ajoute en paliers affichés à ces seuls clients. Le support peut aussi les importer plus tard. Les réductions créées par d’autres apps ne sont pas importées : l’app ne peut pas lire leurs conditions. La première étape du guide liste les paliers sous Nous avons pré-configuré ces paliers depuis votre boutique :. Cliquez sur Voir les paliers pour ouvrir la liste et les vérifier.

Si aucune offre n’est trouvée, la barre démarre avec un palier d’exemple de livraison offerte. Cet exemple ne modifie pas vos tarifs d’expédition Shopify : remplacez-le par votre vraie offre, ou lisez barre de livraison offerte pour en mettre une en place. Pour créer d’autres récompenses, voir ajouter un palier.

Les paliers importés suivent leur remise

Un palier importé d’une remise automatique reste relié à elle. Quand vous modifiez la remise dans Shopify (montant minimum, valeur, produits ou collections, produit offert, clients visés, dates), le palier suit en quelques secondes, et la barre de votre boutique avec lui. Si vous avez modifié vous-même un réglage du palier dans l’app (son montant, son nom ou ses textes, ses dates, sa barre, son produit offert), l’app garde votre modification et ne réécrit plus ce réglage ; les autres continuent de suivre la remise. Désactiver la remise dans Shopify lui donne une date de fin : le palier cesse de s’afficher à cette date.

Dans le palier, un bandeau indique Relié à votre remise Shopify « … », avec un bouton pour ouvrir la remise dans Shopify. Le choix de remise du palier s’intitule Utiliser ma remise Shopify (votre remise accorde l’avantage, le palier l’affiche) ou Laisser Yaco gérer la remise (l’app crée sa propre remise, avec les réglages du badge Plus de fonctionnalités). Quand vous passez à Laisser Yaco gérer la remise, l’app vous demande quoi faire de votre remise : laissez cochée Désactiver « … » dans Shopify à l’enregistrement pour que vos clients ne se voient pas offrir l’avantage deux fois. Rien n’est supprimé, et l’app garde les dates de la remise. La case est décochée par défaut quand le palier n’atteint pas tous les clients de votre remise (marchés, source de trafic, conditions de panier), et bloquée quand un autre palier utilise encore la remise. Si vous gardez votre remise active, l’alerte Votre remise « … » est toujours active reste sur le palier jusqu’à ce que vous la désactiviez dans Shopify. Un palier géré par Yaco ne suit plus votre remise. Revenir à Utiliser ma remise Shopify supprime la remise de l’app à l’enregistrement et propose de réactiver la vôtre : avec ses dates de début et de fin d’avant si l’app l’avait désactivée, sans date de fin sinon.

Si vous supprimez la remise dans Shopify, le palier n’est pas supprimé : l’app le désactive pour que votre barre ne promette pas une remise que le paiement n’applique plus, et une alerte s’affiche sur le palier, avec un badge Remise Shopify supprimée dans la liste des paliers. Depuis le palier, cliquez sur Laisser Yaco créer la remise pour le réactiver avec une remise de même valeur créée par l’app (remise en pourcentage ou en montant), ou sur Délier de la remise Shopify pour le garder tel quel et le gérer vous-même. Si la remise devient réservée à des clients que le palier ne peut pas cibler, le palier est désactivé de la même façon. Un palier qui ne suit pas sa remise a été importé avant l’arrivée de ce lien, ou créé à la main : modifiez-le dans l’app.

Activer l’app embed

La barre se charge par un app embed. Il s’active une fois par thème, dans l’éditeur de thème Shopify.

1. Dans le guide, cliquez sur Activer l’intégration de l’app. L’éditeur de thème s’ouvre sur les app embeds.
2. Activez Yaco Progress Bar.
3. Cliquez sur Enregistrer en haut à droite de l’éditeur de thème.

Vous pouvez aussi le faire à la main : dans l’admin Shopify, ouvrez Boutique en ligne › Thèmes › Personnaliser, cliquez sur l’icône des app embeds (Intégrations d’applications) dans la barre latérale gauche, activez Yaco Progress Bar et enregistrez.

Si votre thème publié perd l’app embed après son activation, par exemple quand vous publiez un autre thème, la barre ne s’affiche plus. La page Accueil rouvre alors le guide de configuration, même si vous l’aviez fermé, sur l’étape Activer l’application dans le thème. Dans chaque navigateur, cela se produit à chaque publication d’un thème sans l’app embed : si vous le refermez, il reste fermé jusqu’à ce que vous publiiez un autre thème.

Choisir comment la configuration se charge (facultatif)

Dans les réglages de l’app embed, Source de la configuration propose deux options :

• Après l’affichage (recommandé), par défaut : les pages se chargent aussi vite que sans l’app, et la barre récupère sa configuration auprès de Yaco une fois la page chargée.
• Dans la page (page plus lourde) : la configuration est écrite dans chaque page. Si vos produits cadeaux comptent des centaines de variantes, elle peut ajouter jusqu’à 0,3 s au chargement de chaque page.

Gardez Après l’affichage dans la plupart des cas. Ne choisissez Dans la page que si vous vendez à des acheteurs B2B et voulez que la liste des cadeaux affiche le prix de leur catalogue : avec Après l’affichage, elle affiche le prix public. Si vous avez activé l’app embed avant novembre 2026, le réglage est peut-être encore sur Dans la page : changez-le dans les réglages de l’app embed.

Placer la barre dans votre thème

L’app embed charge la barre, mais c’est vous qui choisissez où elle s’affiche. Cliquez sur Intégrer la barre de progression : l’éditeur de thème s’ouvre avec le menu de Yaco, et vous cliquez à l’endroit de la page où la barre doit apparaître, par exemple dans le tiroir panier. La méthode complète et les alternatives (bloc d’app sur la page produit ou panier, ligne de code pour les développeurs) sont détaillées dans placer la barre dans le thème.

Si d’autres boutiques ont déjà placé la barre sur la même version de votre thème, l’app la place pour vous à l’installation. L’étape devient alors Vérifier l’intégration au thème : cliquez sur Vérifier dans l’éditeur de thème pour voir où la barre s’affiche, et déplacez-la si besoin. L’étape est cochée une fois l’éditeur ouvert depuis le guide.

Si votre thème est difficile à intégrer, la page Intégration au thème propose un bouton Contactez-nous pour demander à l’équipe Yaco une intégration sur mesure gratuite.

Vérifier le statut des intégrations

Sous le guide de configuration (juste sous le message d’accueil une fois le guide fermé), la carte Statut des intégrations reste sur la page Accueil. La carte a une ligne par surface, Vitrine (votre thème publié) puis Checkout, et une colonne par fonction, Barre de progression et Recommandations. Sous Vitrine, le badge Intégration d’application indique si l’intégration d’application (app embed) est activée :

• Vitrine : sur la ligne Bloc d’application, les blocs que vous posez vous-même dans l’éditeur de thème, avec le nombre d’endroits où chacun est posé, par exemple 2 actifs. Sur la ligne Yaco placements, les intégrations que l’app ajoute à votre thème, gérées depuis l’onglet Placements de Intégration au thème, ainsi que les lignes de code collées dans votre thème avec la méthode Je suis développeur, par exemple 2 intégrations. Le décompte inclut chaque copie de ce code trouvée dans votre thème publié, une par occurrence. Cliquez sur un badge pour voir la liste : les placements (tiroir panier automatique compris) ouvrent l’onglet Placements, les fichiers du thème ouvrent l’éditeur de code du thème sur ce fichier. Le code du thème est revérifié toutes les 10 minutes : pour voir tout de suite un changement après avoir collé ou retiré le code, cliquez sur Rafraîchir en bas de la liste.
• Checkout : une seule ligne, les blocs que vous posez dans l’éditeur de checkout, par exemple 1 actif. Cette ligne n’apparaît que sur une boutique Shopify Plus : Shopify réserve la personnalisation du checkout à Plus. Si votre plan Yaco n’inclut pas le checkout (plan gratuit ou Starter), un badge Premium s’affiche à la place : les blocs posés dans l’éditeur de checkout restent invisibles pour vos clients tant que vous ne passez pas à Premium ou Optimize.

Un badge vert signifie que c’est fait. Intégration d’application désactivée s’affiche en jaune, non placé sous Barre de progression sur la ligne Yaco placements en orange : une étape manque. Un badge gris (non placé) n’est pas une erreur : la barre peut s’afficher grâce à l’app embed et aux Yaco placements, sans aucun bloc d’app, et les recommandations sont facultatives. Cliquez sur le badge Intégration d’application pour ouvrir l’éditeur de thème sur l’intégration d’application. Cliquez sur un autre badge pour ouvrir la page qui le gère : l’onglet Méthodes alternatives d’Intégration au thème pour la ligne Bloc d’application, la liste des intégrations pour la ligne Yaco placements, Checkout pour la barre au checkout, Recommandations pour les recommandations au checkout.

Votre plan (facultatif)

Le plan gratuit s’active tout seul à l’installation de l’app : la barre s’affiche sur votre boutique dès que l’app embed est activé et que la barre est placée. Pas besoin de payer pour terminer cette étape : elle se coche dès que vous ouvrez Voir les plans, la page qui explique votre essai et ce qui change après. Le guide affiche alors 4 sur 4 tâches terminées. Ouvrir la liste des paliers ou Voir les plans coche ces étapes pour toute votre équipe, sur tous les navigateurs. Sur une boutique de développement ou une vitrine protégée par mot de passe, l’étape indique que votre barre s’affiche sans abonnement : votre essai démarre une fois votre boutique ouverte au public.

L’étape indique où en est votre essai de 14 jours avec tous vos paliers. L’essai est un bonus en plus du plan gratuit : il démarre la première fois que votre barre s’affiche sur votre boutique, à condition d’avoir au moins deux paliers actifs (avec un seul palier, l’étape vous propose d’en ajouter un deuxième), puis l’étape compte les jours restants. Après l’essai, le plan gratuit garde 1 palier actif. Cliquez sur Voir les plans pour comparer les plans. Voir abonnement.

Si l’étape affiche Nécessaire pour afficher votre barre, votre boutique n’a pas encore de plan, ce qui peut arriver sur une installation ancienne : cliquez sur Voir les plans, puis sur Activer sur la carte Gratuit.

Une fois la barre placée, ouvrez votre boutique dans une fenêtre de navigation privée, ajoutez un produit au panier et vérifiez que la barre apparaît et avance. Sinon, voir la barre ne s’affiche pas.