> ## Documentation Index
> Fetch the complete documentation index at: https://docs.boble.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Store

> La boutique publique où les clients parcourent les produits d'un créateur, consultent les pages de détail et paient.

Chaque créateur dispose d'une **page boutique** publique sur `<workspace>.boble.io/store` (ex. [rgaconsulting.dev.boble.io/store](https://rgaconsulting.dev.boble.io/store)). On y accède depuis l'entrée **Store** de la sidebar admin, ou via les boutons **View store page** du panneau d'administration. C'est la plateforme côté client : elle présente les produits **publics** du créateur, avec pages de détail et paiement intégré.

<Frame>
  <img src="https://mintcdn.com/boble-90b7fb3f/sTKAfAlwSEgu-Dr1/images/store/home.png?fit=max&auto=format&n=sTKAfAlwSEgu-Dr1&q=85&s=4ed44b1b9fb7b6584961050c12c45218" alt="Boutique publique Boble" width="1512" height="805" data-path="images/store/home.png" />
</Frame>

## Structure de la page

### En-tête

* **Logo et nom du business** — configurés dans Settings → Branding.
* **Recherche** — trouver un produit dans la boutique.
* **Compte** — connexion client.
* **Panier** — commande en cours.

### Hero

Le titre et le sous-titre proviennent de **Settings → Branding → Store Front** (Title et Description).

### Filtres par catégorie

La grille de produits se filtre par type : **All products**, **Bundles**, **Assets**, **Software**, **Video Courses**, **Coaching**, **Services**. Seuls les produits dont le statut boutique est **Public** apparaissent ici.

### Cartes produit

<Frame>
  <img src="https://mintcdn.com/boble-90b7fb3f/sTKAfAlwSEgu-Dr1/images/store/grid.png?fit=max&auto=format&n=sTKAfAlwSEgu-Dr1&q=85&s=ba9f9b8e8507a9776466fef5de8d2d8f" alt="Grille de produits de la boutique" width="1512" height="805" data-path="images/store/grid.png" />
</Frame>

Chaque carte affiche :

* Un **badge de catégorie** (ex. Coaching Session, Design Asset, Software, Video Course, Bundle, Service)
* L'**image de couverture**
* Le **titre** et une courte **description**
* Le **prix**, qui s'adapte au modèle tarifaire :
  * `Free` (gratuit)
  * Prix unique (ex. `US$71.99`)
  * Abonnement (ex. `US$95.00/mo`)
  * Prix remisé avec l'ancien prix barré et un badge **SAVE n%**
  * Toute devise configurée par le créateur (US$, €, A$, F CFA, …)

### Footer

<Frame>
  <img src="https://mintcdn.com/boble-90b7fb3f/sTKAfAlwSEgu-Dr1/images/store/footer.png?fit=max&auto=format&n=sTKAfAlwSEgu-Dr1&q=85&s=4bbd76770ff785ce6a1b3f7ac9f701f3" alt="Footer de la boutique" width="1512" height="805" data-path="images/store/footer.png" />
</Frame>

Le footer affiche la description du business, les **liens légaux** (Refund Policy, Privacy Policy, Community Guidelines, Terms of Use, Contact Support — alimentés par Settings → General → Legal), les **moyens de paiement acceptés** (Visa, Mastercard, Klarna, Affirm, Link, Cash App Pay, PayPal, Zip) et le copyright.

## Page de détail produit

Cliquer sur une carte ouvre `store/<id-du-produit>`, avec un fil d'Ariane `Shop /` pour revenir à la grille.

<Frame>
  <img src="https://mintcdn.com/boble-90b7fb3f/sTKAfAlwSEgu-Dr1/images/store/product.png?fit=max&auto=format&n=sTKAfAlwSEgu-Dr1&q=85&s=53765b94e8a6505caadaae6b59f48b93" alt="Page de détail produit de la boutique" width="1512" height="805" data-path="images/store/product.png" />
</Frame>

* **Galerie d'images** — visuel principal avec miniatures cliquables.
* **Titre et prix** — avec le type de tarification (One-time payment, abonnement…).
* **Buy Now** — ouvre le checkout dans un nouvel onglet.
* Texte de réassurance *« Instant delivery · Secure checkout »*.
* Les sections de contenu configurées dans l'admin (What's inside, Who it's for) lorsqu'elles existent.

Pour les **bundles**, une section **INCLUDED PRODUCTS** liste tous les produits du pack avec leur icône et leur type :

<Frame>
  <img src="https://mintcdn.com/boble-90b7fb3f/sTKAfAlwSEgu-Dr1/images/store/product-included.png?fit=max&auto=format&n=sTKAfAlwSEgu-Dr1&q=85&s=c95f1d5f09bc591722ea8d2ba6c8efd9" alt="Produits inclus d'un bundle sur la boutique" width="1512" height="805" data-path="images/store/product-included.png" />
</Frame>

## Checkout et paiement

**Buy Now** ouvre le checkout sécurisé (`/checkout/...`), propulsé par Stripe :

<Frame>
  <img src="https://mintcdn.com/boble-90b7fb3f/sTKAfAlwSEgu-Dr1/images/store/checkout.png?fit=max&auto=format&n=sTKAfAlwSEgu-Dr1&q=85&s=65e4316194b1a9d3d6726e8820c45c2a" alt="Page de checkout Boble" width="1512" height="805" data-path="images/store/checkout.png" />
</Frame>

**Colonne gauche — récapitulatif de commande :**

* Nom du produit et prix
* Pour les bundles, la liste des produits inclus
* Champ **Add promotion code**
* **Total due today** (total à payer aujourd'hui)

**Colonne droite — formulaire de paiement :**

* **Email**
* **Carte bancaire** — numéro, date d'expiration, CVC (Visa, Mastercard, Discover…)
* **Google Pay** en moyen de paiement alternatif
* **Nom complet**, **Pays ou région**, **Adresse**
* Le bouton **Pay** / **Subscribe** (le libellé dépend du modèle tarifaire)

En payant, le client accepte les Terms of Service et la Privacy Policy du créateur. La page est **Secured by Stripe**.

<Note>
  Le checkout reflète la configuration faite dans le panneau d'administration : type de prix et montant (onglet Checkout du produit), codes promo, période d'essai, stock et expiration d'accès.
</Note>