E-commerce (Boutique en ligne)

Le widget E-commerce ajoute une boutique complète à votre site. Les visiteurs peuvent parcourir les produits, les ajouter au panier et payer via Stripe Checkout. Le widget est activé par site via Paramètres → Widgets → E-commerce. Après activation, les pages d'administration apparaissent dans la barre latérale et les blocs boutique deviennent disponibles dans le Page Builder.

Via E-commerce → Produits, gérez votre catalogue : • Titre, description et prix • Télécharger des images via la médiathèque • Attribuer une catégorie • Définir le stock • Marquer le produit comme actif/inactif Les produits avec stock 0 sont automatiquement affichés comme "Épuisé".

Les produits peuvent avoir des variantes comme la taille ou la couleur. Chaque variante a son propre prix, stock et SKU optionnel. Configuration : 1. Ouvrez un produit dans E-commerce → Produits 2. Définissez les attributs de variante (ex. "Taille", "Couleur") 3. Entrez les valeurs (ex. S, M, L / Rouge, Bleu) 4. Le générateur de matrice crée automatiquement toutes les combinaisons 5. Définissez le prix et le stock par variante

Via E-commerce → Catégories, organisez les produits en groupes : • Nom et slug (nom compatible URL) • Ajuster l'ordre par glisser-déposer Les catégories sont utilisées dans le bloc ProductList comme filtre et dans le panneau de recherche/filtre.

Le bloc ProductList affiche les produits dans une grille ou liste configurable. Comment l'ajouter : 1. Ouvrez une page dans le Page Builder 2. Cherchez "ProductListSection" dans la liste des blocs 3. Faites-le glisser sur votre page 4. Configurez dans la barre latérale : • Titre • Nombre de colonnes (1-4) • Produits maximum • Filtre par catégorie • Afficher prix et image • Afficher recherche et filtres • Quick View on/off

Le bloc ProductDetail affiche une page produit complète avec galerie, prix, description et "Ajouter au panier". Utilisation : 1. Créez une page (ex. slug "product-detail") 2. Ajoutez le bloc ProductDetailSection 3. Configurez la mise en page et les produits similaires Le bloc lit l'ID produit depuis l'URL (?product=xxx).

Le panier est un panneau coulissant qui s'ouvre quand un visiteur ajoute un produit. Fonctionnalités : • Ajouter, supprimer et ajuster les quantités • Sous-total calculé automatiquement • Bouton de paiement redirigeant vers Stripe • Contrôle de stock : impossible d'ajouter plus que le stock disponible Le panier est sauvegardé dans le navigateur (localStorage) et survit à un rafraîchissement.

Lors du paiement, le visiteur est redirigé vers Stripe Checkout : 1. Le visiteur clique "Payer" dans le panier 2. Le serveur valide les prix et le stock (prévention de fraude) 3. Stripe Checkout s'ouvre avec les articles et options de livraison 4. Après paiement : commande créée, stock mis à jour, email de confirmation envoyé 5. Le visiteur voit une page de confirmation

Après un paiement réussi, le visiteur est redirigé vers votre site. Le bloc "Confirmation de commande" (OrderConfirmationSection) affiche automatiquement une page de remerciement avec un récapitulatif de la commande. Important : placez ce bloc sur la MÊME page que votre ProductList (page boutique). Le bloc est normalement invisible et n'apparaît que lorsque le visiteur revient de Stripe avec les bons paramètres dans l'URL. Comment le configurer : 1. Ouvrez votre page boutique dans le Page Builder 2. Ajoutez le bloc "Confirmation de commande" EN DESSOUS de votre bloc ProductList 3. Configurez : titre, couleur d'accent, afficher les articles (oui/non) 4. Publiez la page Après le paiement, le visiteur voit : • Icône de confirmation et texte de remerciement • Numéro de commande • Produits commandés avec prix • Montant total • Adresse de livraison (le cas échéant) • Bouton "Retour à la boutique" Le panier est automatiquement vidé après une commande réussie.

Via E-commerce → Commandes, vous voyez toutes les commandes : • Filtrer par statut (payé, expédié, annulé) ou date • Par commande : articles, montant total, données client • Adresse et méthode de livraison (si configuré) • Numéro et lien de suivi (si l'API transporteur est active) • Mettre à jour le statut

Le tableau de bord E-commerce donne un aperçu de votre boutique : • Chiffre d'affaires des 30 derniers jours • Nombre total de commandes • Produits les plus vendus • Produits avec stock faible

Les visiteurs peuvent laisser des avis sur les produits (1-5 étoiles + texte). Les avis nécessitent une modération : 1. Allez dans E-commerce → Avis 2. Les nouveaux avis sont marqués comme "En attente" 3. Approuver, rejeter ou supprimer par avis Seuls les avis approuvés sont visibles sur le site. Notifications par e-mail : • Le client reçoit automatiquement un e-mail de confirmation après la soumission (avec image du produit et résumé) • Le propriétaire de la boutique reçoit une notification pour chaque nouvel avis (avec un lien direct vers la modération) • Le bouton "Notification par e-mail pour les nouveaux avis" sur la page Avis active/désactive la notification du propriétaire • Un compteur dans la barre latérale affiche le nombre d'avis en attente

Via E-commerce → Coupons, créez des codes de réduction : • Type : pourcentage ou montant fixe • Utilisation maximale • Date d'expiration • Montant minimum de commande Les clients entrent le code lors du paiement via Stripe Checkout.

Les visiteurs qui abandonnent leur panier peuvent recevoir automatiquement un email de rappel. Fonctionnement : • Le visiteur entre optionnellement une adresse email dans le panier • Après 1 heure d'inactivité : rappel #1 • Après 24 heures : rappel #2 (optionnellement avec code de réduction 10%) • Maximum 2 emails par panier abandonné Via E-commerce → Paniers abandonnés, vous voyez un aperçu.

Via E-commerce → Livraison, configurez les tarifs de livraison par pays ou zone. Par zone : • Pays (ex. France, Belgique) • Méthodes de livraison (standard, express) avec prix et délai • Seuil de livraison gratuite Sans configuration de livraison, aucun frais de port n'est calculé.

Via E-commerce → Taxes, activez le calcul automatique de la TVA via Stripe Tax : • La TVA est calculée automatiquement selon le pays du client • Choisissez entre TVA incluse ou exclue • Définissez les pays d'enregistrement • Par produit optionnellement : code fiscal Stripe

Vous pouvez vendre des produits numériques (e-books, templates, fichiers). Après paiement, le client reçoit un lien de téléchargement sécurisé. Configuration : 1. Créez un produit dans E-commerce → Produits 2. Définissez le type sur "Numérique" 3. Téléchargez le fichier 4. Définissez la limite de téléchargement (par défaut 3 par achat) Les produits physiques et numériques peuvent être combinés.

Le bloc Donation permet aux visiteurs de faire un don d'un montant libre via Stripe. Configuration : 1. Ajoutez le bloc DonationSection dans le Page Builder 2. Configurez : montants prédéfinis, montant minimum, titre 3. Les visiteurs choisissent un montant ou en saisissent un personnalisé Via E-commerce → Dons, vous voyez tous les dons.

Les visiteurs peuvent marquer des produits comme favoris via une icône cœur. La liste de souhaits : • Est sauvegardée dans le navigateur (localStorage) • Cœur visible sur les cartes produit et la page de détail • Tiroir de favoris affichant tous les favoris • "Ajouter au panier" depuis les favoris Aucun compte requis.

Vous pouvez proposer des produits en plusieurs devises : 1. Allez dans l'éditeur produit → définissez les prix par devise (EUR, GBP, USD) 2. Définissez les devises disponibles par site 3. Les visiteurs choisissent leur devise via un sélecteur 4. Le paiement se fait dans la devise choisie

Traductions de produits : nom, description et champs SEO par langue. Configuration : 1. Ouvrez un produit → des onglets de langue apparaissent 2. Remplissez la traduction par langue 3. Les clients voient la boutique dans leur langue 4. Fallback : si une traduction manque, la langue par défaut est affichée

Via E-commerce → Import/Export, importez ou exportez des produits en masse : Import : • Télécharger un CSV (glisser-déposer) • Auto-détection : WooCommerce, Shopify ou format générique • Mappage de colonnes ajustable • Aperçu : voir les 10 premières lignes avant import • Essai : validation sans écriture • Max 500 produits par import Export : • Tous les produits incluant les variantes en téléchargement CSV

Les visiteurs peuvent créer un compte sur la boutique : • Connexion avec email + mot de passe • Voir l'historique des commandes : date, articles, total, statut, suivi • "Recommander" ajoute les articles au panier • L'email est pré-rempli au moment du paiement Commander sans compte reste possible.

Le système affiche automatiquement des indicateurs de stock : • Stock 0 : badge "Épuisé", bouton de commande désactivé • Stock 1-5 (configurable) : badge "Presque épuisé" (orange) • Page de détail : "Plus que {n} en stock !" Les admins reçoivent une alerte email quand le stock passe sous le seuil.

Après un paiement réussi, le visiteur est redirigé vers une page de confirmation. Cette page affiche : • Message de remerciement • Articles commandés et total • Adresse de livraison et délai estimé • Le panier est automatiquement vidé

Les produits sont automatiquement optimisés pour les moteurs de recherche : • Balises Open Graph pour les réseaux sociaux (titre, image, prix) • Données structurées JSON-LD (Google Rich Results : prix, disponibilité, avis) • Titre et description SEO optionnels par produit

Le système envoie automatiquement des emails lors d'événements de commande : • Confirmation de commande — immédiatement après paiement • Confirmation d'expédition — quand le statut passe à "Expédié" (lien de suivi) • Demande d'avis — 7 jours après livraison Les emails incluent le nom et le logo de votre site (white-label).

Les fonctionnalités E-commerce dépendent de votre abonnement : • Starter (29€) : pas d'E-commerce • Professionnel (79€) : E-commerce avec max 100 produits, avis, favoris, coupons (5), dons • Agency (199€) : tout illimité + produits numériques, paniers abandonnés, multi-devises, multilingue, CSV import/export, API transporteur, taxes automatiques

Chaque site a besoin de son propre compte Stripe pour les paiements. 1. Allez dans E-commerce → Paiements et sélectionnez le site 2. Cliquez sur 'Connecter Stripe' et suivez l'onboarding Stripe 3. Après la connexion, les paiements des clients vont directement sur le compte du propriétaire du site

Des frais de plateforme sont déduits de chaque paiement via la boutique/le menu. Les frais par défaut sont de 5%. Vous pouvez les ajuster par site. Allez dans E-commerce → Paiements → sélectionnez le site → ajustez le pourcentage.

Un site peut avoir à la fois une boutique en ligne et un menu. Les produits de la boutique et les produits du menu sont séparés. Dans la boutique, seuls les produits de la boutique apparaissent (pas les articles du menu). Dans le menu, seuls les articles du menu apparaissent. Le panier est partagé : un client peut combiner des produits des deux.

Vendez des produits récurrents via des abonnements : 1. Allez dans E-commerce → Produits → créez un nouveau produit 2. Définissez le type sur 'Abonnement' 3. Définissez la fréquence : hebdomadaire, mensuel ou annuel 4. Définissez le prix par période Stripe Billing gère la facturation périodique automatique.

Les clients peuvent créer un compte : • Voir l'historique des commandes avec statut et suivi • Recommander en 1 clic • Enregistrer des adresses de livraison • Gérer les abonnements (pause/résiliation) • Télécharger les factures Un compte n'est pas obligatoire.

Proposez le prélèvement SEPA comme moyen de paiement : 1. Activez le prélèvement SEPA dans votre tableau de bord Stripe 2. Allez dans E-commerce → Paiements → activez 'Prélèvement automatique' Les clients peuvent choisir le prélèvement lors du paiement. Le mandat est géré par Stripe.

Générez automatiquement des factures pour chaque commande : • Les factures sont créées automatiquement après le paiement • Téléchargement PDF dans l'aperçu admin et le compte client • Détails : numéro de facture, date, TVA, articles, total Allez dans E-commerce → Factures pour un aperçu.

Utilisez la caisse intégrée pour la vente physique : 1. Allez dans E-commerce → Paramètres POS 2. Activez le POS et connectez optionnellement un terminal Stripe 3. Recherchez des produits, scannez des codes-barres ou parcourez les catégories 4. Encaissez par carte, espèces ou sur compte Le POS prend en charge : • Paiements par carte via Stripe Terminal • Paiements en espèces • Impression de reçus via Web Serial API • Le stock est mis à jour en temps réel

La page détail du produit peut afficher une barre de recherche pour que les visiteurs trouvent rapidement un autre produit sans revenir à la liste des produits. La barre de recherche : • Se trouve au-dessus du fil d'Ariane sur la page détail • Recherche par titre et description du produit (côté client, rapide) • Affiche jusqu'à 6 résultats avec miniature, titre et prix • Pour les produits en promotion, le prix barré est affiché • Cliquez sur un résultat pour naviguer directement vers ce produit Dans le Page Builder (ProductDetailSection), vous pouvez activer ou désactiver la barre de recherche via 'Afficher la barre de recherche'.

Organisez vos produits par marque pour un filtrage et une navigation faciles : • Allez dans E-commerce → Marques pour gérer les marques • Par marque : nom, slug, logo et description • Associez les produits à une marque dans l'éditeur de produit • Les marques apparaissent dans le filtre sidebar et le méga menu Les visiteurs peuvent filtrer par marque via la sidebar ou le méga menu.

Les catégories supportent désormais une structure parent/enfant : • Catégories de premier niveau (ex. Homme, Femme, Chaussures) • Sous-catégories (ex. Homme → T-shirts & Polos, Jeans & Pantalons) • Dans l'éditeur de catégorie : choisir une catégorie parente • Le filtre sidebar affiche les catégories en arbre dépliable • Le nombre de produits par (sous-)catégorie est calculé automatiquement Cela fonctionne comme les grands magasins de mode.

La liste de produits dispose d'une sidebar complète avec 6 types de filtres : 1. Catégorie — vue en arbre avec parent/enfant et nombre de produits 2. Genre — Femme, Homme, Enfants, Unisexe 3. Couleur — pastilles de couleur visuelles basées sur la couleur du produit 4. Marque — liste alphabétique avec fonction de recherche 5. Taille — grille de boutons (depuis les variantes produit) 6. Réductions — toggle soldes + tranches (jusqu'à 30%, 30-50%, 50%+) Bureau : sidebar à gauche (240px de large), toujours visible. Mobile : panneau coulissant avec bouton 'Afficher X résultats'. Tous les filtres se combinent : sélectionnez Femme + Taille M + Marque EcoWear → seuls les produits correspondants.

Au-dessus de la liste de produits apparaît un méga menu horizontal : • Catégories de premier niveau comme onglets • Le survol d'un onglet ouvre un dropdown avec : – Sous-catégories (colonne gauche) – Marques, top 6 + 'plus' (colonne droite) • Cliquer sur une catégorie ou une marque active directement ce filtre Le méga menu est configurable via le toggle 'Afficher le méga menu' du Page Builder. Sur mobile : le méga menu se masque et les filtres sont accessibles via le bouton Filtre.

En plus des fonctionnalités e-commerce standard, plusieurs modules étendus sont disponibles : • Promotions — réductions par catégorie, marque et produit avec anti-cumul. Voir le chapitre 'Promotions & Soldes' pour plus de détails. • Emballage cadeau — emballage cadeau optionnel comme add-on au checkout. Voir le chapitre 'Emballage Cadeau' pour plus de détails. • Upsell & Cross-sell — recommandations de produits intelligentes pour augmenter votre chiffre d'affaires. Voir le chapitre 'Upsell & Cross-sell' pour plus de détails.

La page de détail produit comprend désormais des onglets avec des informations détaillées : • Informations produit — avec 3 sous-onglets : – Spécifications : tableau clé/valeur (matière, type, saison, etc.) – Composition & Coupe : barres de matières visuelles, indicateur de coupe et conseils d'entretien – Description : description étendue du produit • Livraison & retours — 3 cartes USP avec délai de livraison, frais de port et politique de retour Sur mobile (<768px), les onglets se transforment automatiquement en accordéons avec des animations fluides.

Vous pouvez ajouter un tableau des tailles par produit qui apparaît en popup : 1. Ouvrez un produit dans l'éditeur 2. Allez à l'onglet 'Guide des tailles' 3. Définissez les en-têtes de colonnes (ex. EU, UK, US, CM) 4. Ajoutez des lignes par taille Sur le site, un bouton 'Guide des tailles' apparaît à côté du sélecteur de taille.

La page de détail produit affiche les informations de livraison et de retour dans 3 cartes claires : • Délai de livraison — 'Commandé aujourd'hui, livré demain' • Livraison gratuite — seuil pour la livraison gratuite • Politique de retour — 'Retour gratuit sous 30 jours'

Au-dessus du bouton 'Ajouter au panier', un compteur indique combien de temps le visiteur a pour commander aujourd'hui pour une livraison demain. • Compte à rebours jusqu'à 16h00 (heure limite) • Après 16h00 : 'Commandez maintenant pour une livraison après-demain' • Le compteur décompte chaque seconde

Lorsque le visiteur dépasse le bouton 'Ajouter au panier' en défilant, une barre compacte apparaît en haut de l'écran : • Miniature + nom du produit + prix • Bouton 'Ajouter' toujours visible • Animation slide-in depuis le haut

Les images produit ont une fonction de zoom pour le détail : • Bureau : survolez l'image avec la souris pour un zoom 2x • Mobile : le zoom natif pinch-to-zoom de l'appareil est utilisé Aucune configuration supplémentaire nécessaire.