Travailler avec les blocs

Ajouter, déplacer, remplacer et supprimer des blocs — et les règles sur l'endroit où un nouveau bloc peut atterrir.

Une page est une pile de blocs. Chacun est une section de la boutique : un en-tête, un hero, une grille de produits, une ligne texte-et-image, une FAQ, un pied de page.

Ajouter un bloc

Il y a deux façons de faire, et elles posent le bloc au même endroit :

Ajouter un bloc dans la liste de gauche le place juste sous le bloc qui se trouve en haut de l'aperçu. Faire défiler l'aperçu avant de cliquer déplace donc l'endroit — et la bibliothèque nomme alors le bloc sous lequel le nouveau se posera.
En mode édition, survoler l'espace entre deux blocs de l'aperçu trace une ligne avec un + rond au milieu. Ce plus ajoute le bloc exactement à cette jointure.

Où qu'il atterrisse, un nouveau bloc :

ne passe jamais au-dessus de l'en-tête,
passe au-dessus du pied de page tout en bas,
ne sépare jamais une paire de blocs en demi-largeur.

Tant que l'aperçu n'a pas encore dit ce qu'il montre, un nouveau bloc va à la fin de la page, au-dessus du pied de page.

La bibliothèque propose les blocs qui conviennent à la page depuis laquelle vous l'avez ouverte. Les quatre blocs qui lisent le produit courant — hero produit, infos produit, détails produit et avis sur le produit — n'apparaissent que sur la page de détail d'un produit, parce qu'ailleurs il n'y a aucun produit à montrer.

Cela vaut aussi quand l'IA ajoute ou remplace un bloc, et pour une page personnalisée fraîchement générée.

Déplacer un bloc

Glisser-déposer dans la liste de blocs de gauche : attrapez la ligne du bloc (la poignée à trois traits sur sa gauche la marque), tirez-la où elle doit aller, lâchez. L'aperçu et l'ordre des blocs suivent aussitôt.

Cela ne fonctionne que dans la liste de blocs — pas en tirant sur l'aperçu — et pas sur un téléphone, où la liste est masquée. Aucun bloc n'a jamais besoin d'être supprimé puis reconstruit uniquement pour se trouver ailleurs.

Remplacer un bloc

Remplacer échange la variante en gardant le contenu du bloc et sa place dans la page. C'est ainsi qu'on essaie un autre hero sans retaper le titre.

En-tête et pied de page

L'en-tête et le pied de page sont un seul bloc partagé par toutes les pages. La liste des blocs propose Remplacer pour eux aussi — le bloc garde son identité, donc la nouvelle variante s'affiche sur toutes les pages d'un coup.

Ils ne peuvent être ni supprimés ni déplacés.

La ligne du bas du pied de page porte une identification du vendeur que le design ne peut pas retirer — « Vendeur : nom, adresse » plus un lien vers vos mentions légales. Vous pouvez échanger le pied de page contre une autre variante, mais pas supprimer cette ligne ; une page sans pied de page affiche la même ligne dans une barre fine à elle. Elle nomme qui vend légalement dans votre boutique : c'est une obligation légale, pas un choix de design.

Les blocs en demi-largeur

N'importe quel bloc de contenu — jamais l'en-tête ni le pied de page — peut être mis en demi-largeur dans la section Mise en page de l'onglet Style (les puces Block Width : full / half).

Deux blocs en demi-largeur qui se suivent se placent côte à côte à partir de la largeur d'une tablette, et s'empilent de nouveau sur un téléphone.
Un bloc en demi-largeur sans voisin en demi-largeur occupe toute la ligne.
Les deux moitiés partagent un seul conteneur : chacune prend la moitié de sa Container Width et se colle à la jointure centrale, de sorte qu'elles se lisent comme un seul bloc plutôt que comme deux blocs centrés chacun dans sa colonne. Elles s'alignent au mieux quand les deux ont la même Container Width.

Un appariement fréquent est le hero produit à côté d'infos produit sur une page produit.

Supprimer

Supprimez depuis la liste des blocs ; une courte confirmation vous demande si vous voulez vraiment supprimer ce bloc. Rien n'est perdu définitivement non plus : la modification vit dans le brouillon, et l'historique des versions peut ramener toute la page en arrière.