Créer un configurateur de produits sur mesure sur Shopify

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 :

• Un produit peut avoir jusqu’à 2 048 variantes, au lieu de l’ancienne limite de 100.¹
• Un produit reste toujours limité à 3 options (par exemple Taille, Couleur, Matériau).²

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

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 :

• Plus de trois options indépendantes.
• Des options avec un champ de texte libre (un prénom à graver).
• Des combinaisons que vous ne stockeriez jamais (ex: un canapé sur mesure dispo dans 40 tissus et 6 formes différentes donne des milliers de variantes que personne ne garde en inventaire).

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 de ligne (line item properties) sont des paires clé-valeur attachées à un article spécifique dans une commande spécifique. C’est le pilier des configurateurs. Contrairement aux variantes, elles n’ont pas besoin d’exister à l’avance et ne gèrent pas le stock.

Vous les passez via des inputs de formulaire nommés properties[...] à l’intérieur du formulaire 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 cette ligne de commande, visible dans le panier, lors du paiement, sur la commande, et dans l’email de confirmation.⁴

Propriétés cachées

Ajoutez un underscore en préfixe du nom de la propriété, et Shopify la masquera du check-out client tout en l’enregistrant sur la commande.⁵ Utilisez cette technique 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 masquent également ces propriétés avec un préfixe underscore dans le panier, mais pas tous, alors pensez à bien vérifier votre template de panier.

Faire passer les choix dans le panier AJAX

Si votre configurateur ajoute au panier sans recharger la page, ajoutez 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': 'For Sam',
      'Gift wrap': 'Standard',
      '_config_id': 'cfg_8842'
    }
  })
})

Un comportement clé à connaître : un POST qui inclut des properties écrase l’intégralité de l’objet de propriétés pour cet article. Vous ne pouvez pas patcher une seule clé, et vous ne pouvez pas réinitialiser les propriétés en objet vide une fois défini - il vous faudra supprimer puis rajouter la ligne.⁶

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

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

• Une liste JSON des options valides et de leurs ajustements de prix.
• Les informations sur les délais ou un texte “Fabriqué sur commande en X semaines”.
• Les specs matériaux, notes d’entretien, dimensions.

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 parfois des options de dépendance. Une option “Position du monogramme” ne devrait apparaître qu’une fois la case “Ajouter un monogramme” cochée. Pour gérer ça, il suffit d’écouter les évènements de changement pour afficher/masquer vos 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 ajouté à la somme des deltas sélectionnés. À recalculer sur chaque mouvement :

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 cosmétique. Shopify facture dans la réalité le prix de la variante qui est ajoutée au panier. Si une option modifie vraiment ce que le client paie, ce doit être une variante ou un produit supplémentaire additionnel avec un prix, et non une simple propriété de ligne. Les propriétés de ligne n’embarquent pas de prix avec elles.

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.

• Exigez les choix dont vous avez besoin. Bloquez le push tant que chaque option obligatoire n’est pas définie.
• Contraignez le texte libre. Limitez la taille des gravures avec maxlength et bloquez les caractères que vous ne pouvez pas utiliser.
• Protégez les dépendances. Si le bouton monogramme est sur On, une position doit être sélectionnée.

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.

• Le payload. Les apps de configuration balancent souvent tout leur script JavaScript, CSS, et parfois un framework entier sur chaque page produit. Le code natif ne demandera que quelques kilooctets isolés sur la PDP.
• Délai de rendu. Affichez l’état initial des options en Liquid pour que l’outil de sélection soit affiché instantanément, et associez les actions via JavaScript ensuite. Construire l’UI uniquement côté client avec des scripts cause trop de latence.
• Requêtes. Récupérez les données des options à partir des méta-champs chargés direct sur la page plutôt que d’attendre la fin du load pour aller les fetcher.

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 donnent des configurateurs qui fonctionnent. La différence, c’est ce dont vous êtes propriétaire et ce que vous emportez avec vous.

Les apps sont le bon choix quand il vous faut quelque chose en ligne cette semaine, que votre configurateur est très standard, et qu’ajouter de nouveaux abonnements ne vous dérange pas.

Le code natif est le vainqueur si la performance compte, que vous ne voulez pas voir atterrir une dépendance externe sur la page de votre produit le plus important, ou que votre produit a un besoin qu’une app ne peut tout simplement pas régler. Cependant, de façon historique cette approche prend beaucoup de temps et demande d’engager un développeur.

C’est pour combler ce gap qu’on a lancé Fudge. Fudge est un système nativement IA pour Shopify qui écrit du Liquid, JavaScript, et CSS à même votre thème. Vous lui dites ce que vous attendez du configurateur, et l’outil pond l’ensemble du code prêt-à-l’emploi - vos options, vos logiques conditionnelles, les calculs de prix en live, les propriétés connectées à votre panier ; tout pour se passer d’une application de plus. Vous avez donc le rendu super léger de la méthode native mais pour une simple fraction du prix initial.

Pour résumer

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

• Les variantes pour gérer l’association prix - stock (la taille, modèle du produit).
• Les propriétés de ligne pour les options incluant champs texte et sans prix (gravure, mots doux, fichiers uploadés).
• Les méta-champs pour héberger les listes de choix de base et informations textuelles que votre code ira voir.
• Liquid et JavaScript pour générer les visuels du configurateur, vos conditions spécifiques, et vos prix affichés en live sur l’écran.

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