Qu'est-ce que le constructeur ?
Le constructeur de vitrine est un éditeur visuel qui vous permet de concevoir chaque page de votre boutique sans écrire de code. Les modifications sont prévisualisées en direct au centre de l'écran. Rien n'est visible par les clients tant que vous n'avez pas cliqué sur Publier.
La disposition du constructeur
Le constructeur comporte trois zones :
- Barre latérale gauche : cinq onglets empilés sous forme d'icônes sur le bord gauche. De haut en bas : Marchés (drapeau), Pages, Sections, Paramètres (roue dentée), et l'assistant IA (Amed) épinglé tout en bas.
- Panneau de contrôle : s'ouvre lorsque vous sélectionnez une section ou un bloc, et affiche tous ses réglages.
- Volet de prévisualisation : un aperçu en direct de votre boutique tel que les clients la verront.
Changer de page et de marché
Ouvrez l'onglet Pages pour naviguer entre les pages que vous pouvez modifier : Accueil, Produit, Landing, Collection, Panier, Paiement, Merci, Recherche, Politique, Contact et 404. Pour une description de chaque page, consultez Pages que vous pouvez modifier. Ouvrez l'onglet Marchés (le premier, icône de drapeau) pour changer de marché. Chaque marché conserve son propre modèle et son historique d'annulation pour chaque page, donc les modifications dans un marché n'affectent jamais un autre.
Prévisualisation, fenêtre d'affichage et Inspecteur
Un sélecteur de fenêtre d'affichage vous permet de prévisualiser à différentes largeurs grâce aux boutons Plein écran, Bureau et Mobile. Le sélecteur n'affiche que les options adaptées à la taille de votre fenêtre, donc sur un écran étroit certains boutons disparaissent. La barre supérieure comprend aussi un bouton Prévisualiser (icône œil) qui ouvre votre boutique en direct dans un nouvel onglet, et un bouton Quitter le constructeur.
Le mode Inspecteur est activé par défaut (l'icône curseur dans la barre supérieure est surlignée). Lorsqu'il est activé, cliquer sur un élément dans la prévisualisation sélectionne instantanément cette section ou ce bloc et l'ouvre dans le panneau de contrôle, ce qui est le moyen le plus rapide d'accéder à un élément sans faire défiler la barre latérale. Cliquez sur le bouton Inspecteur pour le désactiver.
Ajouter une section
- Ouvrez l'onglet Sections pour la page en cours.
- Cliquez sur le bouton Ajouter une section (icône plus-cercle) dans la liste, ou ouvrez le menu d'une section et choisissez Ajouter une section avant ou Ajouter une section après.
- Un sélecteur s'ouvre et affiche tous les types de sections que vous pouvez encore ajouter sur cette page. Cliquez sur l'un d'eux pour l'ajouter.
Chaque type de section a un maximum par page. Une fois la limite atteinte, il disparaît du sélecteur, et lorsque l'emplacement est plein, le bouton Ajouter une section est désactivé avec une info-bulle indiquant que le maximum est atteint. Les types de sections sont aussi spécifiques à chaque page (par exemple, un héros ou une newsletter sont réservés à l'Accueil). Le catalogue complet des types et de leurs limites se trouve dans Sections et blocs.
Ajouter un bloc dans une section
Sélectionnez une section, puis dans son panneau de contrôle cliquez sur Ajouter un bloc. Les blocs sont les éléments à l'intérieur d'une section : texte, images, boutons, groupes de mise en page, séparateurs, etc. Les types de blocs disponibles, ainsi que leur nombre, varient selon la section.
Le menu de section (copier, dupliquer, etc.)
Pour accéder à toutes les actions d'une section, sélectionnez-la et cliquez sur l'icône de menu en haut du panneau de contrôle, ou faites un clic droit sur la section dans la barre latérale. Le menu propose :
- Copier : copie toute la section (contenu et style).
- Copier le style uniquement : copie uniquement le style visuel.
- Coller : colle une section copiée. L'indication montre où elle sera placée (Après, À l'intérieur ou Remplacer). Désactivé avec une raison si rien n'est copié, si la limite est atteinte ou si le type n'est pas autorisé à cet endroit.
- Coller le style uniquement : applique le style copié à la section sélectionnée. Désactivé en cas de type incompatible ou si rien n'est copié.
- Dupliquer : crée une copie juste en dessous de l'original, uniquement sur la page en cours. Désactivé si la limite par page est atteinte.
- Masquer / Afficher : bascule la visibilité. Les sections masquées restent dans votre modèle mais ne sont pas visibles par les clients.
- Supprimer : retire la section. Annuler la ramène.
Les lignes de la barre latérale comportent aussi une icône œil (Masquer/Afficher) et une icône corbeille (Supprimer). Les sections obligatoires ne peuvent pas être masquées ou supprimées, donc les infos Produit sur la page Produit et les infos Landing sur la page Landing n'ont pas d'icône corbeille.
Réorganiser les sections et les blocs
Dans la liste des sections, faites glisser une section vers le haut ou le bas pour changer sa place sur la page. La prévisualisation se met à jour immédiatement. Les blocs se réorganisent de la même façon en les faisant glisser dans le panneau de contrôle.
Appliquer une section à toutes les pages
L'En-tête, le Pied de page, la barre d'annonce et le code personnalisé apparaissent sur chaque page. Pour appliquer une version modifiée partout, ouvrez le menu de cette section et choisissez Appliquer à toutes les pages. Cela écrase la section correspondante sur chaque page du marché actuel qui l'inclut déjà (les pages sans cette section sont ignorées). L'action est appliquée directement à votre boutique en ligne, donc elle est irréversible. Le constructeur vous demande de confirmer avant. L'assistant IA peut aussi effectuer cette action pour vous, comme expliqué dans Actions de l'IA du constructeur.
Annuler, rétablir et enregistrer
La barre supérieure propose des boutons Annuler et Rétablir. L'historique est propre à chaque marché et à chaque page, donc annuler sur Accueil n'affecte pas la page Produit. Raccourcis clavier : Cmd/Ctrl + Z pour annuler, Cmd/Ctrl + Maj + Z ou Cmd/Ctrl + Y pour rétablir, et Cmd/Ctrl + S pour publier.
Cliquez sur Publier (en haut à droite) pour mettre vos modifications en ligne. Le bouton est désactivé s'il n'y a aucun changement à enregistrer. La publication se fait par marché et par page, donc publier Accueil ne publie pas la page Produit.
À vérifier avant de publier
- Passez en vue Mobile et faites défiler toute la page, car la plupart des clients sont sur mobile.
- Vérifiez le contraste du texte avec la couleur de fond de chaque section.
- Assurez-vous que chaque bloc image a un fichier média sélectionné, car un espace réservé vide apparaîtra comme un espace blanc sur la boutique en ligne.
- Confirmez que les boutons et éléments de menu mènent aux bonnes destinations.
Pour laisser l'assistant IA créer et modifier des sections pour vous, consultez Créer avec l'assistant IA.