New Product

Step 2 — Create the product page

Create <slug>.md in the repo root. Follow the exact pattern used by existing product pages:

• Use # Product Name as the H1
• Include ![alt](img/<filename>) for the image
• Include the product description and any fitting notes the user provides
• Add the buy button(s) using the standard pattern below — use PRICE_ID_PLACEHOLDER for now (real IDs come in Step 4)
• End with {% include_relative delivery.md %}

Single price button pattern:

<button onclick="addToBasket('PRICE_ID_PLACEHOLDER', 'Product Name', XX)">Add to basket – £XX + £4 P&P</button>

Multiple price buttons (variants, e.g. sizes or options):

<button onclick="addToBasket('PRICE_ID_PLACEHOLDER', 'Product Name', XX, 'Variant A')">Add to basket – Variant A – £XX + £4 P&P</button>
<button onclick="addToBasket('PRICE_ID_PLACEHOLDER', 'Product Name', XX, 'Variant B')">Add to basket – Variant B – £XX + £4 P&P</button>

addToBasket(priceId, name, priceInPounds, optionalLabel) is defined in assets/basket.js and is available on all pages. Do not add a <script> block — it is already loaded globally via _includes/basket.html.

Show the user the draft page and ask them to confirm before continuing.

Step 3 — Add to products.json

Read scripts/products.json. Append a new entry for this product following the existing format:

• Single price: { "name": "...", "description": "...", "amount": <pence>, "currency": "gbp" }
• Multiple prices: use the "prices": [{ "label": "...", "amount": <pence> }, ...] format

Amounts are in pence (£1.00 = 100). Write the updated file.

Step 4 — Create in Stripe and get price IDs

Run the create script. It reads the key from macOS Keychain automatically:

python3 scripts/stripe-create-products.py scripts/products.json

Parse the output carefully. Find the lines for the new product and extract the price ID(s) — they look like price_1Xxxxx....

Note: the script is idempotent so existing products will not be duplicated.

Step 5 — Update the product page with real price IDs

Replace each PRICE_ID_PLACEHOLDER in the new product page with the real price ID(s) from Step 4. Update the button text to match the exact Stripe amount if it differs from what was written.

Step 6 — Confirm and summarise

Show the user:

• The final product page content
• The Stripe price ID(s) that were created
• A reminder that the page needs to be linked from index.md if it should appear in the shop listing

Ask if they want you to add it to the index page.