Créer un configurateur de produits sur mesure sur Shopify

Dernière mise à jour
Revu par un expert
5 min de lecture
Jacques Blom
Jacques Blom
CTO chez Fudge.

Points clés

  • Un configurateur de produits Shopify permet aux acheteurs de créer un produit sur mesure sur la page produit (PDP) - choisir un bois, une taille, une gravure - et d’envoyer ces choix au panier.
  • Les variantes gèrent les combinaisons tarifées et en stock. La limite est désormais de 2 048 variantes par produit et toujours 3 options par produit. Au-delà, il faut une autre approche.
  • Les propriétés d’article capturent les choix en texte libre et non tarifés (texte de gravure, mots cadeaux) et accompagnent la commande. Elles ne modifient pas le prix et ne suivent pas les stocks par elles-mêmes.
  • Les méta-champs (metafields) stockent les données fixes du produit (matériaux, délais de livraison, listes d’options). Ils sont définis par le marchand, et non par le client.
  • Le constat honnête : les applications sont rapides à installer mais ajoutent des scripts et des frais mensuels ; le code natif vous offre un configurateur léger, intégré au thème, sans dépendance tierce. C’est cette voie native que Fudge construit.

Un configurateur de produits Shopify est l’interface sur une page produit où un acheteur assemble un article sur mesure avant de l’ajouter au panier. Pensez aux meubles configurables, aux bijoux personnalisés, aux lots à composer soi-même ou aux kits sur mesure. L’acheteur choisit ses options, le prix se met à jour, et les sélections sont associées à la commande pour que votre équipe puisse la traiter correctement.

Ce guide couvre les véritables éléments de base : les variantes, les propriétés d’article, les options de produit, les méta-champs, ainsi que le code Liquid et JavaScript sur mesure. Il compare l’approche par code natif avec les applications de configuration sans prétendre qu’aucune des deux n’est exempte de compromis. Chaque limite ci-dessous a été vérifiée dans la documentation officielle de Shopify.


Pourquoi vous pouvez nous faire confiance

Jacques a plus de 15 ans d’expérience en développement et a travaillé avec des centaines de boutiques Shopify. Nous avons créé Fudge - un constructeur de pages et éditeur de boutique Shopify natif en IA, avec une note de 4.8 et détenteur du badge Built for Shopify. Nous écrivons du Liquid, du JavaScript et du CSS directement dans les thèmes tous les jours. Les compromis présentés dans ce guide proviennent donc de la mise en ligne de vrais configurateurs, et non de la théorie.


Ce que doit faire un configurateur de produits

Un configurateur a quatre missions. Chacune d’elles correspond à un élément de base spécifique (ou “primitive”) de Shopify, et c’est en se trompant d’élément que la plupart des développements échouent.

  1. Présenter les options - swatches, menus déroulants, boutons, champs texte, upload de fichiers.
  2. Réagir aux sélections - afficher ou masquer des options secondaires, mettre le prix à jour en direct, bloquer les combinaisons invalides.
  3. Tarifer le résultat - certains choix font évoluer le prix (une taille supérieure), d’autres non (un message cadeau).
  4. Transmettre les choix à la commande - pour que l’entrepôt et l’équipe logistique sachent exactement quoi produire.

La suite de ce guide passe en revue chaque fonctionnalité Shopify pour vous montrer pour quelle mission elle est faite.


Approche 1 : les variantes

Les variantes sont la façon native pour Shopify de modéliser les combinaisons d’un produit avec leur propre prix et stock. Une option “Taille” croisée à une option “Couleur” donne une grille de variantes, chacune ayant son propre prix, SKU, et niveau de stock.

Les limites des variantes à connaître

Shopify a relevé le plafond de ses variantes en octobre 2025. Les chiffres actuels :

C’est la deuxième limite qui piège souvent les configurateurs. Avoir plus de variantes ne veut pas dire avoir plus d’options. Si votre produit sur mesure requiert cinq ou six choix indépendants, les variantes seules ne pourront pas faire l’affaire, peu importe à quel point le plafond de variantes grimpe.

Côté développement, une requête GraphQL sur un produit unique (product ou productByHandle) peut maintenant renvoyer jusqu’à 2 000 variantes, et la mutation productSet permet de créer ou mettre à jour jusqu’à 2 000 variantes de manière asynchrone en un seul call.3

Quand les variantes sont le bon outil

Utilisez les variantes lorsque chaque combinaison a un vrai prix et un vrai stock, et que vous avez trois options ou moins. Un t-shirt en trois tailles et quatre couleurs = 12 variantes. C’est le cas d’usage parfait pour les variantes.

Les variantes sont aussi le seul mécanisme via lequel Shopify gère le prix et le suivi de stock de manière native. Si un choix doit déduire du stock, ça doit obligatoirement être une variante.

Les limites des variantes

Les variantes montrent leurs faiblesses pour les véritables produits sur mesure :

C’est là que les autres approches entrent en jeu.


Approche 2 : les propriétés de ligne (line item properties)

Les propriétés d’article (line item properties) sont des paires nom-valeur attachées à un article spécifique dans une commande spécifique. C’est la pièce maîtresse des configurateurs. Contrairement aux variantes, elles n’ont pas besoin d’exister à l’avance et ne gèrent pas les stocks.

Vous les capturez avec des champs de formulaire nommés properties[...] dans le formulaire du produit :

<form action="/cart/add" method="post" enctype="multipart/form-data">
    <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" />

    <label for="engraving">Texte à graver</label>
    <input type="text" id="engraving" name="properties[Engraving]" maxlength="20" />

    <label for="wrap">Emballage cadeau</label>
    <select id="wrap" name="properties[Gift wrap]">
        <option value="None">Aucun</option>
        <option value="Standard">Standard</option>
    </select>

    <button type="submit">Ajouter au panier</button>
</form>

Ce que l’acheteur tape ou sélectionne devient une propriété sur cet article, visible dans le panier, lors du checkout, sur la commande et dans l’email de confirmation.4

Propriétés cachées

Préfixez le nom d’une propriété avec un underscore et Shopify la cache au client lors du checkout tout en la sauvegardant dans la commande.5 Utilisez cela pour les données internes dont votre équipe a besoin mais que l’acheteur ne doit pas voir :

<input type="hidden" name="properties[_config_id]" value="cfg_8842" />

La plupart des thèmes ignorent également les propriétés préfixées par un underscore dans le panier, mais ce n’est pas le cas de tous, alors vérifiez le template de votre panier.

Faire passer les choix dans le panier AJAX

Si votre configurateur ajoute au panier sans recharger la page, utilisez l’AJAX Cart API. Envoyez un objet properties à /cart/add.js :

fetch('/cart/add.js', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
        id: variantId,
        quantity: 1,
        properties: {
            Engraving: 'Pour Sam',
            'Gift wrap': 'Standard',
            _config_id: 'cfg_8842',
        },
    }),
})

Un comportement à connaître : un POST qui inclut properties écrase l’intégralité de l’objet properties pour cet article. Vous ne pouvez pas patcher une seule clé, et vous ne pouvez pas réinitialiser les propriétés à un objet vide une fois qu’elles sont définies - vous devez supprimer et réajouter l’article.6

Vous voulez un configurateur intégré à votre thème ?
Try Fudge for Free

Approche 3 : les méta-champs (metafields)

Les méta-champs (metafields) sont des champs de données personnalisés par le marchand rattachés à un produit, une variante ou autre chose. Ils sont définis une bonne fois pour toutes dans l’admin, et non pas saisis par l’acheteur.7

Dans un configurateur, les méta-champs servent à stocker les données de référence fixes que votre logique va utiliser :

Vous les parsez en Liquid pour gérer l’affichage de l’UI :

{% assign woods = product.metafields.custom.wood_options.value %}
{% for wood in woods %}
  <button data-price-delta="{{ wood.price_delta }}">{{ wood.name }}</button>
{% endfor %}

La règle d’or : les méta-champs décrivent le produit, les propriétés de ligne (line item properties) décrivent le choix du client. Pour aller plus loin, jetez un oeil à notre guide expliquant comment ajouter des méta-champs à vos produits Shopify.


Construire l’UI du configurateur

Une fois le modèle de données réglé, le front-end se fera en Liquid pour le premier affichage et en JavaScript pour l’interactivité. Consultez nos guides sur la façon de personnaliser une page produit Shopify et d’ajouter du JavaScript sur mesure à Shopify pour la partie mécanique.

Créer les sélecteurs d’options

Affichez chaque option via des swatches, boutons, listes déroulantes, ou champs texte. Les choix tarifés impactent les variantes ; les choix non-tarifés alimentent les propriétés de ligne (line item properties). On a souvent tendance à rajouter l’impact financier de l’option directement sur l’élément via un attribut data- afin que le script puisse le lire simplement.

Logique conditionnelle

Les produits sur mesure ont des dépendances. Une option “position du monogramme” ne devrait apparaître qu’une fois la case “ajouter un monogramme” cochée. Gérez cela en écoutant les événements change et en basculant la visibilité des champs dépendants :

document.querySelector('#add-monogram').addEventListener('change', (e) => {
    document.querySelector('#monogram-options').hidden = !e.target.checked
})

Mise à jour du prix en live

Le prix de base plus la somme des deltas sélectionnés. Recalculez à chaque changement :

function updatePrice() {
    let total = basePrice
    document.querySelectorAll('[data-selected="true"]').forEach((el) => {
        total += Number(el.dataset.priceDelta || 0)
    })
    priceEl.textContent = formatMoney(total)
}

Attention : le prix affiché est purement cosmétique. Shopify facture le prix de la variante qui est réellement ajoutée au panier. Si une option modifie véritablement ce que le client paie, ce doit être une variante ou un produit complémentaire payant, et non une propriété de l’article. Les propriétés d’article n’ont pas de prix.


Validation

Un configurateur qui laisse les acheteurs valider des configurations incomplètes ou impossibles est une usine à problèmes logistiques. Validez les choix avant de lancer l’ajout au panier.

Les vérifications côté client ne sont que pour l’expérience utilisateur. Elles peuvent être contournées. Pour tout ce qui relève de l’interdit – une quantité maximum, un combo impossible, un minimum de commande – utilisez une Shopify Function (validation de panier ou check-out), qui tournera côté serveur sur la plateforme de Shopify et ne pourra pas être ignorée depuis le navigateur.


Performance

Les configurateurs ajoutent plein de scripts sur vos pages commerciales les plus importantes. Surveillez ces trois éléments.

Un configurateur léger protège vos taux de conversion. Pour voir la vue d’ensemble, lisez notre guide sur les pages produits Shopify qui convertissent.


Code natif vs Apps de configuration

Les deux approches permettent de livrer des configurateurs fonctionnels. La différence réside dans ce que vous possédez et ce que vous devez gérer.

FacteurCode natif (Liquid, JS, méta-champs)App de configurateur
Vitesse de mise en placePlus long à développer la première foisRapide à installer et à configurer
Coût récurrentAucun au-delà du temps de développementFrais mensuels récurrents
PerformanceLéger, limité à la PDP, aucun script tiersAjoute le bundle de l’app aux pages produits
PersonnalisationContrôle total sur le markup et la logiqueLimité par les paramètres de l’app
Propriété des donnéesRéside dans votre thème et les commandesUne partie de la logique réside dans l’app
Risque de dépendanceAucun - c’est votre codeCasse ou change si l’app le fait
Options gratuitesPropriétés de l’article, illimitéGénéralement supporté
Options payantes/stockéesVariantes nativesApp ou variantes

Les apps sont le bon choix quand vous avez besoin d’une mise en ligne rapide (cette semaine), que le configurateur est standard, et qu’un abonnement mensuel est acceptable.

Le code natif gagne quand la performance est primordiale, que vous ne voulez aucune dépendance tierce sur une page critique pour vos revenus, ou que votre produit nécessite une logique que les paramètres d’une app ne peuvent exprimer. Le compromis a toujours été le temps de développement et le besoin d’un développeur.

C’est ce vide que Fudge vient combler. Fudge est un système d’IA natif pour Shopify qui écrit du Liquid, JavaScript et CSS directement dans votre thème. Vous décrivez le configurateur que vous souhaitez, et il produit un code prêt pour la production et appartenant au thème - sélecteurs d’options, logique conditionnelle, prix en direct, propriétés d’article reliées au panier - sans faire appel à une app tierce. Vous obtenez un résultat natif ultra-léger pour un coût de développement bien moindre.

Décrivez votre configurateur, obtenez du code natif pour votre thème.
Try Fudge for Free

Pour résumer

Un configurateur standard typique mixe les 4 éléments fondamentaux :

Commencez d’abord par modeler votre architecture de données, rajoutez votre interface visuelle ensuite, n’oubliez pas les validations avant ajout au panier, et gardez la page aussi légère que possible. Si un choix nécessite de modifier le montant total ou réduire l’inventaire : il doit être une variante. S’il s’agit d’une information que vous attachez à la commande, alors c’est une propriété de ligne (line item property). Pour afficher des options ultra customisées, on vous dirige vers notre guide complet : Ajouter de la logique Liquid personnalisée dans Shopify avec tous les modèles de templates.


FAQ

Combien de variantes et d'options un produit Shopify peut-il avoir ?

Un produit peut avoir jusqu'à 2 048 variantes, ce plafond ayant été augmenté (l'ancien étant de 100) en octobre 2025. La limite d'options par produit n'a pas changé : elle est toujours de 3 (par exemple Taille, Couleur, Matière). Si votre configurateur nécessite plus de trois choix indépendants, utilisez des propriétés d'article (line item properties) pour les options supplémentaires plutôt que d'essayer d'ajouter plus de variantes.

Quelle est la différence entre les variantes et les propriétés de l'article ?

Les variantes sont des combinaisons avec un prix et un stock que Shopify gère nativement - chacune a son propre prix, SKU et inventaire. Les propriétés d'article sont des paires nom-valeur saisies par l'acheteur (comme un texte à graver) qui sont attachées à la commande mais ne modifient ni le prix ni le stock. Utilisez les variantes lorsqu'un choix affecte le prix ou l'inventaire, et les propriétés d'article pour tout le reste.

Est-ce qu'une propriété d'article peut modifier le prix du produit ?

Non. Les propriétés d'article enregistrent des informations sur la commande mais n'ont aucun prix. Si l'option d'un configurateur modifie véritablement ce que le client paie, ce doit être une variante ou un produit complémentaire payant séparé. Tout prix que vous affichez via JavaScript est cosmétique - Shopify facture le prix de la variante qui est réellement ajoutée au panier.

Ai-je besoin d'une app pour créer un configurateur de produit sur Shopify ?

Non. Vous pouvez créer un configurateur complet avec le code natif de votre thème en utilisant les variantes, les propriétés d'article, les méta-champs et du JavaScript sur mesure. Les apps sont plus rapides à installer mais ajoutent des frais récurrents et chargent leurs propres scripts sur vos pages produits. Le code natif est plus léger et n'a aucune dépendance tierce ; c'est l'approche que Fudge génère directement dans votre thème.

Comment transmettre les sélections du configurateur au panier ?

Utilisez des champs (inputs) nommés "properties[Nom]" dans le formulaire du produit, ou envoyez un objet properties à /cart/add.js si vous ajoutez au panier via AJAX. Notez qu'un POST AJAX incluant des propriétés écrase l'intégralité de l'objet properties pour cet article - vous ne pouvez pas patcher une seule clé ou la réinitialiser à vide sans retirer puis réajouter l'article.

Comment cacher les données internes du configurateur au client ?

Préfixez le nom de la propriété avec un underscore, par exemple properties[_config_id]. Shopify cache ces propriétés au client lors du checkout tout en les conservant sur la commande pour que votre équipe de préparation puisse les lire. La plupart des thèmes les ignorent également dans le panier, mais vérifiez le template de votre panier car tous ne le font pas.

Comment valider les entrées du configurateur pour que les commandes soient toujours réalisables ?

Utilisez du JavaScript côté client pour exiger les options obligatoires, limiter la longueur des textes libres et imposer des champs dépendants avant que la requête d'ajout au panier ne se déclenche. Les vérifications côté client servent à l'expérience utilisateur et peuvent être contournées, donc imposez des règles strictes (quantités max, combinaisons interdites, minimums de commande) avec une Shopify Function qui s'exécute côté serveur et ne peut pas être esquivée depuis le navigateur.

Jacques's signature
Lancez un configurateur sans la taxe des apps.

Footnotes

  1. Shopify Developer Changelog, “The product variant limit is now 2048 for all merchants” (en vigueur depuis le 15 octobre 2025) : https://shopify.dev/changelog/the-product-variant-limit-is-now-2048-for-all-merchants

  2. Centre d’aide Shopify, “Ajout de variantes” (jusqu’à 3 options par produit) : https://help.shopify.com/en/manual/products/variants/add-variants

  3. Shopify Developer Changelog, “Enhanced variant query limits for single product queries” (jusqu’à 2000 variantes par requête de produit unique, API version 2025-01) : https://shopify.dev/changelog/enhanced-variant-query-limits-for-single-product-queries

  4. Référence Shopify Liquid, objet “line_item” (propriétés capturées via les champs properties[...]) : https://shopify.dev/docs/api/liquid/objects/line_item

  5. Référence Shopify Liquid, objet “line_item” (le préfixe underscore cache une propriété aux clients lors du checkout) : https://shopify.dev/docs/api/liquid/objects/line_item

  6. Shopify Ajax API, “Cart API reference” (un POST incluant des propriétés écrase l’intégralité de l’objet properties) : https://shopify.dev/docs/api/ajax/reference/cart

  7. Centre d’aide Shopify, “Méta-champs” (données personnalisées définies par le marchand sur les produits et autres ressources) : https://help.shopify.com/en/manual/custom-data/metafields

You might also be interested in

Comment ajouter la photographie de produit à 360 degrés sur Shopify
Ajoutez des photographies de produit à 360° à votre PDP Shopify. Couvre la capture d'images, la 3D native, les apps de spin, un viewer JS custom et le lazy-loading.