Ajouter le bloc de formulaire dans l'éditeur de thème

Sami B2B Onboarding ajoute un bloc B2B application form à votre thème. Il affiche un formulaire comme une section à part entière dans un modèle de page, ce qui vous permet de placer vos propres sections au-dessus et en dessous, comme une bannière ou une liste des avantages réservés aux acheteurs en gros.

Note

Avant de commencer : le formulaire doit être publié (Active dans Forms). Gardez également l’intégration d’application activée afin que vos paramètres d’accès à la boutique s’appliquent sur la page. Consultez Activer l’intégration d’application.

Choisir un modèle pour le formulaire

Une section ajoutée à un modèle de page s’affiche sur toutes les pages qui utilisent ce modèle. La plupart des pages utilisent le modèle de page par défaut de votre thème, y compris la page créée par l’application pour votre formulaire, qui contient déjà le formulaire. Pour afficher le formulaire sur une seule page, attribuez-lui son propre modèle, comme dans les étapes ci-dessous.

Ajouter le bloc à un modèle dédié

1. Ouvrir l’éditeur de thème

   Dans votre admin Shopify, accédez à Boutique en ligne › Thèmes et cliquez sur Modifier le thème pour votre thème actuel.

2. Créer un modèle de page

   Ouvrez le menu des modèles en haut de l’éditeur de thème (il indique Page d’accueil à l’ouverture de l’éditeur). Choisissez Pages, puis Créer un modèle. Donnez-lui un nom, par exemple wholesale, basez-le sur Page par défaut, puis cliquez sur Créer un modèle.

   L’éditeur bascule vers le nouveau modèle.

3. Ajouter la section du formulaire

   Dans la barre latérale de gauche, cliquez sur Ajouter une section sous Modèle, ouvrez l’onglet Applications et choisissez B2B application form.

   Le formulaire est ajouté sous forme de bloc dans une section Applications, et l’aperçu y affiche votre formulaire par défaut. Dans l’éditeur de thème, vous voyez toujours le formulaire lui-même, même lorsque vous êtes connecté à votre boutique.

   

   Cliquez sur Ajouter une section sous Modèle, puis choisissez B2B application form dans l’onglet Applications.

4. Choisir le formulaire

   Cliquez sur B2B application form sous Applications dans la barre latérale. Dans son champ Form :

   • laissez-le vide pour afficher votre formulaire par défaut, ou
   • saisissez l’identifiant (slug) d’un autre formulaire, le nom court demandé par le texte d’aide du champ.

   Pour trouver l’identifiant d’un formulaire, accédez à Forms dans l’application, cliquez sur … (More actions) sur la ligne du formulaire et choisissez Copy embed code. Collez le code à un endroit où vous pouvez le lire : l’identifiant est le texte entre les derniers guillemets. Pour le formulaire Wholesale application, il s’agit de wholesale-application.

   

   Laissez Form vide pour votre formulaire par défaut, ou saisissez l’identifiant d’un autre formulaire.

5. Enregistrer

   Cliquez sur Enregistrer en haut à droite de l’éditeur de thème.

6. Attribuer le modèle à une page

   Dans votre admin Shopify, accédez à Boutique en ligne › Pages. Ouvrez la page qui doit afficher le formulaire, ou cliquez sur Ajouter une page pour en créer une et lui donner un titre, par exemple Wholesale. Sous Modèle de thème, choisissez wholesale, puis cliquez sur Enregistrer.

   Ne l’attribuez pas à la page créée par l’application pour le formulaire : cette page contient déjà le formulaire, qui s’afficherait donc deux fois.

Utiliser le raccourci depuis Forms

L’application propose un raccourci qui ouvre l’éditeur de thème avec le bloc déjà prêt.

1. Ouvrir le raccourci

   Dans l’application, accédez à Forms. Cliquez sur … (More actions) sur la ligne du formulaire et choisissez Add block in theme editor.

   

   Add block in theme editor ouvre l’éditeur de thème avec le bloc de formulaire ajouté.

2. Choisir le formulaire et enregistrer

   L’éditeur de thème de votre thème actuel s’ouvre sur le modèle de page par défaut, avec le bloc B2B application form ajouté. Cliquez sur le bloc, saisissez l’identifiant du formulaire dans Form (ou laissez le champ vide pour votre formulaire par défaut), puis cliquez sur Enregistrer.

Attention

Le raccourci ajoute la section à votre modèle de page par défaut. Toutes les pages qui utilisent ce modèle affichent alors le formulaire, y compris la page créée par l’application, qui l’affiche deux fois. Pour afficher le formulaire sur une seule page, utilisez un modèle dédié comme décrit ci-dessus.

Vérifier sur votre boutique

1. Ouvrir la page en tant que visiteur

   Ouvrez la page de votre boutique dans une fenêtre de navigation privée pour la voir comme un acheteur non connecté. Le formulaire s’affiche dans sa section, entre vos autres sections.

2. Corriger les problèmes, le cas échéant

   • This form is not available right now. L’identifiant saisi dans Form ne correspond à aucun formulaire publié. Vérifiez l’orthographe ou publiez le formulaire dans Forms.
   • Un autre formulaire s’affiche. Le champ Form est vide, la section affiche donc votre formulaire par défaut. Saisissez l’identifiant du formulaire souhaité, ou définissez-le comme formulaire par défaut avec … (More actions) › Set as default dans Forms.

Si vous verrouillez votre boutique, une page de Boutique en ligne › Pages qui affiche le formulaire reste accessible aux visiteurs. Consultez Verrouiller la boutique.

Étapes suivantes

• Concevoir le formulaire — adaptez la police, les couleurs et la largeur du formulaire à la page qui l’entoure.
• Coller le code d’intégration — placez plutôt le formulaire dans une section Custom Liquid ou un créateur de pages.
• Utiliser la page de formulaire créée par l’application — partagez une page prête à l’emploi lorsque vous n’avez pas besoin d’une page personnalisée.