Configurateur de produits Shopify : Comment en créer un sans application

Points clés

• Un configurateur de produits Shopify permet aux acheteurs de créer un produit sur mesure sur la page produit (PDP) - choisir une essence de bois, une taille, une gravure - et d’envoyer ces choix au panier.
• Les variantes gèrent les combinaisons tarifées et gérées en stock. La limite est désormais de 2 048 variantes par produit avec toujours 3 options par produit. Au-delà, il faut adopter une autre approche.
• Les propriétés de l’article (line item properties) 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 des données fixes sur le produit (matériaux, délais de livraison, listes d’options). Ils sont définis par le marchand, et ne sont pas saisis par le client.
• La réalité des choses : 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 aucune 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 bundles à composer soi-même ou aux kits sur mesure. L’acheteur choisit des options, le prix se met à jour, et les sélections sont attachées à la commande pour que votre équipe puisse la préparer correctement.

Ce guide couvre les véritables éléments de base : variantes, propriétés de l’article, options de produits, méta-champs, ainsi que Liquid et JavaScript personnalisés. Il compare l’approche en code natif aux applications de configuration, sans prétendre qu’aucune des deux n’est exempte de compromis. Chaque limite ci-dessous a été vérifiée par rapport à 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 créons Fudge, l’opérateur IA pour les boutiques Shopify, noté 4.9 sur le Shopify App Store et doté du badge Built for Shopify. Nous écrivons du Liquid, du JavaScript et du CSS directement dans les thèmes tous les jours, donc les compromis évoqués dans ce guide proviennent du déploiement de vrais configurateurs, pas 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 Shopify peuvent-elles gérer un configurateur ?

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 : Quand utiliser les propriétés de l’article ?

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

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.⁵ 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.⁶

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

• 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 permettent de lancer des configurateurs fonctionnels. La différence réside dans ce que vous possédez et ce que vous supportez.

Les applications sont le bon choix si vous avez besoin de quelque chose en ligne cette semaine, que le configurateur est standard et qu’un abonnement mensuel est acceptable.

Le code natif l’emporte quand les performances comptent, que vous ne voulez aucune dépendance tierce sur une page cruciale pour vos revenus, ou que votre produit nécessite une logique que les paramètres d’une application ne peuvent pas exprimer. Historiquement, le compromis était le temps de création et la nécessité d’avoir un développeur.

C’est ce fossé que Fudge comble. Fudge, l’opérateur IA pour les boutiques Shopify, écrit du Liquid, du JavaScript et du CSS directement dans votre thème via son éditeur de boutique. Vous décrivez le configurateur, et il écrit les sélecteurs d’options, la logique conditionnelle, le prix en temps réel et les propriétés du panier dans votre thème, sous forme de brouillon que vous testez sur la page produit avant de publier. Une fois en ligne, Fudge compare l’ajout au panier et le taux de conversion sur cette page avant et après.

Par exemple, dites à Fudge :

“Ajoute un configurateur sur la page produit de ma table en chêne : un sélecteur de bois à partir du méta-champ wood_options avec des différences de prix, un champ de gravure optionnel limité à 20 caractères, et un total en direct. Envoie les choix au panier sous forme de propriétés de l’article.”

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