Widgets de vitrine

Affichage en vitrine#

Activer les blocs d’application dans votre thème#

Pour que les lots apparaissent dans votre vitrine, vous devez ajouter les blocs d’application xBundle à votre thème Shopify. Il s’agit de l’étape de configuration la plus importante.

Que sont les blocs d’application?

Les blocs d’application sont des widgets que xBundle ajoute à votre vitrine. Ils présentent à vos clients les offres de rabais de lot, les fiches produits Mix & Match, les offres Multipack et les recommandations Fréquemment achetés ensemble. Sans eux, les lots existeront dans xBundle, mais ne seront pas visibles dans votre boutique.

Comment activer les blocs d’application :

De retour dans xBundle, le badge s’actualise de lui-même pendant environ une minute et demie après un clic sur Installer ou Désinstaller. S’il ne s’est pas mis à jour, rechargez la page Paramètres.

Ajouter un bloc manuellement : vous pouvez aussi ajouter n’importe quel bloc directement dans l’éditeur de thème. Ouvrez votre thème en ligne (Boutique en ligne → Thèmes → Personnaliser), choisissez Produits → Produit par défaut dans le menu déroulant des modèles, cliquez sur Ajouter un bloc et choisissez le bloc xBundle dans le groupe Applications. Les blocs apparaissent dans l’éditeur de thème sous les noms suivants :

Les widgets de rabais de lot et Mix & Match#

Les lots Fixe et Mix & Match sont présentés par deux blocs connexes :

• Widget de rabais de lot (Fixe & Mix & Match) (nom dans l’éditeur de thème : Discount Bundle) : affiche les cartes de rabais du lot pour les lots Fixe et Mix & Match.
• Widget de lot Mix & Match (nom dans l’éditeur de thème : Bundle Product Card) : le widget de fiche produit qui permet aux clients de choisir les produits qui composent un lot Mix & Match.

Comment ça fonctionne :

• Lorsque vous créez un lot Fixe ou Mix & Match, xBundle crée un nouveau produit de lot dans votre catalogue Shopify, nommé d’après votre lot. Les widgets s’affichent sur la page de ce produit de lot, et non sur les pages des produits membres individuels.
• Créez un lien vers le produit de lot (depuis une collection, votre navigation ou une campagne) pour diriger les acheteurs vers l’offre.
• Les clients ajoutent le lot avec le bouton Ajouter au panier (ou Acheter maintenant) propre à votre thème sur cette page. Le rabais du lot est appliqué automatiquement; aucun code de réduction n’est nécessaire.

Ce que voient les clients : les cartes de rabais

Chaque rabais configuré sur le lot apparaît sous forme de carte affichant :

• Le nom du rabais, avec une invite « Cliquez pour voir les détails »
• La valeur du rabais, par exemple « 20 % », « 10 $ de rabais », « Cadeau gratuit », « Cadeau à 50 % » ou « Livraison gratuite »
• Éventuellement, une ligne de stock telle que « Plus que 5 en stock »
• Un compte à rebours lorsque le rabais a une date de fin
• Un bouton Sélectionner les produits cadeaux sur les rabais Achetez X obtenez Y, qui ouvre une fenêtre contextuelle où l’acheteur choisit son ou ses cadeaux

Cliquer sur une carte ouvre une fenêtre contextuelle Conditions qui liste les exigences du rabais (conditions de quantité, de valeur du panier et de stock). Les cartes sont masquées avant leur date de début et après leur date de fin.

Ce que voient les clients : les fiches produits Mix & Match

Sur une page de lot Mix & Match, le widget de lot Mix & Match liste les produits parmi lesquels l’acheteur peut choisir. Chaque fiche affiche l’image, le titre et le prix du produit, son état de stock (par exemple « Plus que 3 », « 12 disponibles » ou « Épuisé »), un menu déroulant de variantes lorsque le produit en compte plusieurs, un sélecteur de quantité (1 à 10) et un bouton Ajouter qui devient Ajouté une fois le produit sélectionné. Un récapitulatif affiche le total en cours et le nombre d’articles sélectionnés. Le bouton Ajouter au panier de votre thème reste désactivé tant qu’au moins un produit n’a pas été ajouté, puis n’ajoute au panier que les produits sélectionnés.

Personnalisation :

Chaque bloc xBundle possède ses propres paramètres dans l’éditeur de thème Shopify. Sélectionnez-y le bloc pour ajuster les éléments suivants, en plus de la position du bloc sur la page. Pour le reste, les widgets héritent des polices et des styles de votre thème.

Bloc Discount Bundle :

• Design Settings : Card Color, Text Color, Card Size (Small (240px), Medium (340px) ou Large (400px))
• Timer Settings : Show Timer
• Condition Visibility : Show Quantity Condition, Show Cart Value Condition, Show Inventory Condition
• Text Customization : Click to see details text, Show inventory in card, Inventory message (par défaut Only {count} left in stock; utilisez {count} comme espace réservé pour la quantité, les autres nombres du message ne posent pas de problème), Conditions Header, No Conditions Text, Select gifts button et popover title
• Validation Text Templates : le libellé de chaque condition affichée dans la fenêtre contextuelle Conditions (Quantity Min Only, Quantity Min & Max, Cart Value Min Only, Inventory Min & Max, leurs variantes « (Negated) », etc.), avec {min} et {max} comme espaces réservés

Décocher une case « Show … » désactive l’élément correspondant.

Bloc Bundle Product Card :

• Texte : Currency symbol, No items selected text, Item selected (singulier), Items selected (pluriel), Add button text, Added button text
• Couleurs : Add button background, Add button text color, Selected button background, Add button hover background, Card background, Card border color, Selected card background, Image background, Title color, Product title color, Price color, Summary background, Summary border color, Card hover background, Items count text color, Total price text color, No image text color
• Tailles de police : Product title font size et Price font size (10 à 24 px)

Les widgets FBT et multipack#

xBundle comprend des widgets dédiés pour les recommandations Fréquemment achetés ensemble et les offres de volume Multipack. Contrairement aux lots Fixe et Mix & Match, ces types de lots ne créent pas de nouveau produit : le widget apparaît sur la page du produit sur lequel vous avez créé le lot.

Widget Fréquemment achetés ensemble (FBT) (nom dans l’éditeur de thème : FBT Bundle)

Le widget apparaît sur la page du produit principal. Ce que voient les clients :

• Un titre (par défaut « Frequently Bought Together ») et un sous-titre, tous deux modifiables
• Le produit principal aux côtés des produits recommandés, chacun avec une image, un titre, un prix, une ligne de stock (« 5 en stock » ou « Épuisé »), un menu déroulant de variantes au besoin et un sélecteur de quantité
• Une case à cocher sur chaque article pour l’inclure ou l’exclure; les articles épuisés sont décochés et désactivés
• Un Total : en continu avec le prix d’origine barré et l’économie réalisée (par exemple « Offre d’été - Économisez 12,00 $ (20 % de rabais) »), ou « Conditions de rabais non remplies » lorsque les conditions du rabais ne sont pas satisfaites
• Un compte à rebours lorsque le rabais a une date de fin
• Un bouton Acheter ce lot maintenant qui ajoute au panier tous les articles cochés

Les produits recommandés sont déterminés lors de la configuration du lot, et l’ordre de priorité est fixe; ce n’est pas un paramètre. Le widget affiche, dans cet ordre : les produits ajoutés sous l’onglet Manuel, puis Automatique, puis Aléatoire (un produit ajouté dans un onglet supérieur est automatiquement retiré des onglets inférieurs), suivis de vos Recommandations globales à l’échelle de la boutique (Paramètres → Tout → Recommandations globales, jusqu’à 5 produits), et enfin les éventuels produits cadeaux d’un rabais Achetez X obtenez Y. Le widget affiche jusqu’à 7 produits recommandés (sans compter les cadeaux); les Recommandations globales n’apparaissent donc que si vos produits Manuel, Automatique et Aléatoire laissent de la place.

Le bloc FBT Bundle peut aussi être placé sur le modèle de panier dans l’éditeur de thème, mais il n’y a rien à y afficher; les recommandations appartiennent à la page produit consultée.

Paramètres du bloc FBT Bundle dans l’éditeur de thème :

• Content : Bundle Title (par défaut « Frequently Bought Together »), Bundle Subtitle (par défaut « Customers who bought this item also bought »)
• Timer Settings : Show countdown timer, Timer format (Days, Hours, Minutes, Seconds / Hours, Minutes, Seconds / Minutes, Seconds), BXGY Savings Text, Timer position (Under title / Between total and button), Timer style (Segments, Compact, Text, Badge ou Minimal), Timer background color, Timer text color
• Discount Rules : Show discount rules, Rules display style (Tooltip (hover/click) / Inline (always visible) / Badge with icon), Rules background, Rules text color
• Quantity Rule Texts, Cart Value Rule Texts, Inventory Rule Texts : le libellé de chaque condition, avec {min} et {max} comme espaces réservés
• Layout : Max width (px) plafonne la largeur du widget et le centre (par défaut 1100; mettez 0 pour occuper le conteneur de votre thème)

Widget de lot multipack (nom dans l’éditeur de thème : Multipack)

Le widget apparaît sur la page du produit pour lequel le multipack a été créé. Ce que voient les clients :

• Une carte par pack, triées par quantité, affichant le nom du pack (par exemple « Pack de 2 », ou « Achetez 2 articles » si vous ne l’avez pas nommé) et l’économie (« Économisez 10 % », « Économisez 5,00 $ », « Livraison gratuite » ou « Obtenez 1 cadeau gratuit »)
• Le total du pack : le prix réduit pour le pack entier, avec le prix complet du pack barré. Les prix sont des totaux de pack, pas des prix à l’article.
• Un badge « Le plus populaire! ». Si vous avez coché Marquer comme le plus populaire sur l’un des rabais d’un pack lors de la création du lot, ce pack reçoit le badge et est présélectionné. Si vous n’en avez marqué aucun, le widget attribue automatiquement le badge au deuxième pack dès qu’il y a trois packs ou plus, et présélectionne le premier pack.
• Éventuellement, un message de stock (« Plus que 5 en stock » ou « Épuisé ») pour les produits qui suivent l’inventaire et ne continuent pas à se vendre une fois épuisés
• Un compte à rebours sur les packs dont le rabais a une date de fin
• Des produits cadeaux à choisir sur les packs Achetez X obtenez Y et, lorsqu’un pack autorise plusieurs variantes, un sélecteur de quantité par variante pour répartir le pack entre les variantes

Sélectionner un pack définit la quantité, et le bouton Ajouter au panier de votre thème ajoute ensuite ce pack avec son rabais appliqué automatiquement. Le widget masque le sélecteur de variantes de votre thème sur les pages produit multipack, puisque les variantes se choisissent dans la carte du pack. Le pack choisi par l’acheteur est mémorisé pour le reste de sa session de navigation.

Paramètres du bloc Multipack dans l’éditeur de thème :

• Design : Accent Color, Card Background, Card Width (px) (200 à 600, par défaut 320)
• Display Settings : Show Popular Badges, Card Layout (Vertical (Stacked) / Horizontal (Side by Side))
• Timer & Rules : Show Countdown Timer, Timer Style (Default Timer / Badge + Countdown / Simple Block (Ends in HH:MM:SS) / Inline Red Block (Ends in HH:MM:SS)), Timer Position (Badge Style) (Bottom of Card / Under Price / Under Pack Name), Rules to Show (None, Cart Rules Only, Inventory Rules Only, Quantity Rules Only, Cart & Inventory, Cart & Quantity, Inventory & Quantity ou All Rules), AND Conditions Text, OR Conditions Text
• Rule Texts : le libellé de chaque condition, avec {min} et {max} comme espaces réservés
• Inventory Display Messages : In Stock Message (par défaut Only {count} left in stock; utilisez {count} pour la quantité), Out of Stock Message (par défaut « Out of stock »)

Activer ces widgets :

Les deux widgets doivent être activés séparément dans Paramètres → Widgets de lots. Chacun possède son propre bloc d’application que vous ajoutez via l’éditeur de thème Shopify.

L’intégration d’application « Désactiver le panier des lots fictifs »#

Les lots Mix & Match utilisent un produit de lot fictif (« placeholder ») pour héberger le widget de lot sur sa page produit. Cette intégration d’application de thème (installée/désinstallée, et non un interrupteur de paramètres) désactive les boutons Ajouter au panier sur ces produits fictifs partout où ils apparaissent sur vos pages Accueil, Collection et Recherche, afin que les acheteurs composent le véritable lot sur la page produit au lieu d’ajouter le produit fictif vide. Sur la page panier, elle retire aussi tout produit fictif qui s’y serait glissé.

Comment l’installer/la désinstaller :