Docs  /  Intégrations  /  Installer le plugin Shopify

Installer le plugin Shopify

Dernière mise à jour: 01. janvier 2026

Le plugin Shopify connecte votre configurateur configento.app directement à vos pages produits Shopify. Les acheteurs configurent leur produit, voient le prix et l'image du produit se mettre à jour en temps réel et finalisent leur achat via le checkout natif Shopify — sans quitter votre boutique. La configuration apparaît dans le panier, au checkout, dans la commande et dans la confirmation de commande.

Prérequis

  • Boutique Shopify utilisant un thème Online Store 2.0 (p. ex. Horizon, Dawn, Sense, Refresh, Origin ou thèmes premium actuels). Les thèmes legacy sans templates JSON ne sont pas pris en charge.
  • Shopify Plus n'est pas nécessaire — le plugin fonctionne sur tous les plans Shopify.
  • Un compte configento.app n'est pas un prérequis : vous pouvez le faire créer pendant la configuration ou associer un compte existant.

Installation

  1. Rechercher « Configento Configurator » dans le Shopify App Store.
  2. Cliquer sur Ajouter l'application.
  3. Confirmer l'écran des autorisations.
  4. Shopify ouvre ensuite automatiquement l'application dans l'admin Shopify (Admin Intégré).

Vue d'ensemble : l'Admin Intégré

Vous ouvrez l'application à tout moment dans l'admin Shopify sous Applications › configento.app. Elle comporte quatre onglets :

Onglet Rôle
Configuration Abonnement, association à votre compte configento.app, composants d'exemple
Produits Quels produits Shopify affichent quel configurateur
Tarifs Devise, taxes et conversion entre configento.app et Shopify
Bloc de thème Activer le configurateur et l'extension du panier dans le thème, adapter la confirmation de commande

Les onglets Produits, Tarifs et Bloc de thème sont disponibles une fois le compte associé.

Étape 1 — Choisir une formule

Sans abonnement actif, l'onglet Configuration affiche « Abonnement requis ». Cliquez sur « Choisir une formule » et confirmez-la dans Shopify. Les 14 premiers jours sont gratuits. La facturation passe par votre facture Shopify.

Un quota mensuel pour les fonctions d'IA est inclus dans la formule — sans frais supplémentaires.

É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 vous envoie une invitation par e-mail pour définir votre mot de passe. Cela prend un instant ; rechargez ensuite la page.

Compte existant : Cliquez sur « Oui — j'ai déjà un compte » et générez un code de connexion à 6 chiffres :

  1. Ouvrir le portail de service Configento (service.configento.app) et se connecter.
  2. Cliquer sur « Gérer » à côté du service à associer à la boutique.
  3. Dans l'admin, ouvrir Paramètres › Intégrations.
  4. Descendre jusqu'à la carte Shopify. Si vous avez plusieurs comptes Configento, choisir celui auquel cette boutique doit appartenir, puis cliquer sur « Générer un code de connexion ».
  5. Copier le code, le coller dans l'application et cliquer sur « Associer ».

Le code est valable 24 heures. Une fois associé, l'onglet affiche Configuration ✓ et le compte associé.

Remarque : une boutique Shopify est associée à exactement un compte configento.app. Pour la rattacher plus tard à un autre compte, désinstallez puis réinstallez l'application.

Étape 3 — Composants d'exemple (facultatif)

Si votre compte est encore vide, l'application propose d'ajouter quatre composants d'exemple. Ils montrent une image produit combinée, des caractéristiques combinées avec formules, un jeu de règles et des icônes graphiques. Vous pouvez les modifier, publier ou supprimer comme n'importe quel composant. Les exemples sont publiés automatiquement ; cela prend un instant.

Vous créez vos propres composants dans l'admin configento.app (admin.configento.app). Seuls les composants publiés peuvent être attribués à un produit.

Étape 4 — Attribuer les produits

Dans l'onglet Produits :

  1. Sous « Ajouter un produit », rechercher le produit par son nom.
  2. Choisir le composant et l'ajouter avec +.
  3. Le produit apparaît en haut sous « Produits avec configurateur ». Vous pouvez y changer de composant ou retirer l'attribution avec −.

Les modifications sont enregistrées immédiatement. Shopify met les pages de la boutique en cache quelques minutes ; une nouvelle attribution peut donc mettre un moment à apparaître sur la page produit.

Alternative : L'attribution est un métachamp produit et peut aussi être définie directement sur le produit dans l'admin Shopify : espace de noms configento, clé component_id, type single_line_text_field, valeur = ID du composant (p. ex. 10244).

Étape 5 — Configurer le thème

Dans l'onglet Bloc de thème, vous activez deux éléments — une fois par thème. L'onglet indique pour chacun s'il est actif dans votre thème publié et vous avertit s'il manque quelque chose.

Bloc du configurateur

  1. Cliquer sur « Ajouter le bloc du configurateur ». Shopify ouvre l'éditeur de thème sur le template produit et ajoute le bloc Configento Configurator.
  2. Shopify place les nouveaux blocs en bas. Avec le paramètre « Placer automatiquement le configurateur au-dessus du prix » (par défaut : activé), le configurateur se place quand même juste avant le prix au chargement. Sinon, glisser le bloc au-dessus du bouton « Ajouter au panier ».
  3. Enregistrer.

Paramètres du bloc dans l'éditeur de thème :

Paramètre Par défaut Signification
URL du backend Configento https://admin.configento.app Ne modifier que si Configento vous indique explicitement un autre hôte
Sélecteur CSS du prix du thème vide Détection automatique pour la plupart des thèmes ; à remplir uniquement pour des thèmes particuliers
Sélecteur CSS de la galerie d'images vide Détection automatique ; l'image produit combinée y remplace la photo du produit tant que le configurateur fournit des calques d'image
Placer automatiquement le configurateur au-dessus du prix activé Déplace le bloc avant l'élément de prix au chargement
Afficher le résumé de la configuration désactivé Affiche un résumé textuel de la sélection sous le configurateur
Texte de chargement vide Sélection automatique de la langue (DE/EN/ES/FR), personnalisable

Extension du panier « Configento Cart »

L'extension du panier 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 ».

Dans Shopify, les intégrations d'applications sont désactivées tant que vous ne les activez pas — une application ne peut pas le faire à votre place. Pour l'activer :

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

Important : le réglage s'applique par thème. Après un changement de thème ou une réinstallation de l'application, activez-le à nouveau dans le nouveau thème.

Sans l'extension du panier, l'achat fonctionne entièrement — prix, configuration et checkout sont corrects. Le panier de votre thème affiche seulement la photo du produit et aucun lien Modifier.

Étape 6 — Confirmation de commande (facultatif)

L'e-mail de confirmation de commande contient automatiquement la configuration (voir ci-dessous). L'image du produit dans l'e-mail provient toutefois du modèle d'e-mail de votre boutique, que les applications ne peuvent pas modifier. Pour afficher l'image de la configuration au lieu de la photo du produit, adaptez le modèle une seule fois. L'onglet Bloc de thème vous guide et propose les extraits à copier :

  1. « Modifier la confirmation de commande » ouvre le code du modèle (dans l'admin Shopify : Paramètres › Notifications › Notifications aux clients › Confirmation de commande › Modifier le code).
  2. Rechercher dans le code (Ctrl+F / Cmd+F) cette ligne : {% if parent_line_item and parent_line_item.image %}
  3. Remplacer chaque occurrence de cette ligne par le bloc suivant (également disponible à copier dans l'onglet Bloc de thème). Le modèle standard contient cette ligne plusieurs fois — une 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 %}
  1. Enregistrer le modèle.

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 d'un lot est affichée.

Tarifs, devise et taxes

En général, vous n'avez pas à toucher l'onglet Tarifs — l'application lit la devise et l'affichage des taxes de votre boutique en direct depuis Shopify et convertit automatiquement :

  • Taxes : Si votre boutique affiche les prix hors taxes (p. ex. « Taxes calculées au paiement »), l'application convertit les prix TTC de configento.app en prix HT ; Shopify ajoute les taxes au paiement. Si votre boutique affiche les prix TTC, l'application utilise le taux que Shopify calcule pour le produit.
  • Devise : Si configento.app et votre boutique utilisent la même devise, rien n'est converti. Avec des devises différentes, l'application utilise le taux de change de Shopify Markets.
  • Taux manuel : Nécessaire uniquement si Shopify ne fournit aucun taux. Un taux saisi est ignoré lorsque les deux côtés utilisent la même devise — l'onglet le signale ; « Supprimer la valeur manuelle » l'efface.

Le prix est ainsi identique sur la page produit, dans le panier et au paiement.

Ce que voit l'acheteur

  1. Page produit : Le configurateur se charge automatiquement. Le prix et — si le composant comporte des calques d'image — l'image produit combinée dans la galerie se mettent à jour à chaque choix.
  2. Ajout au panier : La configuration est enregistrée et son image est préparée pour le panier, le checkout et la commande. Cela prend quelques secondes.
  3. Panier : La ligne affiche l'image de la configuration, les choix et un lien « Modifier » vers la page produit (avec l'extension du panier, voir l'étape 5).
  4. Checkout : Une ligne intitulée « Produit – choix, choix, … » avec l'image de la configuration. Dépliée, elle montre ses composants : le produit à son prix de base et « Configuration » avec le supplément. Tous les moyens de paiement, codes de réduction et fonctionnalités Shopify restent disponibles.
  5. Confirmation de commande : Une ligne avec la configuration dans son titre, le prix total et les composants — avec l'image de la configuration si vous avez réalisé l'étape 6.

La commande dans l'admin Shopify

Shopify affiche une commande configurée avec ses composants : le produit à son prix de base et la ligne « Configuration » avec le supplément. La sélection complète de l'acheteur figure en propriétés sur la ligne « Configuration » (p. ex. « Modèle : Linea • Verre : Verre clair ») ; les deux lignes renvoient via « Fait partie de » au titre contenant la configuration.

Ce que l'application crée dans votre boutique

  • Deux produits brouillon « Configuration » (nom selon la langue de la boutique) : ils portent le supplément de la configuration dans le panier — l'un pour les produits expédiés, l'autre pour les produits sans expédition, afin qu'un produit configuré reste une seule ligne dans la commande et l'e-mail. Ils ne sont pas visibles dans la boutique. Ne pas les supprimer, publier ou renommer — s'ils manquent, l'application les recrée automatiquement.
  • Images des configurations (configento-….png) dans les fichiers de votre boutique. Shopify n'affiche dans le panier et le checkout que des images de son propre CDN ; c'est pourquoi l'application y dépose chaque image de configuration.
  • Métachamps : configento.component_id sur les produits (attribution) et des métachamps boutique pour les produits de supplément.

Autorisations : L'application lit et écrit les produits (attribution, produits de supplément), les commandes provisoires (calcul du taux de taxe), les transformations de panier (supplément) 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.

Support multilingue

Le plugin prend en charge l'allemand, l'anglais, l'espagnol et le français. Le configurateur de la boutique suit automatiquement la langue de la boutique Shopify (Shopify Markets / sélecteur de langue) ; les autres langues utilisent l'anglais. L'Admin Intégré suit la langue de votre admin Shopify.

Résolution des problèmes

Le configurateur ne s'affiche pas :

Symptôme Cause Solution
Zone complètement vide Bloc du configurateur absent du thème Onglet Bloc de thème → « Ajouter le bloc du configurateur »
Texte de chargement permanent Produit non attribué à un composant publié Onglet Produits → attribuer un composant
Nouvelle attribution pas encore visible Cache des pages Shopify Attendre quelques minutes, recharger la page
Message d'erreur après 8 secondes Cloud configento.app inaccessible Vérifier status.configento.app

Panier et checkout :

Symptôme Cause Solution
Le panier affiche la photo du produit au lieu de la configuration, pas de lien « Modifier » Extension du panier désactivée dans le thème actif (p. ex. après un changement de thème) Onglet Bloc de thème → « Activer Configento Cart » → enregistrer
Pas de supplément dans le panier Transformation de panier inactive Rouvrir l'application dans l'admin Shopify (la réactive)
Écart de prix entre page produit et panier Devise/taxes Vérifier l'onglet Tarifs ; supprimer un taux manuel si les devises sont identiques
Image de configuration absente du panier/checkout Nouvelle autorisation « Fichiers » pas encore confirmée Ouvrir l'application et confirmer les autorisations demandées

Confirmation de commande :

Symptôme Cause Solution
Photo du produit au lieu de l'image de configuration Modèle d'e-mail non adapté Étape 6
Ligne à remplacer introuvable Modèle personnalisé Développeur ou support Configento

L'association échoue :

Symptôme Cause Solution
Code invalide ou expiré Code de plus de 24 heures ou mal saisi Générer un nouveau code dans le portail de service
Boutique déjà associée La boutique est déjà associée à un autre compte Désinstaller et réinstaller l'application
« Abonnement requis » Aucune formule active Onglet Configuration → « Choisir une formule »

Prochaines étapes

← Tous les articles Essai gratuit 14 jours