Projet client · E-commerce

Noisettes Hoydi28

Pour Hoydi28, une marque de noisettes de Giresun, nous avons développé la boutique en ligne, un panneau d'administration installable sur téléphone et les intégrations de paiement, de livraison, de facture électronique, d'e-mail et Google qui les accompagnent. L'équipe IA de Collapssi travaille dans le panneau : elle rédige des articles de blog, traduit le site dans de nouvelles langues, planifie la vitrine et les campagnes et prépare des réponses aux e-mails reçus. La boutique et le panneau forment une seule application ; chaque page est pré-générée pour Google à chaque mise en ligne.

  • JavaScript (application monopage)
  • Supabase : PostgreSQL et Edge Functions
  • Netlify
  • Pages pré-rendues avec Playwright
  • PWA et Web Push
  • iyzico
  • EDM e-facture / e-archive
  • Yurtiçi Kargo et Sürat Kargo
  • Resend
  • Google Analytics 4, Search Console, Google Ads, Merchant Center
  • Google Places API
  • Claude API
  • OpenAI Images API
Page d'accueil de la boutique
Page d'accueil de la boutique
Langues
Turc, anglais et nouvelles langues ouvertes selon un calendrier
Paiement
Carte bancaire (iyzico), virement
IA
Une équipe Collapssi de sept membres et un assistant publicitaire
Intégrations
Livraison, facture électronique, Google Ads, Analytics, Search Console

Les captures d'écran proviennent d'une copie locale du site et du panneau d'administration. Les noms de clients, commandes, entreprises et tous les chiffres des panneaux sont des données d'exemple, et non les ventes ou la fréquentation réelles de la boutique. Les noms des auteurs d'avis Google sont réduits à leurs initiales.

01

Boutique et pages produits

La boutique fonctionne avec le même soin sur téléphone et sur ordinateur. Produits, catégories et mise en page se modifient depuis le panneau ; les changements de prix et de textes apparaissent immédiatement sur le site. La page produit répond sur un seul écran aux questions qu'un client est susceptible de se poser.

  • Boutique en turc et en anglais ; de nouvelles langues s'ouvrent selon un calendrier automatique, et les visiteurs se voient proposer une traduction dans leur langue
  • Badges automatiques : « Meilleure vente » pour les produits les plus vendus des 60 derniers jours et « Très consulté » pour les plus vus, mis à jour chaque nuit
  • Fiche allergènes : allergènes contenus, traces possibles et qui peut le consommer (sans gluten, végan, etc.) sous forme d'étiquettes colorées
  • Un cœur de favori et une mention indiquant combien de personnes ont ajouté le produit à leurs favoris
  • Sélecteur de quantité directement sur la fiche produit ; sur la page produit, le prix s'actualise selon la quantité et le conditionnement, avec alerte de limite de stock
  • Paniers cadeaux dont le prix et le stock sont calculés à partir des produits qu'ils contiennent ; les clients peuvent aussi composer leur propre panier
  • Mots cadeaux, choix de variété pour le köme et demande « me prévenir du retour en stock »
  • Une mention « livraison uniquement en gare routière » pour les produits qui ne peuvent pas être expédiés par transporteur
Page produit : badge meilleure vente, favori et prix
Page produit : badge meilleure vente, favori et prix
Informations sur les allergènes et qui peut consommer le produit
Informations sur les allergènes et qui peut consommer le produit
La boutique sur smartphone
La boutique sur smartphone
02

Comptes clients, favoris et roue de la fortune

Les membres découvrent de petites surprises sur le site. Les clients suivent leur commande pas à pas, reçoivent un e-mail quand un favori baisse de prix ou revient en stock, et font tourner la roue pour gagner une remise.

  • Connexion Google en un geste, dans un coin de la page sans en ouvrir une nouvelle, suivie d'un message de bienvenue avec emojis
  • Étapes de livraison animées avec emojis : commande reçue, en préparation, en route (le camion fait des allers-retours), livrée ; événements du transporteur et lien de suivi
  • Favoris : les membres qui ajoutent un certain nombre de produits à leurs favoris reçoivent automatiquement un coupon personnel ; un e-mail quand un favori baisse de prix ou revient en stock
  • Roue Hoydi : le serveur décide du résultat et le coupon est ajouté au compte
  • Hoydi Para : des points à chaque commande, des récompenses pour les avis, le paiement en points
  • Adresses et informations de facturation enregistrées ; code à 6 chiffres par e-mail en cas de mot de passe oublié
Mon compte : étapes de livraison avec emojis
Mon compte : étapes de livraison avec emojis
Favoris et barre de récompense
Favoris et barre de récompense
Roue de la fortune Hoydi
Roue de la fortune Hoydi
03

Les avis Google arrivent tout seuls

Les avis Google des deux boutiques sont récupérés automatiquement chaque matin et affichés dans un bandeau défilant sur le site. Les clients dont la commande a été livrée sont invités poliment à laisser un avis Google.

  • Les avis Google Business des boutiques Merkez et Aksu sont actualisés chaque matin via la Places API ; la note et le nombre d'avis sont aussi en direct
  • Un bandeau d'avis défilant avec filtre par boutique
  • Les membres dont la commande est livrée voient une seule fois la fenêtre « Votre commande est-elle arrivée ? » ; un geste ouvre la page d'avis Google de la boutique
  • Aucun coupon n'y est associé, car Google interdit de récompenser les avis ; les avis produits sur le site rapportent des Hoydi Para
Avis Google dans un bandeau défilant
Avis Google dans un bandeau défilant
Demande d'avis Google après la livraison
Demande d'avis Google après la livraison
04

Paiement et parcours de commande

Pour les paiements par carte, le serveur recalcule le montant ; s'il ne correspond pas à celui affiché dans le navigateur, le paiement ne démarre pas. Prix, campagnes, coupons et livraison suivent un seul et même ensemble de règles.

  • Paiement par carte via le formulaire iyzico, dans une fenêtre ouverte sur le site ; 3D Secure pris en charge
  • Une fois le paiement confirmé, la commande passe à « Nouvelle » et les Hoydi Para et coupons sont déduits ; si le client ferme la page, une tâche planifiée vérifie le résultat du paiement
  • Virement bancaire : les coordonnées bancaires s'affichent sur la page de paiement et après la commande
  • La province et le district de l'adresse de livraison se choisissent dans une liste (81 provinces, 973 districts)
  • Informations de facturation après la commande : particulier ou entreprise ; les numéros d'identité et fiscaux turcs sont vérifiés
  • E-mails automatiques : commande reçue, expédiée (avec lien de suivi), livrée
Page de paiement
Page de paiement
05

Une équipe IA dans le panneau : Collapssi

L'onglet Collapssi du panneau réunit sept membres d'une équipe IA qui font le point sur leurs tâches pour Hoydi28 toutes les heures. Chacun a un rôle, une mascotte dont l'humeur change et une bulle de dialogue. Aucun ne modifie quoi que ce soit sans validation : articles, vitrine, campagnes et réponses aux e-mails attendent l'accord de la boutique.

  • ✍️ Elif (rédactrice) : écrit des articles de blog les jours choisis en connaissant les produits et les articles précédents ; signale un article par un avertissement si quelque chose enfreint les règles
  • 🌍 Deniz (traducteur) : traduit en anglais les textes de produits, du blog et des pages saisis en turc ; ouvre de nouvelles langues comme l'allemand, le russe et l'arabe selon un calendrier automatique et publie chacune dès que la traduction est terminée
  • 🎨 Arda (designer visuel) : dessine des images adaptées à chaque article de blog, placées entre les intertitres
  • 📐 Selin (designer du site) : propose des changements de vitrine d'après les clics et les ventes ; avant les journées spéciales, elle prépare une bannière, un slide et une liste de produits pour ce jour, que l'on peut prévisualiser, qui sont mis en ligne le jour venu une fois validés puis retirés ensuite
  • 📅 Emre (planificateur de campagnes) : planifie les semaines à venir : coupons, remises limitées dans le temps, e-mails aux abonnés, sujets de blog pour Elif, demandes de vitrine pour Selin ; chaque élément est validé séparément
  • ✉️ Zeynep (assistante e-mail) : lit chaque e-mail reçu avec les commandes et la fiche entreprise de l'expéditeur, se renseigne sur les entreprises sur le web et rédige une réponse ; propose des relances aux prospects grossistes
  • 🧭 Kerem (chef d'équipe) : la boutique échange avec lui par chat ; Kerem fait faire la correction par le bon membre de l'équipe et transforme les préférences « à partir de maintenant » en règles permanentes
  • Les règles de base ne changent pas : ni faits inventés, ni allégations de santé, ni prix ; chaque membre a un quota de travail mensuel
Chat avec le chef d'équipe Kerem et règles permanentes
Chat avec le chef d'équipe Kerem et règles permanentes
Elif, Deniz et Arda
Elif, Deniz et Arda
Selin, Emre et Zeynep
Selin, Emre et Zeynep
Une vitrine pour une journée spéciale et un plan de campagne en attente de validation
Une vitrine pour une journée spéciale et un plan de campagne en attente de validation
06

Panneau d'administration

Le gérant pilote toute son activité depuis un seul panneau. Il s'installe sur le téléphone comme une application ; chaque nouvelle commande déclenche une notification et l'icône affiche le nombre de commandes en attente.

  • Tableau de bord : chiffre d'affaires du jour, barres d'objectifs qui se remplissent, état de l'équipe Collapssi, ventes des 14 derniers jours, répartition par catégorie
  • Commandes : celles du jour par défaut, navigation jour par jour, filtres de statut et de facture ; les commandes issues des annonces et les nouveaux clients portent un badge
  • Sélection et actions groupées : imprimer, facturer ou changer le statut des commandes sélectionnées
  • Bordereau d'expédition A5 (A4 et imprimante d'étiquettes 10×15 au choix) ; les commandes imprimées passent d'elles-mêmes à « En préparation », les mots cadeaux s'impriment sur une carte séparée
  • Utilisateurs du panneau et rôles ; code par e-mail lors d'une connexion depuis un nouvel appareil
  • Éditeur de pages : ajouter et réorganiser des blocs, avec aperçu ordinateur, tablette et téléphone
  • Boîtes de dialogue intégrées au site au lieu des fenêtres de confirmation du navigateur ; sur téléphone, une barre supérieure, un menu qui glisse depuis la gauche et une barre d'onglets en bas
Tableau de bord d'administration
Tableau de bord d'administration
Commandes
Commandes
Panneau d'administration sur téléphone
Panneau d'administration sur téléphone
07

Objectifs, Analytics et Search Console

Les objectifs de vente se remplissent comme un quota et les données de Google arrivent dans le panneau. En haut des rapports, la mascotte Collapssi commente la situation : elle se réjouit quand tout va bien, s'étonne quand les chiffres reculent et suggère quoi faire.

  • Objectifs : les périodes de vente de l'ancien site servent de référence ; les barres de chiffre d'affaires, de commandes et d'unités vendues se remplissent, avec un repère « nous devrions être ici aujourd'hui » et une prévision de fin de période
  • Visiteurs (Google Analytics 4) : visites, conversion en commandes, canaux, appareils, villes, produits les plus consultés
  • Recherche Google (Search Console) : clics, impressions, taux de clics, position moyenne, requêtes et pages
  • Rapport ventes et dépenses, clics WhatsApp
  • E-mail de rapport hebdomadaire : chaque vendredi matin, un résumé avec graphiques (chiffre d'affaires, publicité, nouveaux membres, meilleures ventes, tâches), préparé par Collapssi
Objectifs et la mascotte Collapssi
Objectifs et la mascotte Collapssi
Visiteurs (Google Analytics)
Visiteurs (Google Analytics)
Recherche Google (Search Console)
Recherche Google (Search Console)
08

Google Ads et un assistant publicitaire IA

Les données Google Ads arrivent dans le panneau toutes les heures grâce à un script placé dans le compte. L'assistant IA rédige un résumé quotidien et prépare des suggestions ; rien ne change dans le compte publicitaire sans l'accord de la boutique.

  • Rapports par campagne, groupe d'annonces, mot-clé, terme de recherche et, pour les annonces Shopping, par produit
  • Les commandes issues des annonces sont comptées à part et rapportées aux dépenses
  • Suggestions : mots-clés à exclure, nouveaux mots-clés, budgets, coût maximal par clic, nouveaux textes d'annonce ; les tâches validées sont appliquées à la prochaine exécution du script
  • Garde-fous : le plafond de budget quotidien total et la fourchette d'enchères sont vérifiés à trois endroits distincts
  • Le script se met à jour seul : un chargeur collé une fois dans le compte Google Ads télécharge le code principal depuis le site
  • Le flux produits Merchant Center est actualisé à chaque mise en ligne ; la balise de conversion et le mode consentement de Google sont en place
Assistant publicitaire IA et suggestions en attente de validation
Assistant publicitaire IA et suggestions en attente de validation
09

E-mail et paniers abandonnés

La messagerie de l'entreprise se trouve dans le panneau. Les e-mails automatiques reprennent l'identité visuelle de la marque, et un client qui a laissé des produits dans son panier peut être relancé en un geste.

  • Boîte de réception : conversations, étoiles, archives, libellés, mise en attente, brouillons et envoi programmé ; plusieurs adresses d'entreprise
  • Paniers abandonnés : visiteurs qui ont ajouté des produits sans commander, et produits les plus souvent laissés ; relances par e-mail et WhatsApp
  • E-mails de campagne aux abonnés : inscription avec consentement, encart coupon et lien de désinscription dans chaque e-mail
  • E-mails des journées spéciales : un e-mail de vœux et un coupon pour ce jour partent tout seuls lors de journées comme la fête des Mères, les fêtes religieuses et le Nouvel An
  • E-mails de commande, d'expédition et de livraison ; alertes de prix et de stock pour les produits favoris
Paniers abandonnés et relances
Paniers abandonnés et relances
10

Trouver des clients grossistes

Cafés, hôtels, magasins de fruits secs et entreprises qui achètent des cadeaux d'affaires sont trouvés sur Google Maps et suivis dans le panneau comme un pipeline commercial.

  • Trouver des entreprises : recherche sur Google Maps par type et par ville ; pour les entreprises qui ont un site, l'adresse e-mail est trouvée sur le site
  • Une séquence de présentation de trois e-mails par type d'entreprise : les jours ouvrés, avec une limite quotidienne et un lien de désinscription dans chaque e-mail ; la séquence s'arrête dès que l'entreprise répond
  • Fiche entreprise : appels, échantillons, devis et commandes font avancer l'étape ; tout l'historique sur un seul écran
  • Annonces : partager les nouveaux produits et campagnes avec les entreprises grâce à des fiches produits
  • Une liste de prix de gros fixe pour tous, prête à imprimer ; les demandes de vente en gros venues du site arrivent automatiquement dans la liste des entreprises
Vente en gros : entreprises et séquences d'e-mails
Vente en gros : entreprises et séquences d'e-mails
11

Livraison, facture électronique et autres intégrations

Les intégrations tournent dans des fonctions côté serveur ; les clés secrètes n'atteignent jamais le navigateur. Factures et déclarations d'envoi se font depuis la fiche de commande, et leur statut se met à jour tout seul.

  • Intégration Yurtiçi Kargo et Sürat Kargo prête : déclaration d'envoi en un geste, code-barres de référence Code 128 sur le bordereau d'expédition, vérification du statut toutes les deux heures
  • Facture électronique et e-archive (EDM Bilişim) : facture électronique si l'acheteur y est inscrit, sinon e-archive ; les factures de toutes les commandes listées peuvent être émises en une seule fois
  • Les remises des coupons, des campagnes et des Hoydi Para sont réparties proportionnellement sur les lignes de facture
  • Notifications de nouvelles commandes par Web Push ; l'icône de l'application affiche le nombre de commandes en attente
  • Connexion Google ; connexion avec Apple prête
Bordereau d'expédition A5 avec le code-barres de référence du transporteur
Bordereau d'expédition A5 avec le code-barres de référence du transporteur

Vous avez un projet similaire ?

Parlez-nous de vos besoins : nous définirons ensemble le périmètre, le calendrier et le budget. Le premier rendez-vous est gratuit.

Parlez-nous de votre projet