Kits de Prompts

Créer une boutique en ligne

Une boutique en ligne doit tenir quatre promesses simultanément : présenter le bon produit, facturer le bon montant, éviter de vendre des stocks indisponibles et informer à la fois le client et le propriétaire de la suite des opérations. Ce kit construit ces promesses en cinq étapes séquencées — le catalogue public, le stock par variante, la logique du panier et de la livraison, le paiement réel et la gestion des commandes — avec un test visible après chaque étape. Il convient à un catalogue petit ou moyen de produits physiques, numériques ou les deux ; une grande opération de vente au détail avec des entrepôts, des règles fiscales complexes ou de nombreux canaux de vente pourrait nécessiter un système de commerce spécialisé.

Type de projet: Boutique en ligne Difficulté: Intermediate Durée: 2-3 jours Fonctionne avec: Base44 / Lovable / v0

Ce que vous aurez à la fin

  • Une vitrine publique et un catalogue de produits qui fonctionnent bien sur mobile
  • Des pages produits avec de vraies descriptions, des espaces réservés pour les images, des variantes sélectionnables et une disponibilité des stocks claire
  • Un panier qui vérifie les prix et les stocks actuels, puis affiche les bons choix d'expédition, de retrait ou de livraison numérique
  • Un paiement sécurisé qui accepte un vrai paiement unique sans que votre site ne traite les détails de la carte bancaire
  • Une page de confirmation de commande et un e-mail qui indiquent au client exactement ce qui se passe ensuite
  • Un espace propriétaire où vous gérez les produits, les stocks et les commandes
  • Un flux d'exécution pour l'expédition, le retrait, la livraison locale ou les téléchargements numériques protégés

Avant de commencer

  • Un petit catalogue réel. Préparez au moins trois produits avec des noms, des descriptions, des prix, des catégories et des stocks. Pour chaque option telle que la taille ou la couleur, notez les combinaisons exactes que vous vendez et le stock pour chaque combinaison.
  • Des images de produits réelles. Rassemblez vos propres photos claires ou des images que vous avez l'autorisation d'utiliser — éditer vous-même vos photos de produits (éclairage, arrière-plan, recadrage) est une bonne chose et donne souvent à une petite boutique un aspect bien plus professionnel. En attendant qu'elles soient prêtes, ce kit utilise des espaces réservés étiquetés ; il ne demande jamais au constructeur d'inventer des photos de produits ou de générer un produit qui n'existe pas.
  • Une décision de traitement des commandes. Choisissez si vous vendez des produits physiques, des produits numériques ou les deux. Pour les produits physiques, décidez où vous livrez, quelles méthodes vous proposez, combien coûte chaque méthode et l'estimation de livraison. Pour les produits numériques, préparez les fichiers réels et une politique de téléchargement claire.
  • Un compte de fournisseur de paiement. Stripe est un choix courant. Gardez-le en mode test jusqu'à ce que l'étape 4 fonctionne du début à la fin, et stockez toute clé privée uniquement dans les paramètres sécurisés de votre constructeur.
  • Des politiques orientées client. Rédigez votre politique d'expédition ou de livraison, votre politique de retours ou de remboursement, votre politique de confidentialité et vos conditions générales. Les exigences varient selon le lieu et le produit, utilisez donc des conseils adaptés à l'endroit où vous opérez.
  • Deux adresses e-mail que vous contrôlez. Utilisez-en une en tant que client et une en tant que propriétaire afin de pouvoir voir les deux côtés d'une commande de test.

Quelle plateforme convient

Base44 est le meilleur choix pour une boutique personnalisée de petite ou moyenne taille car les données produit, les écrans propriétaires, les comptes, les règles de sécurité et le paiement Stripe peuvent coexister dans une seule application. Sa configuration Stripe démarre en mode test, mais les produits Stripe ne constituent pas automatiquement un catalogue de boutique complet ; ce kit demande donc délibérément une source claire d'informations sur les produits, les variantes et les stocks. Lovable est particulièrement adapté aux produits numériques et aux paiements uniques. Il peut également prendre en charge les ventes physiques, mais le stock, l'expédition et l'exécution doivent être construits et testés séparément plutôt que d'être supposés inclus avec le paiement. v0 est très performant pour l'expérience de vitrine et peut connecter des services de paiement et de base de données ; mais une boutique v0 entièrement personnalisée vous laisse le soin de construire et de vérifier vous-même les données produit, les comptes, les stocks et la gestion des commandes. Sur n'importe quelle plateforme, utilisez un système de commerce spécialisé au lieu de ce kit lorsque vous avez besoin de plusieurs entrepôts, de retours avancés, de nombreux canaux de vente ou d'une coordination des stocks à haut volume. Shopify vs Base44 vs Lovable explique où se situe cette limite, et comment une vitrine Lovable peut être intégrée au-dessus de Shopify.

Commencez par le premier prompt avec une offre gratuite. L’usage supplémentaire et certains services connectés peuvent coûter plus cher à mesure que vous développez le projet.

Créez-le sur

Comment nous gagnons de l’argent

Les étapes

1

Construire la vitrine et le catalogue de produits

Quand l'utiliser

Commencez ici, dans un tout nouveau projet, avant d'ajouter des comptes, un panier ou des paiements.

Une forme de boutique publique complète où les gens peuvent parcourir les produits et comprendre ce qu'ils achètent.

Le prompt

Ces prompts fonctionnent mieux en anglais — collez-les tels quels, même sur les pages traduites.

Build the public storefront for [STORE NAME], which sells [PHYSICAL PRODUCTS / DIGITAL PRODUCTS / BOTH] for [WHO THE PRODUCTS ARE FOR].

Create a home page that explains what the store sells, why a customer should trust it and how to browse. Create a catalogue page where people can browse products by [YOUR MAIN CATEGORIES]. Create one reusable product page that shows the product name, real description, price, available options, stock message, image area, delivery or download summary and a clear purchase action. Also add an about page and a contact page using [CONTACT EMAIL].

Save products as editable information rather than writing each product permanently into a page. Each product needs a name, short description, full description, category, price, product type, status, image, delivery summary and whether it is featured. Product type is physical or digital. Status is draft, active or unavailable. Only active products appear to visitors.

Add three example products that are clearly labelled as examples for me to replace. Use labelled image placeholders saying [REAL PRODUCT IMAGE NEEDED]. Do not use stock photos and do not generate product, customer or lifestyle images from scratch. Editing my own real product photos is fine; only invented or generated products are the problem, because they misrepresent what the buyer receives.

Do not build customer accounts, a cart, checkout or payment in this step. Show the purchase action as [BUTTON LABEL, e.g. Choose options], but do not pretend an order can be completed yet.

Design the store to feel [THREE BRAND ADJECTIVES]. Use [COLORS] and [TYPOGRAPHY PREFERENCE]. Keep the product information easy to scan, use restrained spacing and make every page comfortable on a phone. Do not invent reviews, sales numbers, scarcity messages, certifications or customer claims.

When finished, tell me where I edit products and which text and images are still examples.

Vérifiez que ça a marché

  • Vous pouvez passer de la page d'accueil au catalogue et ouvrir chaque exemple de produit
  • La modification d'un exemple de produit change ce que les visiteurs voient sans avoir à reconstruire sa page
  • Les produits en brouillon et indisponibles n'apparaissent pas comme des produits ordinaires en vente
  • Chaque zone d'image est clairement étiquetée pour une image réelle que vous devez fournir
  • L'action d'achat ne mène pas à un faux processus de paiement
  • Le catalogue et les pages de produits sont faciles à lire sur votre téléphone

Vous saurez que ça a marché quand :

Une vitrine publique où vous pouvez parcourir trois exemples de produits modifiables, de la page d'accueil jusqu'à la page de produit complète.

Attention à

Les exemples de produits survivent souvent par accident jusqu'au lancement. Donnez à chaque exemple une étiquette évidente et ne retirez pas ces étiquettes tant que le nom réel, la description, le prix et l'image n'ont pas tous été fournis. Une jolie grille de produits n'est pas non plus un catalogue de magasin si chaque article est écrit directement dans la page ; prouvez qu'une seule modification dans la zone produit met à jour la page publique.

2

Ajouter des variantes, des stocks et des contrôles de produit propriétaire

Quand l'utiliser

Une fois que la vitrine est correcte et avant de construire le panier.

Une source fiable unique pour les données produit, incluant le stock exact pour chaque version sélectionnable.

Le prompt

Ces prompts fonctionnent mieux en anglais — collez-les tels quels, même sur les pages traduites.

Add product options, stock control and a private owner product area to this store.

A variant means one selectable version of a product, such as a blue shirt in size medium. For each product, let me choose whether it has no variants or has options named [OPTION NAMES, e.g. size and colour]. Save every valid combination separately with its own price when needed, stock quantity, identifying code and active or unavailable status. Do not create combinations I do not sell.

On the product page, the customer chooses each required option before the purchase action becomes available. Show the price and availability for the exact combination they selected. If that combination is unavailable or its stock is zero, say so plainly and do not let it continue toward purchase. Never show a vague in-stock message based only on the total across every option.

Add a private owner area where I can add and edit products, upload my real product images, create valid option combinations, change prices, adjust stock and mark a product draft, active or unavailable. Only I can open or use this area. A visitor must not reach it by typing its address directly.

Keep one source of truth for product names, prices, variants and stock. The public catalogue, product page, future cart and owner area must all read from that same saved information rather than keeping separate copies.

Add a stock history that tells me what changed, by how much, when and why. Manual changes require a short reason such as [STOCK ADJUSTMENT REASONS]. Do not reduce stock yet because no order can be paid for in this step.

Keep all work from step 1 unchanged. Use my real images where I upload them and keep labelled placeholders everywhere else. Do not generate product images from scratch or invent a product; editing my own real photos is fine.

Vérifiez que ça a marché

  • Vous pouvez créer un produit avec des [NOMS D'OPTIONS] et seules les combinaisons que vous vendez réellement apparaissent
  • La sélection d'une combinaison différente modifie le prix ou la disponibilité affichés lorsque nécessaire
  • Une combinaison avec un stock nul est visiblement indisponible et ne permet pas de poursuivre l'achat
  • La modification d'un prix dans l'espace propriétaire met à jour le catalogue et la page produit
  • Déconnecté, vous ne pouvez pas accéder à l'espace produit propriétaire, même en collant son adresse
  • Une modification manuelle du stock apparaît dans l'historique des stocks avec votre motif

Vous saurez que ça a marché quand :

Un produit avec de véritables combinaisons d'options dont le prix et le stock peuvent être modifiés en privé et vérifiés sur la page produit publique.

Attention à

Un nombre de stock unique pour un produit entier est erroné lorsque les options diffèrent ; cela peut entraîner la vente d'une taille ou d'une couleur dont vous ne disposez plus. Suivez le stock pour la combinaison exacte. Évitez de conserver un prix chez le fournisseur de paiement et un autre dans l'espace produit sans règle de synchronisation claire, car ils finiront par diverger. L'espace produit doit être la source utilisée pour calculer le futur panier, tandis que l'étape de paiement doit le revérifier avant le prélèvement.

3

Construire le panier et les choix de livraison

Quand l'utiliser

Après le fonctionnement du stock des variantes et avant la connexion aux paiements réels.

Un panier dont le contenu, les totaux et les choix de traitement peuvent être testés sans facturer personne.

Le prompt

Ces prompts fonctionnent mieux en anglais — collez-les tels quels, même sur les pages traduites.

Add a working cart and fulfilment choices to this store without connecting payment yet.

A customer can add the exact selected product variant, change its quantity, remove it and continue shopping. Keep the cart if they move between pages or refresh. Before adding or increasing a quantity, check the current saved stock and never allow more than is available.

Calculate each line and the subtotal from the current saved product price, not from a price sent by the customer's browser. Show product name, selected options, quantity, price and a small real product image or labelled placeholder. If a price, status or stock level changed after the item entered the cart, explain the change and require the customer to review it.

This store sells [PHYSICAL PRODUCTS / DIGITAL PRODUCTS / BOTH]. For a cart containing physical products, offer only these valid fulfilment choices: [SHIPPING / LOCAL DELIVERY / PICKUP OPTIONS]. Explain the cost, where each choice is available and the delivery estimate using [YOUR REAL RULES]. Collect only the address or pickup details that choice needs. For a cart containing only digital products, do not ask for a shipping address and show digital delivery as free unless [YOUR REAL DIGITAL DELIVERY RULE] says otherwise.

Show a clear order summary before checkout with the subtotal, delivery charge, any discount I have explicitly configured and the total. Do not invent tax rules. Show tax only when the connected payment setup can calculate it correctly for the customer, otherwise tell me what remains to be configured before launch.

Add a review order button that stops at a clearly labelled payment not connected screen. Do not create a fake success message and do not mark anything as ordered or paid.

Test the cart with [ONE IN-STOCK VARIANT], [ONE LOW-STOCK VARIANT], [ONE OUT-OF-STOCK VARIANT] and every fulfilment choice. Tell me in plain language what happened in each test.

Vérifiez que ça a marché

  • Vous pouvez ajouter deux produits différents avec les options exactes que vous avez sélectionnées
  • Actualiser ou visiter une autre page ne vide pas le panier
  • Vous ne pouvez pas augmenter une quantité au-dessus du stock réellement disponible
  • Changer le prix ou le stock d'un produit dans la zone propriétaire est pris en compte avant l'examen
  • Les commandes physiques affichent uniquement des choix de livraison ou de retrait valides et le total change correctement
  • Une commande uniquement numérique ne demande pas d'adresse de livraison
  • Le bouton de révision s'arrête avant le paiement et ne prétend jamais que la commande a réussi

Vous saurez que ça a marché quand :

Un panier de test contenant deux produits dont vous pouvez modifier et vérifier les quantités, le choix de livraison et le total final sans payer.

Attention à

Les règles d'expédition qui semblent simples échouent souvent aux limites, telles qu'une zone non prise en charge, un panier mixte physique et numérique, ou un retrait sélectionné sans lieu de retrait. Testez-les chacune. Ne faites jamais confiance à un prix stocké uniquement dans le navigateur du visiteur ; la boutique doit relire le prix et le stock à partir des informations protégées sur le produit avant le paiement. Si les taxes ne peuvent pas être calculées de manière fiable, n'affichez pas un zéro confiant ou un montant inventé.

4

Effectuer le paiement et créer une commande confirmée

Quand l'utiliser

Uniquement après que le panier a bloqué les stocks indisponibles et que chaque total de traitement est correct.

Un test de paiement sécurisé qui produit une commande payée et la confirmation appropriée pour le client et le propriétaire.

Le prompt

Ces prompts fonctionnent mieux en anglais — collez-les tels quels, même sur les pages traduites.

Connect this store to [PAYMENT PROVIDER, e.g. Stripe] in test mode and turn the reviewed cart into a real checkout.

Before checkout opens, check the current product status, exact variant stock, price and fulfilment cost again from the protected saved information. Create a short stock reservation for [RESERVATION TIME, e.g. fifteen minutes] so two customers cannot both buy the final item. Release the reservation if payment is cancelled or not completed in time.

Send the customer to the payment provider's secure checkout to enter payment details. My site must never collect or store card details. The amount charged must come from the checked cart total, not from anything the customer's browser can change.

Treat an order as paid only after the payment provider sends its trusted payment confirmation. Returning to the success page is not proof of payment. On trusted confirmation, create one order with a unique order number, mark it paid, reduce each purchased variant's stock exactly once and clear the customer's cart. A delayed or repeated confirmation must never create a second order or reduce stock twice.

Show a confirmation page with the order number, items, amount paid, fulfilment choice, customer contact details and what happens next. Send the same useful summary to [CUSTOMER EMAIL] and send a new-order alert to [OWNER EMAIL]. For a physical order, include the delivery or pickup estimate. For a digital order, provide the purchased files through a protected download that only the paid customer can use; never expose a permanent public file address.

Add a basic private owner order view showing the order number, customer, items, amount, payment state, fulfilment choice and date. Do not expose payment secrets or full payment details.

Show me where to complete my payment provider connection and which steps I must perform myself. Then guide me through one successful test payment, one cancelled payment and one declined payment.

Vérifiez que ça a marché

  • La page de paiement s'ouvre sur la page sécurisée du fournisseur de paiement avec les bons articles et le bon total
  • Un test de paiement réussi renvoie vers une confirmation affichant un numéro de commande
  • L'e-mail de confirmation client et l'e-mail de nouvelle commande pour le propriétaire arrivent tous deux
  • La commande payée apparaît une seule fois dans la vue des commandes du propriétaire
  • Le stock acheté diminue d'une unité, tandis qu'un paiement annulé ou refusé ne le réduit pas
  • La réouverture ou l'actualisation de la confirmation ne crée pas une autre commande
  • Un fichier de test numérique ne s'ouvre que pour le client payeur et non à partir d'un lien public copié

Vous saurez que ça a marché quand :

Une commande de test complète : réserver le stock, payer, recevoir la confirmation, voir une seule commande dans l'espace propriétaire et confirmer que le stock a changé une seule fois.

Attention à

Une page de succès peut être ouverte sans paiement réussi, elle ne doit donc jamais servir de signal pour marquer une commande comme payée. Les confirmations de paiement répétées sont normales et leur traitement doit être sûr, même effectué plusieurs fois. Les paramètres de paiement de test et réels sont distincts ; après être passé en mode réel, effectuez une petite commande réelle pour vous-même et remboursez-la. Les réservations de stock nécessitent une date d'expiration, sinon les paniers abandonnés peuvent faire paraître les produits disponibles comme épuisés. Les fichiers numériques nécessitent une livraison protégée, et non un lien permanent partageable.

5

Ajouter l'exécution de commande et compléter le flux de travail du propriétaire

Quand l'utiliser

Une fois que la commande test complète à l'étape 4 fonctionne du paiement jusqu'à la confirmation.

Fournir au propriétaire une file d'attente de commandes gérable et aux clients des mises à jour précises après leur paiement.

Le prompt

Ces prompts fonctionnent mieux en anglais — collez-les tels quels, même sur les pages traduites.

Complete the order fulfilment workflow and owner controls without changing the working payment or stock rules.

In the private owner area, let me filter orders by [FULFILMENT STATUSES, e.g. paid, preparing, ready for pickup, shipped, delivered, cancelled and refunded]. Opening an order shows the customer details needed for fulfilment, purchased items and variants, delivery or pickup choice, payment state, stock changes and a dated history of status changes. Let me add a private note that customers cannot see.

For shipped orders, let me add [DELIVERY PROVIDER NAME] and a tracking reference or tracking link. For pickup or local delivery, let me add clear collection or arrival instructions. For digital orders, show whether the customer received access and let me safely resend the protected download message without creating a new order.

Send the customer an email only for the status changes I choose: [STATUS CHANGES THAT SHOULD SEND AN EMAIL]. Each message must use the real order details, explain what changed and tell the customer what to do next. Never include private owner notes.

Add low-stock alerts at [LOW-STOCK LEVEL] and show which exact variant needs attention. If I cancel and refund an order through the payment provider, update the order after trusted confirmation and ask me whether sellable physical stock should be returned. Do not automatically return damaged, lost or downloaded digital goods to available stock.

Let me export the order information I need for fulfilment using [FIELDS I NEED], while excluding payment secrets and unnecessary personal details. Keep access to products, orders and exports owner-only.

Run the tests from steps 1 through 4 again after these changes and report anything that no longer works.

Vérifiez que ça a marché

  • Vous pouvez trouver la commande test, modifier son statut d'exécution et voir un historique daté
  • Le client reçoit la mise à jour correcte pour le statut choisi et aucun e-mail pour un statut exclu
  • Les instructions de suivi ou de retrait apparaissent sur la commande et dans le message client approprié
  • Un avertissement de stock faible nomme exactement l'option de produit qui s'épuise
  • Un remboursement met à jour la commande sans remettre aveuglément chaque article en stock
  • Déconnecté, vous ne pouvez pas accéder à la zone de commande ni exporter les informations client
  • La vitrine, les vérifications de stock, le panier et le test de paiement fonctionnent toujours après l'ajout des outils de propriétaire

Vous saurez que ça a marché quand :

Une commande test payée que vous pouvez faire avancer dans le processus d'exécution pendant que le client reçoit des mises à jour précises et que l'historique des stocks reste correct.

Attention à

Remboursé ne signifie pas toujours restockable ; les marchandises physiques endommagées et les fichiers numériques livrés nécessitent un traitement différent. Les e-mails de statut peuvent devenir bruyants ou contradictoires si chaque changement interne en envoie un, choisissez donc les moments visibles par le client. Les exportations contiennent des informations personnelles : incluez uniquement ce dont l'exécution a besoin, restreignez l'accès et supprimez les anciennes copies conformément à votre politique.

Mise en ligne

  • Remplacez tous les exemples de produits et les espaces réservés d'images par des descriptions précises et de vraies images de produits que vous possédez ou avez l'autorisation d'utiliser
  • Vérifiez chaque prix, combinaison d'options, quantité en stock et niveau de stock faible depuis l'espace propriétaire
  • Testez un article en stock, le dernier article disponible, un article en rupture de stock et une modification de prix alors qu'un article est déjà dans le panier
  • Testez chaque choix d'expédition, de livraison locale, de retrait et de livraison numérique que vous proposez réellement, y compris une adresse ou une zone que vous ne desservez pas
  • Passez le fournisseur de paiement du mode test au mode réel, effectuez une petite commande réelle, confirmez que les deux e-mails arrivent et remboursez-la
  • Confirmez le comportement du remboursement réel, de l'annulation, de l'ajustement des stocks et du téléchargement numérique protégé
  • Publiez des informations claires sur la livraison, le retour, le remboursement et les contacts avant le paiement
  • Ajoutez votre politique de confidentialité et vos conditions générales avec le prompt pour les pages légales
  • Connectez votre service d'e-mail avec le prompt pour les e-mails transactionnels et testez depuis plusieurs boîtes de réception
  • Connectez votre domaine personnalisé avec le prompt pour le domaine personnalisé, puis répétez le paiement sur le domaine réel
  • Ouvrez le parcours d'achat complet sur un vrai téléphone et avec une connexion lente, du catalogue jusqu'à la confirmation
  • Gardez une sauvegarde récupérable des produits et des commandes, et sachez qui peut accéder aux informations des clients

Dépensez moins de crédits

Chaque plateforme vous facture le travail que fait son IA — la habitude la moins chère est donc de réfléchir avant de construire. Ces six règles éliminent l'essentiel du gaspillage, quelle que soit la plateforme.

  1. Planifiez d'abord dans un chat gratuit. Esquissez le tout dans ChatGPT, Claude ou Gemini — pages, fonctionnalités, ce que chaque formulaire collecte, l'apparence voulue. Réfléchir là-bas est gratuit ; réfléchir dans un builder est facturé.
  2. Partez d'un prompt écrit, pas d'une phrase. « Fais-moi un site » est la phrase la plus chère de la construction avec l'IA. Un premier prompt complet — comme ceux de ce site — évite des dizaines de corrections.
  3. Ne soyez pas paresseux sur les détails. Chaque détail omis revient en correction payante. Nom de l'entreprise, couleurs, chaque page, chaque champ de formulaire, ce qui se passe après l'envoi — mettez tout dans le premier prompt.
  4. Ensuite, un changement par message. « Corrige l'en-tête, et le formulaire, et les couleurs » crée un enchevêtrement plus coûteux à démêler que ce qu'il a économisé.
  5. Bloqué ? Arrêtez de rustiner. Si la même correction échoue environ trois fois, n'en envoyez pas une quatrième — décrivez plutôt l'état final souhaité de toute la section dans un nouveau message.
  6. Commencez gratuitement. Passez au payant quand il vous en faut plus. Utilisez le quota gratuit pour créer et explorer votre première version. Passez au payant quand vous avez besoin de plus d’utilisation ou de fonctionnalités payantes, et vérifiez le coût des services connectés avant le lancement.

Les prompts de cette page sont écrits pour faire l'essentiel de ce travail à votre place — c'est tout leur intérêt.

Lire le guide complet

Dernière vérification: 2026-07-27

FAQ

Nous utilisons des cookies pour analyser le trafic et suivre les clics d'affiliation. En continuant, vous acceptez notre Politique de Confidentialité.