Installer le plugin Shopify

Dernière mise à jour: 20. octobre 2026

Avec l'application configento.app du Shopify App Store, vous affichez vos configurateurs directement sur vos pages produit Shopify. Vos clients composent leur produit, voient le prix et l'image du produit à chaque choix et achètent via le checkout Shopify habituel. La configuration apparaît dans le panier, au checkout, dans la commande et dans la confirmation de commande.

La boutique utilise toujours le moteur frontend V3 – quel que soit le réglage du composant. Ce que V3 fait différemment de Legacy est décrit dans Moteur frontend : Legacy ou V3.

Prérequis

Une boutique Shopify avec un thème qui prend en charge les blocs d'application (Online Store 2.0, p. ex. Dawn, Horizon, Sense, Refresh, Origin et la plupart des thèmes actuels).
Pas besoin de Shopify Plus – l'application fonctionne avec tous les forfaits Shopify.
Vous n'avez pas besoin d'un compte configento.app au préalable. Vous pouvez le faire créer pendant la configuration ou associer un compte existant.

Installation

Ouvrez l'application configento.app dans le Shopify App Store et installez-la.
Confirmez les autorisations que Shopify vous affiche.
Shopify ouvre ensuite l'application dans l'administration Shopify. Vous la retrouvez à tout moment parmi vos applications sous le nom configento.app.

En haut à droite de l'application, le lien Guide de configuration mène à cet article.

L'application en un coup d'œil

L'application comporte quatre onglets :

Onglet	À quoi il sert
Configuration	Abonnement, association avec votre compte configento.app, composants d'exemple
Produits	Quel produit affiche quel composant
Prix	Devise, taxes et conversion entre configento.app et Shopify
Bloc de thème	Activer le configurateur et l'extension de panier dans le thème, adapter la confirmation de commande

Produits, Prix et Bloc de thème ne sont cliquables qu'une fois un compte associé. L'onglet Configuration porte alors une coche.

L'application s'affiche dans la langue réglée dans votre administration Shopify (allemand, anglais, espagnol ou français, sinon anglais). Les messages d'erreur provenant de l'arrière-plan – comme « invalid or expired code » – sont pour l'instant toujours en anglais.

Étape 1 : choisir une formule

Sans abonnement actif, l'application affiche à la place des onglets la mention Abonnement requis : « Aucun abonnement Configento actif n'est enregistré pour cette boutique. Choisissez une formule pour utiliser le configurateur — les 14 premiers jours sont gratuits. »

Cliquez sur Choisir une formule. Shopify ouvre la page des formules, où vous confirmez la formule. La facturation passe par votre facture Shopify. L'abonnement débloque l'étendue de fonctions Professional.

Sans abonnement actif, le configurateur ne se charge pas non plus dans la boutique.

Étape 2 : associer votre compte configento.app

Dans l'onglet Configuration, l'application demande : Utilisez-vous déjà Configento ?

Pas encore de compte

Cliquez sur Non — créer un compte maintenant. configento.app crée votre compte et envoie une invitation à l'adresse e-mail de votre boutique Shopify. Grâce à l'invitation, vous définissez votre mot de passe pour le portail de service. Cela ne prend généralement qu'un instant – cliquez ensuite sur Recharger.

Compte existant

Cliquez sur Oui — j'ai déjà un compte. Il vous faut un code de connexion à 6 chiffres :

Ouvrez le portail de service (service.configento.app) et connectez-vous.
Pour le service auquel la boutique doit être rattachée, cliquez sur Gérer. L'administration s'ouvre.
Allez dans Paramètres → Intégrations et faites défiler jusqu'à la carte Shopify.
Si vous avez plusieurs services, sélectionnez le bon sous Associer la boutique Shopify à la commande de service.
Cliquez sur Générer un code de connexion. Le Code de liaison est valable 24 heures (Valide jusqu'au).
Collez le code dans l'application et cliquez sur Associer.

L'onglet Configuration affiche ensuite « Associé au client Configento …. »

Important : l'abonnement Shopify est un service distinct dans votre compte client. Si vous associez un compte existant, le portail de service crée pour cela un nouveau service avec son propre espace de travail, vide au départ ; l'application travaille ensuite avec cet espace de travail. Vos composants existants restent dans leur service. Si vous en avez besoin dans la boutique, exportez-les là-bas et importez-les dans le nouvel espace de travail avec Importer un ZIP (voir Créer votre premier composant).

Une boutique est toujours associée à exactement un compte. Si elle doit appartenir à un autre compte, désinstallez l'application puis réinstallez-la.

Étape 3 : composants d'exemple (facultatif)

Si votre espace de travail est encore vide, l'onglet Configuration demande : « Voulez-vous que nous ajoutions quatre composants d'exemple ? » Avec Oui, les ajouter, vous obtenez quatre composants – image produit combinée, caractéristiques combinées avec formules, un ensemble de règles et des icônes graphiques. Ils sont publiés automatiquement ; cela prend un instant. Vous pouvez ensuite les attribuer dans l'onglet Produits et les modifier ou les supprimer dans l'administration comme n'importe quel autre composant.

Vous créez vos propres composants dans l'administration, que vous ouvrez depuis le portail de service avec Gérer. Seuls les composants publiés peuvent être attribués – voir Créer votre premier composant.

Étape 4 : attribuer des produits

Dans l'onglet Produits :

Recherchez le nom du produit sous Ajouter un produit.
Dans la ligne du produit, choisissez le composant (Choisir un composant…) et cliquez sur +.
Le produit apparaît en haut sous Produits avec configurateur. Vous y changez de composant ou supprimez l'attribution avec −.

Les modifications sont enregistrées immédiatement. Shopify met les pages de la boutique en cache pendant quelques minutes – une nouvelle attribution apparaît donc avec un léger délai.

Juste après l'installation, Shopify crée un index pour les attributions. Pendant ce temps, l'onglet affiche « Shopify prépare l'index des produits pour cette application. » et ne liste encore aucun produit. Les attributions déjà effectuées sont conservées. Rechargez la page après quelques minutes ou cliquez sur Vérifier à nouveau.

Attribuer sans l'application : l'attribution est un métachamp de produit. Dans l'administration Shopify, vous le trouvez sur le produit sous Configento Component ID (namespace configento, clé component_id). Comme valeur, saisissez l'ID d'un composant publié. Les produits sans cette valeur n'affichent pas de configurateur.

Étape 5 : configurer le thème

Dans l'onglet Bloc de thème, vous activez deux éléments – une fois par thème. À côté de chaque élément, il est indiqué s'il est Actif ou Non activé dans votre thème publié.

Bloc du configurateur

Cliquez sur Ajouter le bloc du configurateur. Shopify ouvre l'éditeur de thème avec le modèle de produit et ajoute le bloc Configento Configurator.
Shopify place les nouveaux blocs à la fin. Ce n'est pas un problème : avec le réglage Placer automatiquement le configurateur au-dessus du prix (par défaut : activé), le configurateur se place au chargement juste avant le prix. Vous pouvez aussi faire glisser le bloc au-dessus du bouton « Ajouter au panier ».
Enregistrer.

Réglages du bloc dans l'éditeur de thème :

Réglage	Par défaut	Signification
URL du backend Configento	`https://admin.configento.app`	À modifier uniquement si Configento vous indique explicitement un autre hôte
Sélecteur CSS du prix du thème (facultatif)	vide	Vide = détection automatique (Dawn, Sense, Refresh, Origin, Horizon et la plupart des thèmes premium). Séparer plusieurs sélecteurs par des virgules
Sélecteur CSS de la galerie d'images (facultatif)	vide	Vide = détection automatique (Dawn et thèmes dérivés). L'image produit combinée y remplace la photo du produit tant que le composant fournit des calques d'image
Placer automatiquement le configurateur au-dessus du prix	activé	Place le bloc avant l'élément de prix au chargement, où qu'il se trouve dans l'éditeur de thème
Afficher le résumé de la configuration	désactivé	Affiche un résumé de la sélection sous le configurateur. Il est joint à la commande dans tous les cas
Texte de chargement (laisser vide pour la langue automatique)	vide	Vide = « Chargement du configurateur … » dans la langue de la boutique (DE, EN, ES, FR, sinon anglais)

Le configurateur reprend la police, les couleurs et les rayons d'angle des thèmes de la famille Dawn.

Extension de panier « Configento Cart »

Configento Cart est une intégration d'application. Dans le panier et le tiroir panier, elle affiche pour chaque ligne configurée l'image de la configuration, les choix de l'acheteur et un lien Modifier. Elle transmet aussi l'image de la configuration au checkout, à la commande et à la confirmation de commande.

Dans Shopify, les intégrations d'application sont désactivées jusqu'à ce que vous les activiez – l'application ne peut pas le faire elle-même.

Cliquez sur Activer Configento Cart. Shopify ouvre l'éditeur de thème avec l'intégration déjà activée.
Enregistrer.

Le réglage vaut par thème. Après un changement de thème ou une réinstallation de l'application, activez-le à nouveau. S'il est désactivé, l'onglet avertit : « « Configento Cart » n'est pas activé dans votre thème publié. »

Sans Configento Cart, l'achat fonctionne quand même – le prix et la configuration sont corrects. Le panier, le checkout et la commande affichent toutefois la photo du produit au lieu de l'image de la configuration, et il n'y a pas de lien Modifier.

Étape 6 : image dans la confirmation de commande (facultatif)

La confirmation de commande par e-mail contient automatiquement la configuration. L'image du produit, elle, provient du modèle d'e-mail de votre boutique, qu'une application ne peut pas modifier. Pour afficher l'image de la configuration à la place de la photo du produit, adaptez le modèle une fois. L'onglet Bloc de thème vous guide à travers les étapes sous Image de la configuration dans la confirmation de commande (facultatif) et propose les textes à Copier :

Modifier la confirmation de commande ouvre le code du modèle.
Recherchez dans le code (Ctrl+F / Cmd+F) cette ligne : {% if parent_line_item and parent_line_item.image %}
Remplacez chaque occurrence de cette ligne par le bloc suivant. Le modèle standard contient la ligne plusieurs fois, une fois par section de livraison.

{%- comment -%} Configento: show the configuration's combined image {%- endcomment -%}
{%- assign configento_image = '' -%}
{%- for configento_part in line_item_group.components -%}
  {%- for configento_prop in configento_part.properties -%}
    {%- if configento_prop.first == '_configento_image' -%}{%- assign configento_image = configento_prop.last -%}{%- endif -%}
  {%- endfor -%}
{%- endfor -%}
{% if configento_image != blank %}
  <img src="{{ configento_image }}{% if configento_image contains '?' %}&{% else %}?{% endif %}width=120&height=120&crop=center" align="left" width="60" height="60" class="order-list__product-image" alt="">
{% elsif parent_line_item and parent_line_item.image %}

Enregistrez le modèle. La prochaine confirmation de commande affiche l'image de la configuration.

Si vous ne trouvez pas la ligne, votre modèle a été personnalisé. Votre développeur ou le support Configento place alors le bloc à l'endroit où l'image produit d'un bundle est affichée.

Autoriser votre propre domaine

Lors de l'association, l'application ajoute automatiquement l'adresse Shopify de votre boutique (….myshopify.com) comme domaine autorisé. Si votre boutique fonctionne sous un domaine propre, ajoutez-le vous-même : dans l'administration sous Paramètres → Domaines avec Ajouter un domaine, mode Production. Sinon, le configurateur ne se charge pas sur ce domaine. Plus d'informations : Paramètres globaux.

Prix, devise et taxes

En général, vous n'avez pas à toucher à l'onglet Prix. L'application lit en direct dans Shopify, à chaque appel, la devise et l'affichage des taxes de votre boutique et effectue la conversion adaptée. Sous Devise et taxes, l'onglet affiche les deux côtés l'un à côté de l'autre : Configento (source des prix) et Shopify (boutique, en direct).

Taxes : si votre boutique affiche les prix hors taxes, les suppléments arrivent hors taxes dans la boutique et Shopify ajoute les taxes au moment du paiement. Si votre boutique affiche les prix toutes taxes comprises, l'application utilise le taux de taxe que Shopify calcule pour ce produit. S'il ne peut pas être déterminé, les prix restent sur la base sur laquelle ils ont été saisis dans le composant.
Devise : si les deux côtés utilisent la même devise, rien n'est converti (« Les deux côtés utilisent EUR. Aucune conversion nécessaire. »). Avec des devises différentes, l'application prend le taux de change de Shopify Markets.
Taux de conversion manuel : il n'est utilisé que si Shopify Markets ne fournit pas de taux. Avec la même devise, il reste sans effet et l'onglet le signale. Vous le supprimez avec Supprimer la valeur manuelle.

Le supplément dans le panier correspond au montant que le configurateur affiche sur la page produit.

Ce que voit l'acheteur

Page produit : le configurateur se charge avec le produit. Tant qu'il n'est pas prêt, le bouton du panier est bloqué – ainsi, aucun produit n'arrive dans le panier sans configuration. Le prix et – si le composant a des calques d'image – l'image produit combinée dans la galerie suivent chaque choix.
Ajout au panier : la configuration est enregistrée et la ligne est créée avec le prix complet. L'image de la configuration s'ajoute environ une demi-minute plus tard (via Configento Cart).
Panier : image de la configuration, les choix et le lien Modifier. Le lien ramène à la page produit avec les choix précédents ; après un nouvel ajout, la nouvelle configuration remplace l'ancienne ligne.
Checkout : une ligne intitulée « Produit – Valeur, Valeur, … ». Dépliée, elle montre ses éléments : le produit au prix de base et Configuration avec le supplément. Les modes de paiement, codes de réduction et autres fonctions Shopify restent inchangés.
Confirmation de commande : la ligne avec la configuration dans le titre et ses éléments – avec l'image de la configuration si vous avez réalisé l'étape 6.

La commande dans l'administration Shopify

Une commande configurée affiche ses éléments : le produit au prix de base et la ligne Configuration avec le supplément. Les choix de l'acheteur figurent comme propriétés sur la ligne Configuration.

Ce que l'application crée dans votre boutique

Deux produits brouillons « Configuration » (nom dans la langue principale de votre boutique : Konfiguration, Configuration, Configuración) : ils portent le supplément dans le panier – l'un pour les produits à expédier, l'autre pour les produits sans expédition. Ils ne sont pas visibles dans la boutique. Ne pas les supprimer, publier ou renommer.
Images des configurations (configento-….png) dans les fichiers de votre boutique. Le panier et le checkout n'affichent que des images hébergées par Shopify lui-même ; c'est pourquoi l'application y dépose chaque image de configuration.
Métachamps : Configento Component ID sur les produits attribués et des métachamps de boutique pour les deux produits de supplément.

Autorisations : l'application lit et écrit les produits (attribution, produits de supplément), les transformations de panier (supplément), les commandes provisoires (uniquement pour calculer le taux de taxe, aucun brouillon n'est créé) et les fichiers (images de configuration), et lit les langues de votre boutique. Si une mise à jour ajoute une autorisation, vous la confirmez à la prochaine ouverture de l'application.

Facturation et jetons IA

L'abonnement passe par Shopify et figure sur votre facture Shopify. Dans le portail de service, le service n'a ni Changer de service ni Résilier le service – voir Portail de service.
Jetons IA : un quota mensuel pour l'assistant IA est inclus dans l'abonnement. Vous ne pouvez pas acheter de jetons supplémentaires pour un service souscrit via Shopify. Plus d'informations sur les jetons : Jetons IA.

Désinstaller et réinstaller

Il n'y a pas de bouton de résiliation distinct dans Shopify : la désinstallation de l'application met fin à l'abonnement, Shopify cesse de facturer et le service est clôturé dans le portail de service.

Lors de la désinstallation, Shopify supprime tout ce qui appartient à l'application dans la boutique – intégrations, transformation de panier, métachamps de boutique. Les attributions sur vos produits restent en place.

Après une réinstallation :

choisissez à nouveau une formule,
associez à nouveau un compte (il peut aussi s'agir d'un autre),
activez à nouveau Configento Cart dans l'onglet Bloc de thème,
vérifiez les attributions dans l'onglet Produits. Si vous avez associé un autre compte, les anciens ID de composants n'en font plus partie – attribuez à nouveau.

Dépannage

Rien n'apparaît sur la page produit – aucun composant n'est attribué au produit, ou le bloc du configurateur manque dans le modèle de produit. Vérifiez l'onglet Produits et, dans l'onglet Bloc de thème, le statut du Bloc du configurateur. À cause du cache Shopify, une nouvelle attribution prend quelques minutes.
« Configurator could not be loaded. » – le configurateur n'a pas pu démarrer (le message est toujours en anglais). Causes : aucun abonnement actif, la boutique n'est associée à aucun compte, ou configento.app n'a pas répondu dans les 8 secondes.
« Le composant n’a pas pu être chargé (HTTP 401) » – la boutique fonctionne sous un domaine propre qui n'est pas autorisé. Voir Autoriser votre propre domaine.
« Le composant n’a pas pu être chargé (HTTP 404) » ou avec un autre code – le composant attribué n'est pas publié ou n'appartient pas au compte associé. Attribuez un composant publié dans l'onglet Produits.
Le bouton « Ajouter au panier » reste brièvement grisé – c'est voulu : il est bloqué jusqu'à ce que le configurateur soit prêt, 20 secondes au maximum.
Le panier affiche la photo du produit, pas de « Modifier » – Configento Cart est désactivé dans le thème publié, par exemple après un changement de thème. Onglet Bloc de thème → Activer Configento Cart → enregistrer.
Le checkout ou la commande affichent la photo du produit – vérifiez également Configento Cart. L'image n'arrive qu'environ une demi-minute après l'ajout ; qui passe immédiatement au paiement peut encore voir la photo du produit. Si l'image manque durablement, ouvrez l'application et confirmez les autorisations demandées.
Pas de supplément dans le panier – la transformation de panier n'est pas active. Ouvrez l'application dans l'administration Shopify ; si cela ne suffit pas, contactez le support Configento. Ne supprimez pas non plus l'un des deux produits « Configuration ».
Le prix sur la page produit diffère de ce que vous attendez dans la boutique – vérifiez l'onglet Prix : affichage des taxes et devise des deux côtés ; avec la même devise, supprimez un taux manuel.
La confirmation de commande affiche la photo du produit – le modèle d'e-mail n'est pas adapté (étape 6).
« invalid or expired code » lors de l'association – le code a plus de 24 heures, a déjà été utilisé ou est mal saisi. Générez-en un nouveau dans l'administration.
« shop already linked » – la boutique est déjà associée à un compte. Pour un autre compte : désinstallez l'application puis réinstallez-la.
« Abonnement requis » – aucune formule active. Choisir une formule.
« Cette session n'a pas pu être autorisée. » – rechargez la page. Si le message persiste, désinstallez l'application puis réinstallez-la.

Étapes suivantes

← Tous les articles Essai gratuit 14 jours