Bundlizer

Bien démarrer

Bundlizer transforme les options d'un produit en composants au panier : le client choisit ses options sur la fiche produit, et chaque choix devient une ligne de la commande, à son prix.

Installer l'application

1. Installez Bundlizer depuis le Shopify App Store.
2. Ouvrez-la depuis la section Applications de votre admin Shopify.

Forfait

Bundlizer n'a qu'un forfait, gratuit, attribué à votre boutique à la première ouverture de l'app :

• Options et bundles illimités
• Affichage des options et prix d'options dans le panier
• Surcharge possible de l'affichage des options dans le thème
• Synchronisation manuelle des options

Activer l'intégration d'application Options

Les options s'affichent sur votre boutique par l'intégration d'application Options de votre thème. Son état figure sur l'accueil de Bundlizer : Activée ou Désactivée.

1. Sur l'accueil de Bundlizer, cliquez Paramètres d'intégration de l'application. L'éditeur de thème s'ouvre sur les intégrations d'applications, Options présélectionnée.
2. Activez Options.
3. Cliquez Enregistrer.

Vous pouvez aussi ouvrir l'éditeur de thème depuis Boutique en ligne › Thèmes › Personnaliser, puis le panneau Intégrations d'applications.

Essayer l'exemple

Pour voir Bundlizer à l'œuvre avant de créer vos propres options, créez l'exemple depuis l'accueil de Bundlizer : un Urban E-Bike vendu avec quatre options, Battery, Helmet, Accessories et Spare inner tubes, dont les choix sont six produits composants.

1. Sur l'accueil de Bundlizer, dans Créez vos premières options et votre premier bundle, cliquez Créer l'exemple. Les 7 produits sont créés avec leurs photos et la balise Bundlizer example, non répertoriés dans votre canal Boutique en ligne : ils n'apparaissent ni dans la recherche, ni dans les collections, ni dans les recommandations, et seul un lien direct les ouvre. Les 4 options sont ajoutées au vélo.
2. Cliquez Aperçu sur la boutique : la fiche du vélo s'ouvre dans un nouvel onglet, avec ses options.
3. Choisissez des options et ajoutez le vélo au panier : chaque choix apparaît comme un composant du vélo, au panier et au paiement.

Supprimer l'exemple supprime ses 7 produits et ses 4 options, modifications comprises. Ignorer masque la section pour toute la boutique ; pour la réafficher, cliquez afficher la section d'exemple sous Comment ça marche ? sur l'accueil.

Créer des options

Créer une option

Une option est une entrée du métaobjet Option Bundlizer.

1. Allez dans Contenu › Métaobjets › Option Bundlizer.
2. Cliquez Ajouter une entrée.
3. Remplissez les champs décrits ci-dessous, puis cliquez Enregistrer.

Titre, description et image

Ils présentent l'option sur la fiche produit. La description et l'image sont facultatives.

Variantes sélectionnables (Selectable variants)

Les choix de l'option : des variantes de vos produits, d'un produit ou de plusieurs. Chaque choix garde le titre, l'image et le prix de sa variante, et devient un composant de la commande.

Mode de sélection (Selection mode)

• Single choice — un choix dans la liste, le premier sélectionné au départ. Pour un supplément que le client peut refuser, mettez en premier un choix gratuit, comme « Aucun » : un supplément payant ne doit pas partir sélectionné.
• Multiple choices — le client coche autant de choix qu'il le souhaite, aucun au départ.
• Single choice with quantity — un seul choix, avec une quantité.
• Quantity per choice — une quantité pour chaque choix.

Un choix unique s'affiche en boutons radio, ou en liste déroulante quand Display vaut Dropdown.

Quantités

• Default quantity — la quantité de départ d'un choix. Vide, elle vaut 0 en Quantity per choice, pour qu'aucun choix payant ne parte sélectionné, et 1 dans les autres modes.
• Quantity step — la quantité avance de ce nombre d'unités, payées par blocs de cette taille.
• Free units — les premières unités sont offertes, le prix s'applique au-delà.
• Maximum quantity — la quantité la plus haute pour un choix.

Prix

• Price based on — Variant price, le prix de la variante choisie, ou Product price, le prix du produit qui porte l'option.
• Price modification — Percentage du prix de base, Minus ou Plus un montant. Vide, le prix de base s'applique.
• Tier quantities et Tier values — deux listes dans le même ordre : à partir de chaque quantité, la valeur de son palier s'applique, un pourcentage ou un montant dans la devise de votre boutique.

Pour une installation vendue 65 % du prix du produit : Product price, Percentage, palier à la quantité 1, valeur 65.

Suffixes

Les mots affichés après une quantité, au singulier et au pluriel : « serveur », « serveurs ».

Définition personnalisée (Custom definition, JSON)

Un réglage avancé, pour les développeurs : un objet JSON qui surcharge l'option. Ses objets se fusionnent clé par clé, ses autres valeurs remplacent celles de l'option, et ses nouvelles clés s'ajoutent, par exemple pour confier l'option à une surcharge du thème.

Associer des options à un produit

1. Ouvrez le produit dans Produits.
2. Dans ses métachamps, cliquez Bundlizer options et sélectionnez les options.
3. Cliquez Enregistrer, puis synchronisez les options.

Les options s'affichent sur la fiche produit dans l'ordre de la liste.

Synchroniser les options

Votre boutique et le paiement lisent une copie des options enregistrée dans chaque produit. Après avoir créé ou modifié une option, une entrée du métaobjet ou les options d'un produit, rafraîchissez cette copie :

1. Ouvrez la page Configuration de Bundlizer.
2. Cliquez Resynchroniser toutes les options.

Le bouton donne le nombre de produits traités, et signale une option sans variante sélectionnable.

Sur votre boutique

Sur la fiche produit

Les options s'affichent dans le formulaire d'ajout au panier, au-dessus de la quantité et des boutons, avec le prix de chaque choix et le total avec options. Le total est donné à titre indicatif : le prix de chaque composant est fixé au paiement.

Au panier et au paiement

Le produit et ses options forment une seule ligne de panier, éclatée en composants : le produit, puis chaque choix, à son prix. Sous la ligne, les composants se replient derrière Afficher N articles, sur la page panier, dans le tiroir panier et dans la notification d'ajout.

Au paiement, chaque composant s'affiche avec son prix. La commande porte les vraies variantes : le stock et les rapports les comptent.

Réglages

Configuration

• Affichage des options dans le panier — affiche sous chaque ligne du panier les options que le client a sélectionnées. Décochez-la si votre thème les affiche déjà.
• Prix des options dans le panier — affiche le prix du produit et de chaque composant sous la ligne du panier.
• Resynchroniser toutes les options — rafraîchit les options de tous les produits.

Traductions

Les textes que Bundlizer ajoute à votre boutique, comme « Offert », « Total avec options : » ou « Afficher N articles », se traduisent dans la page Traductions de l'app, pour chaque langue de votre boutique.

Les titres des options, de leurs choix et des produits se traduisent dans Translate & Adapt, sur les entrées Option Bundlizer et sur les produits. Les traductions des options arrivent sur votre boutique à la synchronisation suivante.

Pour les développeurs

Styler les options

Chaque option est un fieldset.bundlizer-option qui porte son mode de sélection dans data-selection (one, many, one_quantity, many_quantity). Ses parties gardent des classes stables : bundlizer-option__title, __image, __description, __choices ; bundlizer-choice__label, __image, __title, __price, __suffix ; bundlizer-quantity.

.bundlizer-option[data-selection="many_quantity"] .bundlizer-choice__image { display: none; }

Surcharger l'affichage

Un asset de votre thème, chargé dans layout/theme.liquid, enregistre ses surcharges :

(window.Bundlizer = window.Bundlizer || []).push((bundlizer) => {
  bundlizer.option("mon-extension", { render, price, entries });
  bundlizer.cart({ components });
});

• bundlizer.option prend en charge les options dont la définition personnalisée porte "extension": "mon-extension" : l'élément affiché à la place de leurs choix, le prix d'un choix, les entrées envoyées au panier.
• bundlizer.cart dessine le bloc d'une ligne éclatée du panier, à la place du bouton Afficher N articles.
• L'événement bundlizer:change suit chaque changement de choix, de variante ou de total.