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.