Build your store
Make one change with AI
You’ll leave withA small reviewed change, a phone-sized preview, and a clear undo step.
Separate product content from shop design
Use Admin for product names and descriptions. Use your source files for a brand heading or visual layout. This distinction helps you undo the right thing: product content is stored in the database, while theme edits are stored in files.
Start with one small change so you can tell what caused the result.
1. Write the change in one sentence
For example: “Change the homepage heading to Small goods, thoughtfully chosen.” Record the old text. Keep the current source version and backup before wider changes; the backup lesson explains how.
2. Give AI a bounded job
Read this starter's README.md and AGENTS.md. Change only the visible
homepage heading to: Small goods, thoughtfully chosen.
First show me the file and exact proposed change. Keep product facts,
prices, stock, cart, payment mode, and backend behavior unchanged.
Do not install packages or upgrade dependencies for this text change.
After I accept the change, use the documented rebuild and check the
homepage and a product page at desktop and phone widths.
Show the changed files and how to undo only this change. Preserve any
existing unrelated edits. Do not publish a deployment.
In this sample, the theme begins in storefront/index.html and storefront/shop.css. Rebuild using npm start. Edit source files rather than generated build output; a later build can replace generated files.
3. Check as a shopper
- Is the new heading correct on desktop and a narrow screen?
- Can you still open a product and add it to the cart?
- Are prices and variant names unchanged?
- Is text readable in its available space?
Ask AI for a screenshot or open the page yourself. “The build passed” does not tell you whether the heading is readable on a phone.
4. Try the product-content route
Take the approved title and description from lesson one. In Admin, open a sample product, save its old wording in your notes, and change only those fields. Refresh its storefront page and inspect the result. Your AI draft remains a draft until you deliberately save it in Admin.
The sample’s draft desk uses its own structured prompt and requires review before copying. It cannot publish or edit price, stock, or orders.
Undo without undoing everything else
For a theme edit, restore only the previous text or that specific source diff and rebuild. For a product description, put the old wording back in Admin. Do not reset the entire repository or restore the entire database to undo one sentence.
If a change affects checkout, accounts, or database structure, treat it as an upgrade project and use the update lesson. Do not broaden this simple wording exercise into a platform rewrite.
Ready when
You can explain what changed, show it in the browser, and undo just that change. Keep a small change log: date, old value, new value, checks, and rollback. This becomes useful when you return to the store weeks later.
This marks the lesson as read, not a task as completed.
Read status is saved only on this device.