Shop template design and language
A custom template should look like the business, not Bottle’s marketing site. You can choose your own layout, colours, spacing and interactions. The important parts are that shoppers understand what is for sale and can reach the supported purchase flow.
Write plainly
Section titled “Write plainly”Use short, specific sentences and familiar words. Lead with the thing the shopper can do. Use British English unless the business deliberately chooses otherwise. Warm and confident is good; riddles, slogans in place of instructions and invented promises are not.
| Avoid | Prefer |
|---|---|
| Your next flame awaits | Choose your gas |
| Discover your perfect solution | View products |
| Begin your journey | View product |
| Fuel your freedom, delivered tomorrow | Gas delivered locally—only if that service is confirmed |
| Not said | No preference set |
| If nobody is in | Delivery preferences when you’re not there |
Use View product when clicking opens a product page. Do not label it Add to basket unless it actually adds an item; uploaded templates do not have that operation. Use Sign in, Basket, Search products and Clear search for familiar actions.
Keep business claims accurate
Section titled “Keep business claims accurate”Use the business’s real delivery area, opening times, phone number and policies. Do not invent reviews, free delivery, prices, delivery dates or certifications. Public availability does not supply a delivery estimate. Available to order is more accurate than Arrives tomorrow for a backordered product.
Render supplied product names without changing their meaning. Do not call every item a bottle or cylinder: a shop may also sell BBQs, accessories, fuel and other products. Product kind labels, when useful, can be Cylinder, Accessory, Appliance, Fuel, Consumable and Other.
Public product prices do not include every possible cylinder charge or delivery cost. Do not describe them as “your final total” or “your agreed price”. Bottle’s protected product and checkout screens handle the shopper’s options and final amounts.
Design for decisions
Section titled “Design for decisions”- Keep product names, public prices and availability easy to scan.
- Use a clear primary action and keep basket/sign-in reachable.
- Show search and category choices where shoppers expect them.
- Prefer a useful empty state over a blank grid: explain whether there are no products or no search matches.
- Keep legal, delivery and contact pages reachable. Custom code does not replace these built-in pages.
- Use spacing and hierarchy before adding more borders, colours or motion.
Accessibility and phone layouts
Section titled “Accessibility and phone layouts”Use one main heading, meaningful heading order, labelled inputs and real buttons/links. Every interactive element needs a visible keyboard focus state. Do not use colour alone for availability or selection; show words and an active-state indicator.
Make controls comfortably tappable and let text wrap. Test a narrow phone, large text, long product names and missing pictures. Do not crop important product details or stretch screenshots/photos. Use alternative text for meaningful pictures and empty alternative text for purely decorative pictures.
Respect prefers-reduced-motion. Avoid flashing, autoplay effects and long entrance animations that delay shopping. Do not hide essential actions behind hover or require drag-and-drop to buy a product.
Colour contrast and screen-reader behaviour need testing in your finished design; a valid upload is not an accessibility certification. Run keyboard and screen-reader checks, and use an accessibility checker as another source of feedback.
Brief for Claude or ChatGPT
Section titled “Brief for Claude or ChatGPT”Give the assistant the walkthrough, reference, recipes and your actual branding/business facts. Then adapt this brief:
Build a version 1 Bottle shop template. Return a ZIP with bottle.template.json at its root, index.html, manifest-listed CSS and classic JavaScript, and only supported bundled images. Use our brand colours and supplied business facts. Choose an independent responsive design, not Yard or Flame. Use Bottle.ready for the read-only public catalogue and Bottle.navigate for supplied shop paths. Handle empty products, missing descriptions/images, all four availability values, long names, category pages and catalogueTruncated. Render public strings with textContent; only Bottle’s sanitised page.html may use innerHTML. Show public prices in GBP from integer pence and do not invent delivery dates, final totals or trade prices. Use direct British English and accurate actions: View product, Products, Basket, Sign in, Search products. Keep checkout, accounts, cylinder choices and payments on Bottle’s pages. Include keyboard focus, input labels, accessible stock labels, reduced-motion styling and good phone layouts. Do not use inline styles/events, script/style/link/meta tags, SVG, remote fonts/images/CDNs, forms, server code, npm installation, API keys, fetch, storage, eval or external module imports. Respect the exact fields, paths and size limits in the reference. Explain how to upload, preview and test; do not claim it works without those checks.
Your AI account is yours; Bottle does not need access to it. Never give an assistant real customer data, private keys or passwords to put into the template. Review the code and copy before uploading. AI review is not a replacement for the sandbox or your own testing.