Souhaitez-vous offrir plusieurs variantes de produit sur votre formulaire de commande et permettre à vos clients de les sélectionner à l'aide de cases à cocher? Cet article expliquera comment tout cela fonctionne.

Exemple pour complément alimentaire

Un vendeur vend le complément alimentaire GainMAXX sous forme de boîtes de pilules. À cette fin, ils aimeraient proposer trois quantités différentes sur leur formulaire de commande :

1. GainMAXX – 1 boîte
2. GainMAXX – 3 boîtes
3. GainMAXX – 6 boîtes

Le vendeur crée donc trois produits séparés et ajoute la variante de 3 boîtes et de 6 boîtes au premier produit « GainMAXX – 1 boîte » en tant que complément1>.

Pas la solution que vous cherchez ?

Il existe plusieurs manières d'offrir plusieurs produits sur votre formulaire de commande. Si cet article ne représente pas ce que vous souhaitez mettre en œuvre, je vous recommande de consulter notre fonctionnalité Order Bump ou d'essayer de créer des variantes dans les paramètres du produit dans l'onglet « Variantes ».

Configuration de base :

Pour chaque variante de produit que vous proposez, vous devez créer un votre propre produit et l'assigner en tant que complément à l'un de vos produits.

Pour ce faire, procédez comme suit :

Étape 1 : Créer des produits

Tout d'abord, vous devez créer tous les produits que vous souhaitez afficher sur votre formulaire de commande en tant que produits indépendants créer.

Puisque vous ajoutez les produits à votre processus de vente en tant que compléments par la suite, les étapes suivantes sont suffisantes :

1. Dans la vue Vendeur, allez sur Compte > Produits.
2. Cliquez sur Ajouter un produit.
3. Entrez un Nom pour le produit par ex. [Nom du produit] - [variant] = NutritionMAXX - 1 kilogramme.
4. Entrez une Page de vente.
5. Cliquez sur Enregistrer.

Répétez ces étapes pour les autres produits que vous souhaitez afficher sur votre formulaire de commande.

Pour des raisons techniques, vous devez également ajouter un plan de paiement, mais uniquement pour votre produit principal. En règle générale, le produit avec le prix/quantité le plus bas est le produit principal le plus adapté, car il est affiché en haut de votre formulaire de commande et donc est le premier produit.

Pour ce faire, procédez comme suit :

1. Dans la vue Vendeur, allez sur Compte > Produits.
2. Cliquez sur l'icône E du Produit principal.
3. Passez à l'onglet Plans de paiement.
4. Faites défiler vers le bas et cliquez sur l'icône E à gauche du seul plan de paiement que vous trouverez.
5. Ajustez le prix de votre produit principal dans le champ Premier paiement.
6. Cliquez sur Mettre à jour le plan de paiement existant.

Étape 2 : Définir les produits comme compléments

Maintenant, passez au produit que vous souhaitez utiliser comme votre produit principal.

1. Dans la vue Vendeur, allez sur Compte > Produits.
2. Cliquez sur l'icône E du Produit principal.
3. Passez à l'onglet Compléments.
4. Sélectionnez l'option Oui - en tant que choix par bouton radio dans la liste déroulante Achat du produit principal optionnel, si des compléments sont présents.
5. Cliquez sur Enregistrer.
6. Faites défiler vers la fenêtre Ajouter un complément et sélectionnez l'un des produits que vous souhaitez afficher sur le formulaire de commande dans la liste déroulante Produit.
7. Définissez un prix pour ce complément dans le champ Prix.
8. Enfin, vérifiez si tous les autres paramètres de votre complément correspondent à vos attentes dans la fenêtre « Ajouter un complément ». Si tout est OK, cliquez sur Ajouter un complément.
9. Répétez les étapes 6-8 pour tous les autres produits que vous souhaitez afficher sur le formulaire de commande.

Si vous appelez maintenant le formulaire de commande de votre produit principal, vous pouvez choisir librement entre tous les produits que vous avez créés.

Astuce : Prédéfinir le(s) produit(s) avec des paramètres GET
Si vous souhaitez prédéfinir un produit différent avec des liens différents, vous pouvez utiliser des paramètres GET et ainsi présélectionner les produits souhaités via le lien. Vous pouvez trouver plus d'informations ici. Remarque importante : Selon la loi américaine, les compléments ne doivent pas être pré-sélectionnés. Par conséquent, ils ne sont pas pré-sélectionnés si le revendeur est DS.us.

Concevez un formulaire de commande optimisé pour la conversion

En plus de la configuration de base, il est logique d'adapter et d'optimiser votre formulaire de commande à cet entonnoir afin de générer plus de clients et de revenus.

L'une des structures les plus populaires pour les formulaires de commande dans un entonnoir ressemble à ceci :

Ce formulaire de commande se compose de :

1. Une image d'en-tête
2. Le panier
3. Les champs pour remplir les détails de contact
4. La liste des méthodes de paiement
5. Informations sur la période de retour
6. Une liste de témoignages
7. Une liste de FAQs

Pour concevoir un tel formulaire de commande, procédez comme suit :

Guide

1. Dans la vue Vendor, allez sur Compte > Formulaire de commande.
2. Cliquez sur Créer un formulaire de commande réactif.
3. Vous êtes maintenant dans la vue d'édition de votre formulaire de commande. Vous pouvez concevoir votre formulaire de commande en
   • Ajoutant des widgets (en les faisant glisser et en les déposant depuis le côté gauche sur la ligne souhaitée),
   • Supprimant des widgets (en cliquant sur la poubelle dans le coin supérieur droit du widget. S'il n'est pas visible, le widget doit être présent sur le formulaire de commande),
   • Déplaçant des widgets (en les faisant glisser et en les déposant sur la ligne souhaitée),
   • Changeant la largeur des widgets (en déplaçant le curseur en bas à droite du widget vers la gauche ou la droite),
   • Éditant des widgets (en cliquant sur l'icône E dans le coin supérieur droit du widget, si elle est disponible).
   Configurez la structure suivante en utilisant ces options d'exploitation :
   
4. À côté des widgets HTML, vous trouverez quatre nombres.
   J'ai préparé un code HTML pour vous servir de modèle. Il est important que vous adaptiez ce code à votre entreprise.
   Pour utiliser notre modèle, ajoutez le code suivant aux widgets HTML en cliquant sur l'icône E dans le coin supérieur droit du widget. N'oubliez pas de toujours cliquer sur « Appliquer » après avoir ajouté le code afin de le sauvegarder.
   1. Widget HTML (modèle)
      <div class="box-hl-container"><h1><span>SÉLECTION DE PRODUIT<a></a></span></h1></div> <div class="box-body contact-body"></div>
      Note : Assurez-vous de copier tout le code ! Faites défiler vers la droite pour voir tout le code.
   2. Widget HTML (modèle)
      <div class="guarantee-box"> <div class="guarantee-title"> 60 jours de période de retour! </div> <div class="guarantee-text"> <div class="money-back-guarantee"> <img src="https://dltq3zauxm86g.cloudfront.net/images/orderform/guaranty-seals/de/gold-60.png" alt="" /></div> <b>Avec cette offre, vous pouvez tester ce produit et le retourner pendant 60 jours.</b> Si vous n'êtes pas satisfait, vous pouvez toujours retourner votre produit. Pour cela, cliquez sur le lien d'aide immédiate dans l'email de confirmation de commande et retournez-le vous-même ou contactez moi à beispiel@beispiel.com ou le support Digistore24 à support@digistore24.com. <br /><b>Après tout, votre bonheur est la chose la plus importante pour moi.</b> </div> <div class="guaranteed-by d-inline-block"> <div class="position-relative"> <b>GARANTI PAR</b> <img src="https://dltq3zauxm86g.cloudfront.net/images/logo/made_in_germany.png" alt="" /></div> </div> <div class="clearfix"></div> </div>
   3. Widget HTML (modèle)
      <div class="box-hl-container"><h1><span>CE QUE NOS CLIENTS DISENT<a></a></span></h1></div> <div class="box-body contact-body"></div>
   4. Widget HTML (modèle)
      <div class="box-hl-container"><h1>QUESTIONS FRÉQUEMMENT POSÉES</h1></div><div class="orderform-box-inner box-area-inner with-frame contact-area"><h3><strong data-mce-style="font-size: 14px;">Q : Ici devrait être une question typique de vos clients.</strong></h3><p><strong data-mce-style="font-size: 14px;">R : </strong>Ici devrait être la réponse à cette question.</p><p> </p><p><strong>Q : Ici devrait être une question typique de vos clients.</strong></p><p><strong>R : </strong>Ici devrait être la réponse à cette question.</p><p> </p><p> </p></div>
5. Cliquez sur Paramètres dans le coin supérieur gauche.
6. Si vous souhaitez utiliser notre modèle, collez le code suivant dans le champ Code CSS personnalisé.
   .money-back-guarantee img { margin-bottom: 70px; width: 80%; } #cart > tbody > tr.row_brutto_total.body.summary.brutto > td.summary_label > div { padding-bottom: 10px; } #order_form > div > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div > div > div.box-body.contact-body { margin-top: 0rem; } #order_form > div > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div { background: #f2f9ff; border-top-left-radius: 8px; border-top-right-radius: 8px; } #order_form > div > div:nth-child(5) > div { padding-top: 20px; } #order_form > div > div:nth-child(3) { background: #f2f9ff; } #order_form > div > div:nth-child(5) > div > div { background: #f2f9ff; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } #order_form > div > div.row.has_one_type_only.page_type_orderform { background: #f2f9ff; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } #order_form > div > div:nth-child(5) > div > div > div > div.orderform-box-inner.box-area-inner.with-frame.contact-area { padding-left: 15px; padding-right: 15px; } @media (min-width: 992px) div.box-area-container { padding: 0 } .testimonial-area .testimonial-body .testimonial { background: #f2f9ff; margin-bottom: 0; } .html-area .box-hl-container h1 { margin-bottom: 16px } .box-area-inner .box-hl-container h1 { background-color: #3988E3; border-color: #071A2E; color: #fff; border-top-left-radius: 8px; border-top-right-radius: 8px; text-transform: uppercase; text-align: center; font-size: 16px; font-weight: bold; padding: 10px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.47); } .unit_price .amount { position: relative; font-size: 18px; font-weight: 700; } #cart tbody tr:first-child { background: #a0cae9; border-bottom: 5px solid #f1f1f1; } #cart tbody tr:nth-child(2) { background: #a4dae6; border-bottom: 5px solid #f1f1f1; color: #fff; } #cart tbody tr:nth-child(3) { background: #afdac0; border-bottom: 5px solid #f1f1f1; color: #fff; } .money-back-guarantee { width: 235px; margin: 60px -10px 0 0; overflow: hidden; border-radius: 5px; float: right; position: relative; right: 0; bottom: 0; } .details h3 { font-size: 20px; } .money-back-guarantee { width: 200px; margin: 0; overflow: hidden; border-radius: 5px; float: right; position: absolute; right: -30px; bottom: -80px; } .guarantee-box a, .guarantee-box a:active, .guarantee-box a:visited { color: #00F; } .guaranteed-by { font-size: 24px; letter-spacing: -1px; padding: 18px 21px; width: 307px; bottom: -15px; left: 0; display: block; } .guaranteed-by .position-relative { position: relative; } .guarantee-box .guaranteed-by b { } .guarantee-box .guaranteed-by img { display: block; width: 100%; margin-left: 0px; } .guarantee-box { border: 3px solid #269de2; border-radius: 9px; background: #f2f9ff; position: relative!important; overflow: hidden; } .guarantee-box .guarantee-title { font-size: 20px; padding: 18px 21px; text-transform: uppercase; text-align: left; letter-spacing: -1px; color: black; } .guarantee-box .guarantee-text { padding: 0 10px 8px 21px; font-size: 14px; line-height: 18px; display: block; } .product-top-l-arrow, .product-top-r-arrow { position: absolute; top: -11px; width: 55px; height: 55px; } table.orderform_table > thead > tr { background: #f2f9ff; border: 0px #ddd solid; border-bottom: none; } .click-button { min-width: 200px; width: 100%; height: auto; padding: 12px; font-weight: 700; box-shadow: 0 0 0px transparent; border: 1px solid #777; } .click-button.long_text { font-size: 20px; } .box-body.html-body { padding: 0px!important; } .header { position: relative; margin-bottom: 10px; } .header .logo { width: 120px; } .header .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } div.box-area-container > div.box-area-inner { margin: 0rem; } div.box-area-container { padding: 0 5px 0 5px; position: relative; } .box-area-inner.with-frame, .box-area-inner.empty { background-color: #f2f9ff; border: 0px solid #cccccc; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .box-hl-container { position: relative; overflow: hidden; } .box-hl-container:after { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); width: 0; height: 0; content: ""; border-left: 200px solid transparent; border-right: 200px solid transparent; border-top: 20px solid #3988E3; } .box-body { margin-top: 1rem; } .box-body.cart-top, .cart-body, .html-body { margin-top: 0rem!important; } .cart-body, .contact-area .box-body, .payment-area .box-body, .guarantee-box { margin-bottom: 20px; } .sub-heading { margin: 0; height: 5px; background: #545356; } table.orderform_table { margin-bottom: 0rem!important; } table.orderform_table tbody { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .products-top { position: relative; font-size: 17px; padding: 0 5px 5px; text-align: center; background: #3c3c3c; color: #fff; letter-spacing: -1px; margin: 0; } .table>tbody>tr>td { border-top: 0px solid transparent; } .row:after, .row:before { width: 0px!important } table.orderform_table td[data-responsive-cell-label]:before { display: none!important; opacity: 0; } table.orderform_table tbody .image { padding: 1rem 0 1rem 0; }
7. Cliquez sur Appliquer.
8. Cliquez sur Enregistrer.

Veuillez prêter attention à la note relative aux conseils juridiques.