Emplacement du widget sur la page produit

Par défaut, le widget Bundlex s'affiche juste au-dessus du bouton d'achat sur la page produit. Si cet emplacement ne convient pas à votre thème, vous pouvez le déplacer de deux façons : avec un sélecteur de placement personnalisé dans l'intégration de l'application, ou avec une ancre de constructeur de pages. Cet article explique où le widget s'affiche et comment Bundlex choisit entre ces options.

L'emplacement par défaut

Lorsqu'aucune surcharge d'emplacement ne correspond, Bundlex insère le widget avant le conteneur détecté du formulaire produit dans la zone d'achat. La position exacte par rapport aux sélecteurs de variantes et de quantité du thème dépend de celui-ci. En pratique, les cartes d'offre apparaissent au-dessus du bouton d'achat, là où la plupart des acheteurs s'attendent à voir une remise sur quantité ou une offre de bundle.

Cet emplacement par défaut repose sur la détection automatique de votre formulaire produit par Bundlex. La plupart des thèmes sont détectés automatiquement. Si le vôtre ne l'est pas, le widget ne peut pas se connecter de manière fiable au bouton « Ajouter au panier ». Une ancre de placement seule ne corrige pas un formulaire produit manquant ou incorrect ; demandez également au support de vérifier la détection du formulaire.

La chaîne de priorité des emplacements

Pour l'affichage via l'intégration de l'application, Bundlex recherche une cible de placement dans un ordre fixe et utilise la première trouvée. Les éléments situés plus haut dans la liste sont prioritaires sur ceux situés plus bas.

1. Sélecteur de placement personnalisé, priorité la plus élevée. Un sélecteur CSS que vous définissez dans l'intégration de l'application Bundlex. Lorsqu'il est défini et correspond à un élément, le widget est inséré directement après cet élément et aucun élément suivant de cette liste n'est utilisé.
2. Ancre de constructeur de pages (data-bundlex-widget). Un élément HTML portant l'attribut data-bundlex-widget que vous ajoutez à votre page. Le widget est placé dans la première ancre correspondante. Cette option est utilisée lorsqu'aucune cible de placement personnalisée n'est trouvée.
3. Emplacement par défaut avant le formulaire produit, priorité la plus faible. Il s'agit du placement automatique décrit ci-dessus. Il est utilisé lorsqu'aucune des deux options de remplacement ne fournit de cible correspondante.

Comme la chaîne s'arrête à la première correspondance, une cible de placement personnalisée correspondante prend le dessus sur l'ancre et l'emplacement par défaut, tandis qu'une ancre correspondante prend le dessus sur l'emplacement par défaut. Si un sélecteur cesse de correspondre après une modification du thème, Bundlex peut utiliser un emplacement de niveau inférieur.

Option 1 : le sélecteur de placement personnalisé, intégration de l'application

Utilisez un sélecteur de placement personnalisé lorsque vous souhaitez conserver l'affichage via l'intégration de l'application et placer le widget après un élément précis de la page. Si vous ne connaissez pas le sélecteur, demandez au support Bundlex de vous aider à en choisir un. Testez-le d'abord dans un thème brouillon.

Vous le définissez dans l'intégration de l'application Bundlex :

1. Dans votre interface d’administration Shopify, accédez à Boutique en ligne et cliquez sur Modifier le thème.
2. Ouvrez Intégrations d'applications et recherchez Bundlex Bundles.
3. Activez Afficher les paramètres avancés, puis saisissez un sélecteur CSS dans le champ Sélecteur de placement personnalisé.
4. Enregistrez le thème.

Le widget est inséré juste après l'élément correspondant à votre sélecteur. Si vous ne savez pas quel sélecteur utiliser, le support Bundlex peut vous aider à en trouver un. Les paramètres avancés affichent également des champs pour le formulaire produit, le bouton d'achat et les sélecteurs de quantité. Ils servent à corriger la détection automatique sur les thèmes personnalisés, et non à positionner le widget.

Option 2 : une ancre de constructeur de pages

Si vous créez des pages produit avec un constructeur visuel tel que GemPages, PageFly ou Shogun, vous souhaitez généralement placer le widget à un endroit précis de votre mise en page. Pour cela, ajoutez un bloc HTML personnalisé ou un bloc de code à l'endroit souhaité, puis placez-y un élément vide avec l'attribut data-bundlex-widget :

<div data-bundlex-widget></div>

Vous n'avez pas besoin de le saisir manuellement : ouvrez l'onglet Avancé de l'éditeur de bundles et développez Vous utilisez un constructeur de pages ?. Choisissez Copier, puis collez l'extrait dans votre page.

Bundlex remplit la première ancre correspondante avec le widget. Vous n'avez pas besoin d'un extrait différent pour chaque bundle. L'ancre contrôle uniquement l'emplacement. Bundlex choisit toujours le bundle publié à afficher en fonction du produit.

Seule la première ancre correspondante est utilisée

Si plusieurs éléments data-bundlex-widget existent sur la page, Bundlex utilise uniquement le premier dans l'ordre du DOM. Cela est important lorsque votre boutique duplique du contenu, par exemple dans une fenêtre modale d'aperçu rapide ou un tiroir de panier qui répète le balisage du produit. Placez l'ancre uniquement dans la zone où vous souhaitez réellement afficher le widget, afin que la première correspondance soit la bonne.

Quand utiliser plutôt le bloc d'application

Bundlex fournit également un bloc d'application de thème pour la page produit. Il s'agit d'une autre façon d'afficher le widget, distincte de l'intégration de l'application. Utilisez le bloc d'application lorsque vous souhaitez placer le widget à un endroit précis par glisser-déposer dans l'éditeur de thème, sans écrire de sélecteur CSS ni modifier le balisage de la page :

1. Dans l'éditeur de thème, ouvrez un modèle produit.
2. Cliquez sur Ajouter un bloc dans la section où vous souhaitez afficher le widget.
3. Ouvrez l'onglet Applications, choisissez Bundlex Bundles, puis faites glisser le bloc jusqu'à l'emplacement exact souhaité.
4. Enregistrez le thème.

Le bloc place le widget à l'endroit où vous le déposez dans la section. Il constitue donc un bon compromis entre l'emplacement automatique par défaut et un sélecteur écrit manuellement. Le bloc ignore le sélecteur de placement personnalisé et l'ancre de constructeur de pages de l'intégration. Utilisez une seule méthode d'affichage sur la page produit : l'exécution simultanée de l'intégration et du bloc peut rendre l'emplacement et les paramètres dépendants de celui qui s'initialise en premier.

Testez d'abord la modification dans un thème brouillon. Avant de désactiver une intégration fonctionnelle dans ce brouillon, vérifiez que le bloc se trouve dans une section affichée sur le modèle réellement utilisé par le produit. Rechargez immédiatement la page produit après le changement ; si le widget disparaît, réactivez l'intégration. Pour les remises avec cadeaux, privilégiez un emplacement qui conserve l'intégration et le nettoyage des cadeaux sur la page du panier. Consultez intégration ou bloc.

Quel que soit l'emplacement choisi, le widget s'affiche uniquement lorsque l'intégration de l'application, ou le bloc, est activé et qu'un bundle publié correspond au produit. Si le widget ne s'affiche pas du tout, vérifiez ces deux éléments avant de modifier l'emplacement.

Pages d'atterrissage : le bloc « Bundlex Bundles featured »

Les méthodes ci-dessus s'appliquent aux pages produit. Sur une page Shopify classique, c'est-à-dire toute URL /pages/, comme une page d'atterrissage créée pour une campagne, le widget ne peut pas s'y attacher automatiquement et le HTML personnalisé ne le chargera pas non plus.

À la place, ajoutez la section Produit vedette de votre thème, puis placez le bloc Bundlex Bundles featured à l'intérieur. La section du thème fournit le bouton d'achat et le bloc ajoute le widget, comme sur la page d'accueil :

1. Dans votre interface d’administration Shopify, accédez à Boutique en ligne et cliquez sur Modifier le thème.
2. Dans le menu déroulant du modèle en haut, sélectionnez Pages, puis choisissez le modèle utilisé par votre page d'atterrissage.
3. Cliquez sur Ajouter une section et choisissez la section Produit vedette de votre thème, puis sélectionnez le produit dont vous souhaitez afficher le bundle.
4. Dans cette section, cliquez sur Ajouter un bloc, ouvrez l'onglet Applications, puis choisissez Bundlex Bundles featured.
5. Dans les paramètres du bloc vedette, définissez Produit sur le même produit que celui de la section, ou conservez sa connexion Produit de la section.
6. Enregistrez le thème.

Le bloc seul, en dehors d'une section Produit vedette, ne trouve aucun formulaire d'ajout au panier et n'affiche rien. Placé dans la section, il affiche le produit avec ses offres de bundles publiées, et les acheteurs peuvent l'ajouter directement au panier depuis la page d'atterrissage. Cette configuration fonctionne également sur votre page d'accueil.

Référence rapide

Méthode de placement	Où la définir	Priorité
Sélecteur de placement personnalisé	Intégrations de l'application > Bundlex Bundles > Afficher les paramètres avancés	La plus élevée
data-bundlex-widget ancre	Balisage de la page ou constructeur de pages	Utilisée si aucune cible personnalisée ne correspond
Par défaut (avant le formulaire produit)	Automatique	Utilisé si aucun remplacement ne correspond