Sections versus blocs
Une section est une rangée pleine largeur sur une page. Les sections s'empilent verticalement et peuvent être réorganisées, masquées ou supprimées. Un bloc est un élément de contenu dans une section : un bloc de texte, une image, un bouton ou un groupe de mise en page. Certaines sections contiennent un ensemble fixe de blocs (comme l'en-tête), tandis que d'autres vous permettent d'ajouter, de supprimer et de réorganiser librement des blocs.
Sections globales (apparaissent sur chaque page)
Barre d'annonce
Une bandelette promotionnelle fine en haut de la page. Vous pouvez ajouter jusqu'à 7 messages d'annonce individuels, chacun avec son propre texte. Les messages défilent selon deux modes : Ticker (défilement horizontal continu) ou Diaporama (transitions distinctes avec un intervalle configurable de 2 à 10 secondes). D'autres options incluent la direction du texte (gauche à droite ou droite à gauche), un caractère séparateur entre les messages du ticker, la taille de la police (10–30 px) et la palette de couleurs. Vous pouvez ajouter un maximum de 2 barres d'annonce par page.
En-tête
La barre de navigation principale. Elle contient cinq blocs fixes qui ne peuvent pas être ajoutés, supprimés ou réorganisés, seulement configurés :
- Logo : affiche l'image de marque de votre boutique. Définissez la position (gauche, centre ou droite), la largeur (20–300 px), la hauteur (20–300 px) et le rembourrage.
- Menu : le menu de navigation. Choisissez un menu que vous avez créé dans Menus, puis définissez sa position horizontale, la rangée d'en-tête sur laquelle il se trouve (haut ou bas), le type d'affichage (tiroir, méga-menu ou liste déroulante) et la palette de couleurs pour le panneau déroulant. Une option de barre de menu ajoute une bande colorée pleine largeur derrière la rangée inférieure.
- Recherche : une icône de recherche qui ouvre une superposition de recherche de produits. Définissez sa position horizontale (gauche ou droite) et la rangée sur laquelle elle se trouve.
- Panier : l'icône panier avec un badge de comptage d'articles. Options de type d'affichage : Tiroir (un panneau latéral), Liste déroulante (un mini-panier dans l'en-tête) ou Page (redirige vers la page panier complète). Chaque type a son propre sélecteur de palette de couleurs.
- Localisation : un sélecteur de pays et de langue pour les boutiques multi-marchés. Activez ou désactivez l'affichage du nom et du drapeau du pays, et définissez la position et la rangée.
Les paramètres de niveau d'en-tête incluent : le Comportement collant (Défilement (collant intelligent : se masque lors du défilement vers le bas, réapparaît lors du défilement vers le haut), Toujours (fixe en permanence en haut), Réduire (se réduit lors du défilement) ou Jamais (défile avec la page)), plus la Largeur (contrainte à la page ou de bord en bord), la palette de couleurs, le rembourrage haut et bas et un champ CSS personnalisé. Maximum 1 en-tête par page.
Pied de page
La section inférieure de chaque page. Vous pouvez ajouter, supprimer et réorganiser des blocs dans le pied de page. Blocs de pied de page disponibles :
- À propos de nous : une zone d'histoire de marque contenant votre logo, des blocs de texte, des informations de contact et des groupes de mise en page optionnels. Prend en charge les contrôles de direction, d'alignement, d'espacement, de largeur et de rembourrage. Maximum 1 par pied de page.
- Menu : un menu de navigation affiché sous forme de liste de liens. Sélectionnez un menu que vous avez créé dans Menus. Maximum 1 par pied de page.
- Icônes de réseaux sociaux : une rangée d'icônes de plateformes sociales. Plateformes supportées : Facebook, Instagram, Threads, X (Twitter), TikTok, Snapchat, YouTube, LinkedIn, Pinterest, Tumblr, WhatsApp et Telegram. Configurez la taille des icônes (12–64 px), l'espacement (0–48 px), la forme (aucune, cercle, arrondi ou carré), le style de remplissage de la forme (plat ou contour), la taille du conteneur (26–80 px), la palette de couleurs (couleurs de marque, monochrome ou une couleur personnalisée) et l'effet de survol (aucun, marque, échelle, élévation ou opacité). Maximum 1 par pied de page.
- Icônes de paiement : affiche automatiquement les icônes des modes de paiement que vous avez activés dans votre boutique (Visa, Mastercard, PayPal, Stripe, Apple Pay, etc.). Aucune configuration nécessaire. Maximum 1 par pied de page.
- Liens de politique : liens vers vos pages légales (Politique de confidentialité, Conditions générales, Politique de remboursement, Politique d'expédition), générés automatiquement à partir des politiques de votre boutique. Définissez la taille de la police (12–20 px) et la casse du texte (par défaut ou majuscules). Maximum 1 par pied de page.
- Copyright : affiche l'année de copyright et le nom de votre boutique, avec une ligne optionnelle « Propulsé par Storeep ». Définissez la taille de la police (12–20 px), la casse du texte et si l'attribution Storeep doit être affichée. Maximum 1 par pied de page.
- Texte, Séparateur et Groupe : les mêmes composants de mise en page disponibles dans d'autres sections. Voir Composants de mise en page pour tous les détails.
Sections de la page d'accueil
Héro
Une section de bannière pleine fenêtre avec un fond multimédia (image ou vidéo). Deux modes d'affichage : Unique (un seul fond) et Divisé (deux panneaux multimédia côte à côte). Préréglages de hauteur : Petit (50% de la hauteur de la fenêtre), Moyen (70%), Grand (90%), Plein écran (la hauteur totale de l'écran), Image (adopte la taille naturelle de votre média pour que l'image entière soit visible) ou Personnalisé (un pourcentage défini par l'utilisateur). Les blocs de contenu se superposent sur le média et prennent en charge les mêmes contrôles de mise en page qu'un groupe : direction, alignement, espacement et rembourrage. Une superposition avec un remplissage solide ou en dégradé peut être appliquée sur le média. Placé directement après l'en-tête avec l'option En-tête transparent activée, l'en-tête se fond dans le héro et utilise sa palette de couleurs.
Produits mis en avant
Une grille ou un carrousel de produits tirés de votre catalogue. Options de source : Manuel (vous choisissez des produits spécifiques), Les plus récents (les produits ajoutés le plus récemment) ou Les plus vendus (produits classés par volume de ventes). Configurez le nombre de colonnes bureau (1–8), de colonnes mobile (1 ou 2), l'espacement entre les cartes, la largeur de la section et la palette de couleurs. Contient un bloc de carte produit qui définit la mise en page de chaque carte (image, titre, prix, note et bouton d'achat), plus des blocs optionnels de texte et de séparateur au-dessus ou en dessous de la grille.
Diaporama
Un carrousel d'images ou de vidéos pleine largeur. Chaque diapositive peut avoir son propre fond multimédia, sa superposition et ses blocs de contenu (texte, bouton, groupe et séparateur). Jusqu'à 7 diapositives par diaporama, avec un maximum de 2 sections de diaporama par page. Disponible uniquement sur la page d'accueil.
Newsletter
Un formulaire d'abonnement par e-mail. Modes d'affichage : En ligne (intégré dans la page) ou Fixe (un widget flottant ancré au coin inférieur). Les blocs intérieurs incluent du texte (titres et descriptions), un champ de saisie d'e-mail (avec étiquette, espace réservé et avis de confidentialité optionnels), un bouton d'abonnement (icône ou étiquette de texte, avec option de fusion visuelle avec le champ de saisie), des séparateurs et des groupes. Vous pouvez également configurer le titre et le message de succès affichés après l'inscription de quelqu'un.
Sections de la page produit
Info produit
La section principale de détail du produit. Contient la galerie de médias du produit (images et vidéos), la zone de détails du produit (titre, prix, badge d'économies, variantes, formulaire d'achat, bouton de commande WhatsApp et compte à rebours) et le bloc de description du produit. Le formulaire d'achat prend en charge une mise en page en ligne ou en pop-up, un bouton de récapitulatif de commande, du texte d'en-tête et de sous-titre personnalisé, des étiquettes de boutons personnalisées pour Ajouter au panier et Acheter maintenant, un crochet de message cadeau et un compte à rebours pour l'expiration de la réduction. Cette section est requise sur la page produit.
Produits connexes
Une grille de produits affichant des produits liés au produit actuellement consulté, basés sur la même collection ou curatés manuellement. Utilise le même système de cartes produits que la section Produits mis en avant.
Avis
Affiche les avis clients pour le produit actuel. Contient un bloc de résumé des avis (note moyenne en étoiles, nombre total d'avis et barres de distribution optionnelles par étoiles) et un bloc de formulaire d'avis (un bouton qui ouvre un panneau de soumission d'avis). Les avis sont modérés avant d'être publiés.
Sections de la page d'atterrissage
Info d'atterrissage
La section de vente produit pour les pages d'atterrissage. Similaire à Info produit mais mise en page pour une page de vente dédiée : elle combine le formulaire produit, les médias, la description et les blocs de contenu connexes dans une mise en page focalisée unique. Cette section est requise sur la page d'atterrissage.
Sections de la page de collection
Produits de collection
La grille de produits pour une page de collection. Les produits affichés sont extraits de la collection vers laquelle l'acheteur a navigué. Vous pouvez configurer les colonnes bureau (1–8), les colonnes mobile (1 ou 2), l'espacement entre les cartes, les options de tri, une barre latérale de filtrage et la mise en page des cartes produits. Cette section est requise sur la page de collection.
Sections de la page de recherche
Produits de recherche
La grille de produits pour les résultats de recherche. Affiche les produits correspondant à la requête de recherche de l'acheteur. Utilise la même configuration de carte et de grille que la section Produits de collection. Cette section est requise sur la page de recherche.
Sections de la page de contact
Contact
Un formulaire de contact avec les champs nom, e-mail, sujet et message. Vous pouvez ajouter des blocs de texte et des groupes de mise en page au-dessus ou en dessous du formulaire. L'étiquette et le style du bouton de soumission (principal ou secondaire) sont configurables. Les messages soumis sont envoyés à l'adresse e-mail de votre boutique. Cette section est requise sur la page de contact.
Sections disponibles sur toutes les pages
Texte
Une section de texte autonome pour un titre, un paragraphe ou un bloc de contenu formaté. Jusqu'à 3 sections de texte par page. Voir Composants de mise en page pour tous les paramètres de texte.
Image
Une section d'image autonome. Jusqu'à 3 sections d'image par page. Configurez la largeur, l'alignement, le ratio d'aspect (auto, portrait 3:4, carré 1:1 ou paysage 4:3), l'ajustement (couvrir ou contenir), l'arrondi des coins, le rembourrage et un lien cliquable optionnel.
Séparateur
Une ligne de séparation horizontale ou verticale. Jusqu'à 10 sections de séparateur par page. Configurez l'épaisseur, la longueur (en pourcentage du conteneur), le style de la terminaison (tranchant ou arrondi), l'alignement, la palette de couleurs, la largeur (ajuster ou remplir) et le rembourrage. Voir Composants de mise en page pour tous les détails.
FAQ
Une section de questions fréquemment posées en accordéon. Ajoutez autant de paires question-réponse que nécessaire. Configurez la palette de couleurs, la largeur de la section et le rembourrage.
Code personnalisé
Une section pour du HTML, CSS et JavaScript bruts. Votre HTML est inséré dans un conteneur unique sur la page. Le CSS que vous écrivez est automatiquement limité à ce conteneur afin que vos styles n'affectent pas les autres sections. Le JavaScript s'exécute dans une portée isolée et reçoit le conteneur comme seule référence, chargé après que le contenu de la page est prêt pour que vos requêtes se résolvent correctement. Maximum 2 sections de code personnalisé par page. Utile pour intégrer des widgets tiers, des animations personnalisées ou tout ce que les sections standard ne peuvent pas exprimer.