Sur cette page
BigCommerce n'a pas un modèle de magasin d'applications d'entreprise aussi strict que celui de Shopify, ce qui signifie qu'un widget de recommandation de taille peut être ajouté de plusieurs façons — et la plupart des mauvaises façons échouent uniquement lorsqu'un client atteint un thème ou un appareil spécifique. Obtenir le placement du script et le ciblage de page correct la première fois économise une semaine de tickets « pourquoi ça n'apparaît pas sur mobile ».
Les marchands BigCommerce se trouvent dans une position inhabituelle : la plateforme est suffisamment flexible pour permettre l'injection de scripts bruts via le gestionnaire de scripts, mais cette même flexibilité signifie qu'un widget de taille peut finir par être chargé sur toutes les pages, bloquer le rendu ou être dupliqué dans des variations de thème Stencil si la configuration n'est pas délibérée. Cet article présente la mécanique réelle — où va le script, comment le limiter aux pages de produits et comment confirmer qu'il survit à la personnalisation de thème — plutôt qu'une annonce générique « installer notre application ».
Pourquoi l'Intégration BigCommerce N'est Pas Juste « Coller une Balise Script »
Le moteur de thème Stencil de BigCommerce affiche les pages de produits à partir de modèles Handlebars, et la plupart des magasins personnalisent ces modèles au fil du temps — ajoutent des champs personnalisés, réorganisent la boîte d'achat ou échangent une section du générateur de pages. Un widget de taille qui suppose une structure DOM fixe (par exemple, s'insérant toujours juste après .productView-options) peut échouer silencieusement à apparaître sur un thème personnalisé, ou apparaître à mauvais endroit.
L'approche la plus sûre consiste à traiter le widget comme deux problèmes distincts : charger le script (une seule fois, globalement, de manière asynchrone) et monter l'interface utilisateur du widget (uniquement sur les pages de produits, ciblées par un sélecteur stable ou un élément conteneur désigné). Confondre les deux est la cause la plus courante de widgets qui « fonctionnaient dans le magasin de démonstration » mais cassés sur le thème réel du client.
Injection de Script via le Gestionnaire de Scripts BigCommerce
Le gestionnaire de scripts intégré de BigCommerce (Vitrine > Gestionnaire de scripts dans le panneau de contrôle) est le chemin recommandé pour ajouter des scripts tiers — il est conçu exactement pour cela et évite de modifier directement les fichiers de thème, ce qui signifie que le script survit aux mises à jour de thème.
Quelques paramètres pratiques sont importants :
| Paramètre | Valeur Recommandée | Raison |
|---|---|---|
| Emplacement | En-tête ou Pied de page | Le pied de page évite de bloquer le rendu initial |
| Méthode de Chargement | Asynchrone/Différé | Empêche le script du widget de retarder le rendu de la page |
| Placement de Page | Pages de la vitrine limitées aux pages de produits, ou Toutes les pages avec vérification du chemin dans le script | Évite de charger JavaScript du widget sur les pages de panier, de paiement, de blog |
| Catégorie de Script | Essentiel ou Analytique | Essentiel garantit qu'il n'est pas bloqué par les paramètres de consentement par défaut ajustés pour les scripts analytiques |
Si les règles de placement de page du gestionnaire de scripts ne sont pas assez granulaires pour la structure d'URL du magasin, chargez le script globalement mais différez l'initialisation avec une vérification d'exécution — la plupart des SDK de widgets de taille exposent un appel init() qui peut être contrôlé par if (window.location.pathname.includes('/products/')) ou une vérification contre l'objet context.page_type de BigCommerce exposé dans les modèles Stencil.
Placement du Widget sur la Page de Produit
Le placement de la page de produit est le point où la plupart des défaillances visibles se produisent. Les thèmes BigCommerce Stencil (Cornerstone et ses forks) exposent généralement une structure de boîte d'achat cohérente, mais « généralement » n'est pas « toujours » une fois qu'un marchand a installé une personnalisation de thème.
Deux stratégies de placement fonctionnent de manière fiable :
- Accrochez-vous à un élément stable fourni par le thème. Les thèmes basés sur Cornerstone conservent généralement un conteneur
.productView-optionsou.form-action-addToCart; l'insertion juste avant le bouton Ajouter au panier garde le widget visuellement lié aux décisions de taille sans dépendre de l'espacement exact. - Utilisez un div espace réservé désigné. Pour les marchands à l'aise avec une petite modification de modèle, l'ajout d'un
<div id="size-widget-mount">vide danstemplates/components/products/product-view.html(ou l'équivalent du générateur de pages) donne au script une cible garantie et stable indépendamment des futures modifications de thème. C'est l'option plus durable si le magasin s'attend à changer de thème.
Évitez les stratégies de sélecteur basées sur le contenu du texte ou la position nth-child — les deux se cassent dès qu'un commerçant réorganise la boîte d'achat ou ajoute un bloc d'options d'abonnement au-dessus.
Test sur les Thèmes et les Appareils Avant le Lancement
Un script qui s'affiche correctement sur le thème de démonstration par défaut de Cornerstone n'est pas la preuve qu'il fonctionne sur le thème actif du marchand. Avant d'appeler l'intégration terminée, vérifiez : le thème de production réel (pas le thème sandbox), une page de produit modifiée par le générateur de pages si le marchand utilise le générateur de pages visuelles de BigCommerce, et au moins une fenêtre d'affichage mobile, car les points d'arrêt réactifs de Stencil peuvent masquer ou réduire le conteneur de boîte d'achat auquel le widget s'accroche.
Une liste de contrôle simple avant le lancement :
- Le widget apparaît sur un produit simple standard.
- Le widget apparaît sur un produit avec variantes/options (les widgets de taille ont souvent besoin de réagir à la sélection de variantes).
- Le widget n'apparaît pas sur les pages de panier, de paiement ou de blog s'il est limité de cette façon.
- Aucune erreur de console au chargement et aucun décalage de disposition qui repousserait le bouton Ajouter au panier en dehors de l'écran sur mobile.
- Le widget s'affiche toujours après une actualisation forcée et après la navigation côté client (Cornerstone de BigCommerce utilise un comportement de panier/vue rapide AJAX qui peut ignorer un chargement de page complet).
Ce dernier point détecte un nombre surprenant de bugs — les widgets initialisés uniquement sur DOMContentLoaded peuvent disparaître après une modale d'aperçu rapide ou un changement de variante piloté par AJAX, car aucun chargement de page complet ne se déclenche après.
Où s'Intègre YourSizer
Le script de YourSizer est conçu pour être déposé dans le gestionnaire de scripts de BigCommerce sans modification de fichier de thème pour la plupart des magasins basés sur Cornerstone, et il se monte contre un sélecteur configurable afin que les marchands ayant des boîtes d'achat personnalisées ne soient pas coincés à modifier les modèles. Pour les magasins utilisant un thème fortement modifié ou une mise en page du générateur de pages, nous soutenons l'approche div d'espace réservé décrite ci-dessus, qui maintient le comportement de montage stable entre les changements de thème futurs. La logique de dimensionnement s'exécute côté client et réagit à la sélection de variantes, de sorte que le widget reste synchronisé lorsqu'un acheteur change de couleur ou de style plutôt que de ne se déclencher qu'au chargement initial — la même mécanique couverte dans comment l'essayage virtuel fonctionne avec les modèles de diffusion s'applique à la façon dont le moteur de recommandation lit le produit et le contexte de variante.
Questions Fréquentes
L'ajout d'un widget de taille ralentit-il mon magasin BigCommerce ?
Cela peut si le script bloque le rendu ou se charge de manière synchrone dans l'en-tête. Le chargement de manière asynchrone ou différée via le gestionnaire de scripts, et la limitation du champ d'application aux pages de produits uniquement, maintient l'impact minimal — la plupart des widgets de taille bien construits ajoutent bien moins qu'une centaine de millisecondes et ne touchent pas aux métriques Core Web Vitals qui comptent pour le référencement ou la conversion, car ils se montent une fois que le contenu produit principal a déjà été peint.
Un widget de taille BigCommerce fonctionnera-t-il avec les pages de produits du générateur de pages de BigCommerce ?
Oui, mais le placement nécessite un petit ajustement. Page Builder permet aux marchands de réorganiser visuellement les sections de la page de produit, ce qui signifie qu'un widget ancré à un sélecteur CSS fixe peut finir dans un endroit inattendu ou ne pas trouver du tout son ancre. L'approche div d'espace réservé, où un marchand dépose un bloc de widget désigné directement dans la mise en page du générateur de pages, est l'option plus résiliente pour les magasins utilisant activement cet éditeur.
En quoi un widget de taille BigCommerce diffère-t-il de l'installation d'une application sur Shopify ?
BigCommerce n'applique pas l'extensibilité réservée à la seule boutique d'applications de la manière dont le modèle d'extension d'application de thème de Shopify le fait de plus en plus, donc l'injection de script via le gestionnaire de scripts est un modèle entièrement pris en charge et de première partie plutôt qu'une solution de contournement. Cela donne plus de contrôle sur exactement où et quand le widget se charge, mais cela met aussi plus de responsabilité sur l'intégrateur pour limiter correctement le script — le modèle de bloc d'application de Shopify gère automatiquement une partie de cette limitation.
Conclusion
Un widget de recommandation de taille sur BigCommerce réussit ou échoue sur les détails de où le script charge et où il se monte, pas sur la logique de dimensionnement elle-même. Obtenez l'injection de script limitée correctement via le gestionnaire de scripts, accrochez le widget à une cible stable plutôt qu'à un sélecteur fragile, et testez sur le thème réel et la fenêtre d'affichage mobile du marchand avant d'appeler l'activation en direct — le paiement est un widget qui continue de fonctionner à travers le prochain ajustement de thème au lieu d'un qui nécessite une re-réparation tous les trimestres.