CMS UBLO / sites marchands esf
Créer et présenter vos blocs d'offres produits
Dans ce tutoriel, découvrez comment structurer vos offres et présenter vos blocs d'offres produits pour offrir à vos clients une expérience claire et efficace lors de leur recherche et achat.
1 • Créer une page produit engageante et informative
Pour présenter efficacement vos offres, commencez par personnaliser le bandeau de votre page produit. Ce bandeau inclut une image accrocheuse et une zone de texte, où vous pouvez ajouter le titre de votre cours et une courte description. Suivez les étapes ci-dessous pour créer un bandeau qui attire l’attention de vos clients dès le premier regard.
Dans le bandeau :
- Choisissez une image représentative : Utilisez une photo qui illustre bien votre cours pour que le client puisse facilement identifier le contenu de l’offre.
- Ajoutez un titre clair et impactant : Plus le titre est direct, plus le client trouve rapidement ce qu’il cherche. Un bon titre favorise également le référencement.
- Rédigez une description concise : Introduisez les principales caractéristiques de votre cours en quelques mots. Cette description permet aux visiteurs de savoir d'un coup d'œil si l’offre correspond à leurs attentes.
Étapes à suivre :
- Une fois connecté à votre site esf, activez le mode édition en appuyant sur le crayon bleu.
- Ajoutez ou modifiez l'image de bandeau (cf tutoriel : ajouter du contenu multimédia à son site)
- Cliquez dans la zone de texte pour personnaliser le sous-titre, le titre et la description du bandeau.
- Enregistrez les modifications.
Astuce pour ajouter des informations complémentaires
Si l’espace de description du bandeau ne suffit pas, plusieurs options s’offrent à vous pour fournir davantage de détails concernant le cours :
- Ajouter une zone de texte complémentaire : Positionnez cette zone juste avant les blocs produits. (Selon la configuration de votre site, cette zone apparaîtra soit au-dessus des blocs, soit en parallèle, pour une lecture et un visuel plus adapté)
- Enrichir chaque bloc produit avec les informations essentielles : Placer les informations clés directement dans les blocs produits est idéal pour garantir que le client les lira. (Voir plus loin dans le tutoriel)
2 • Insérer un bloc d'offre produit dans sa page
Pour ajouter un bloc d’offre produit, suivez ces étapes simples :
Tout d'abord, rendez-vous sur la page produit où vous voulez insérer le bloc, puis connectez-vous et activez le mode édition en cliquant sur le crayon bleu.
- Sélectionnez une section existante et/ou appuyez sur le bouton "+" pour ajouter une nouvelle section.
- Dans la bibliothèque d'outils (cf tutoriel "Éditer son site" ), allez dans l'onglet "Offres Produits",
- Choisissez l'option "Bloc d'offre produit". Un bloc neutre s'ajoutera à votre page, prêt à être personnalisé.
.png)
.png)
Astuce : Passez votre souris sur les options de la bibliothèque d’outils pour obtenir un aperçu et visualiser le rendu avant de faire votre choix.
Astuce : Utilisez la barre de recherche dans la bibliothèque d'outils pour retrouver vos sections facilement et rapidement.
3 • Modifier le bouton et l'aspect d'un bloc produit
Choisir le type de bouton de votre bloc produit
Vous pouvez modifier le bouton de votre bloc produit en sélectionnant une variante dans les paramètres :
- Cliquez sur le bouton de réglage bleu ⚙️ pour ouvrir les "Paramètres de la section".
Sélectionnez l’une des options disponibles : - Variante "Par défaut" : inclut un bouton de réservation (panier) paramétrable pour vendre le produit en ligne.
- "Variante avec lien éditable" : propose un bouton personnalisable pour adapter le texte et ajouter un lien, si nécessaire. Exemples : Contactez-nous (redirige vers un formulaire), ou Achat sur place (sans lien, purement informatif).
Configurer le bouton "Contactez-nous"
Lorsque vous choisissez la variante avec lien éditable, deux cas peuvent se présenter :
- Bouton rouge : Le lien vers le formulaire de contact est déjà paramétré. Vous n’avez qu’à valider et enregistrer.
- Bouton gris : Aucun lien n’est encore associé. Suivez ces étapes pour ajouter un lien :
- Cliquez sur le bouton gris "Contactez-nous".
- Sélectionnez l’icône lien 🔗 qui s’affiche en haut à gauche du bloc produit.
- Dans la fenêtre pop-up, cliquez sur l'icône "Lien interne" et accédez à l’arborescence du site.
- Recherchez le lien vers /contact/, puis cliquez sur "Insérer". Le bouton deviendra rouge une fois le lien ajouté.
Conseil : Testez le bouton "Contactez-nous" en cliquant dessus pour vérifier qu’il redirige correctement vers le formulaire de contact.
Modifier la disposition du bloc produit
Vous pouvez ajuster l’orientation du bloc produit selon vos besoins :
- Verticale (par défaut) : idéale pour plusieurs blocs, évitant de rallonger la page.
- Horizontale : recommandée pour un visuel plus adapté lorsque vous n'utilisez qu'un seul bloc pour présenter un produit. Pour modifier cette disposition :
- Cliquez sur le bouton de réglage bleu ⚙️ du bloc produit.
- Sélectionnez l’orientation souhaitée (verticale ou horizontale), validez et enregistrer.
Note : Vous pouvez ajuster la disposition du bloc de texte en suivant le même processus. Sélectionnez le bloc de texte puis le bouton de réglage bleu ⚙️. Choisissez la largeur, puis validez et enregistrez les modifications.
4 • Personnaliser un bloc d'offre produit
Structure d'un bloc d'offre produit
Un bloc d'offre produit se compose de deux parties distinctes :
- Une partie visible en permanence
Cette partie, toujours affichée, regroupe les informations essentielles pour permettre aux clients d’identifier rapidement l’offre :
- Photo représentative du cours.
- Titre (ex. : nom du cours) et sous-titre (ex. : matin/après-midi/journée/durée).
- Description optionnelle courte (ex. : niveaux concernés, nombre de participants min/max).
- Jours, horaires, et lieux de rendez-vous des cours. - Une section dépliable pour les détails supplémentaires
En survolant le bouton "Important", cette section s’ouvre pour dévoiler des informations complémentaires (elle apparaît dépliée lorsque vous êtes connecté). Idéale pour ajouter : les options disponibles, des conseils sur les forfaits, des détails sur les éléments inclus, tels que la médaille...
Modifier l'intérieur du bloc d'offre produit
- Activez le mode édition en cliquant sur le crayon bleu et sélectionnez le bloc produit à modifier.
- Ajouter ou modifier une photo comme d'habitude (cf tutoriel ajouter du contenu multimédia à son site)
- Cliquez directement sur une ligne (ex. : titre, sous-titre, description) pour la modifier.
- En sélectionnant une ligne d'ancrage, des petites icônes noires apparaissent en haut à gauche du bloc produit :
Pour ajouter une ligne :
- Sélectionnez une ligne d'ancrage (la première pour les infos essentielles ; la deuxième pour les infos complémentaires).
- Et cliquez sur l’icône noire "➕" en haut à gauche du bloc produit. Une liste de ligne apparaît.
- Choisissez la ligne correspondant à l'information que vous souhaitez mettre (Exemple : Horaires ou Lieux de RDV). La ligne apparaîtra alors avec un pictogramme adapté.
Attention : Utilisez des lignes adaptées aux informations que vous souhaitez afficher, car elles sont associées à des pictogrammes spécifiques et, parfois, à des infos pratiques. Les lignes soulignées ouvrent automatiquement un pop-up contenant l'info pratique correspondante lorsqu'on clique dessus.
Les autres icônes vous permettent de :
- Dupliquer une ligne : Cliquez sur une ligne puis sur le "+" dans le carré pour la dupliquer.
- Réorganiser les lignes : Cliquez sur une ligne et utilisez les flèches 🔼🔽 pour changer son ordre.
- Supprimer une ligne : Cliquez sur une ligne et sélectionnez la corbeille noire 🗑️ pour la supprimer.
Souvenez-vous : Les petites icônes noires permettent de modifier le contenu du bloc produit tandis que les boutons bleus modifient l'ensemble du bloc produit.
5 • Associer des dates à votre bloc d'offre produit
Lorsqu’un client choisit ses dates de séjour sur votre site, seuls les cours disponibles pendant cette période lui seront proposés. Cette fonctionnalité améliore l’expérience utilisateur et augmente vos chances de conclure une vente.