# Shop Setup Guide

`shop.html` ships as a complete front-end mockup: 8 sticker products, prices,
descriptions, and a 5-pack bundle banner. **No real checkout is wired up
yet.** Every "Buy" button points to a placeholder anchor like
`#buy-sticker-1` or `#buy-bundle-5pack` — clicking one right now just jumps
to the top of the current page, it does not charge anyone or go anywhere.

This doc walks through the options for connecting a real store.

## Where the placeholders live

Open `shop.html` and search for `#buy-sticker` — there are 8 product buttons
(`#buy-sticker-1` through `#buy-sticker-8`, in the same order as the product
grid) plus one bundle button (`#buy-bundle-5pack`). A matching HTML comment
block at the top of the file and above each button marks exactly what needs
to change.

## Option A — Stripe Payment Links (recommended starting point)

Best if: B wants the simplest possible setup with no code and is comfortable
handling fulfillment (printing + shipping) separately, e.g. by ordering
prints in batches from a print shop and mailing them out personally.

1. Create a free [Stripe](https://stripe.com) account.
2. In the Stripe Dashboard, go to **Payment links → Create payment link**.
3. Add a product for each sticker (name, price, and the sticker image as the
   product photo) — repeat for all 8, plus one for the $15 5-pack bundle.
4. Stripe generates a unique checkout URL per payment link
   (`https://buy.stripe.com/xxxxxxx`).
5. In `shop.html`, replace each `href="#buy-sticker-N"` with the matching
   Stripe URL, and `href="#buy-bundle-5pack"` with the bundle's URL.
6. Stripe handles the actual payment; B still needs to fulfill and ship
   orders manually (or connect Stripe to a print-on-demand partner's API,
   see Option D).

## Option B — Gumroad

Best if: B wants a built-in storefront, simple digital or physical product
delivery, and doesn't want to manage a separate payment processor.

1. Create a [Gumroad](https://gumroad.com) account and add each sticker (and
   the bundle) as a product, uploading the same images already in
   `assets/images/`.
2. Gumroad gives each product a checkout URL
   (`https://[yourname].gumroad.com/l/[product]`).
3. Replace the placeholder hrefs in `shop.html` with these URLs.
4. Gumroad takes a flat fee + percentage per sale but handles receipts,
   basic analytics, and (for physical goods) still requires B to ship
   orders, or to mark them as fulfilled via a print partner manually.

## Option C — Etsy

Best if: B wants to reach an existing audience already browsing for stickers,
and is fine paying Etsy's listing + transaction fees in exchange for built-in
discovery.

1. Create an Etsy shop and list each sticker as a separate listing (Etsy
   supports variations, so the 5-pack bundle can be a variant or its own
   listing).
2. Copy each listing's public URL.
3. Replace the placeholder hrefs in `shop.html` with the Etsy listing URLs.
4. Note: this sends traffic away from the blog to Etsy's marketplace, which
   trades some control/branding for Etsy's built-in buyer traffic.

## Option D — Print-on-demand fulfillment (Printful / Stickermule)

Best if: B doesn't want to touch inventory, printing, or shipping at all.

1. Create an account with [Printful](https://www.printful.com) or
   [Stickermule](https://www.stickermule.com).
2. Upload each of the 8 sticker designs (source images live in
   `assets/images/sticker-*.webp` — export a higher-resolution version for
   print if the current web-optimized files are too small for the print
   provider's requirements).
3. Printful integrates directly with Stripe, Shopify, and other storefronts
   to auto-fulfill orders (print + ship) whenever a sale comes in — this is
   the closest to a fully hands-off setup. Stickermule has its own simpler
   built-in store links per design, similar to Gumroad.
4. Whichever integration is used, the resulting checkout URL still just gets
   pasted into the matching `href="#buy-sticker-N"` slot in `shop.html`.

## After connecting real checkout links

1. Open `shop.html`.
2. For each product card, replace `href="#buy-sticker-N"` with the real
   checkout URL for that specific sticker.
3. Replace `href="#buy-bundle-5pack"` with the real 5-pack checkout URL.
4. Delete or update the `TODO(shop-setup)` comment blocks once the real links
   are in place, so future edits don't accidentally re-introduce placeholders.
5. Double check prices in `shop.html` match whatever was set up in
   Stripe/Gumroad/Etsy/Printful — they're independent and won't sync
   automatically.
6. Redeploy the site.

## Suggested starting point

Stripe Payment Links (Option A) is the fastest way to start actually
selling — it takes about 10-15 minutes to set up all 9 links (8 stickers +
bundle) and requires no code changes beyond pasting URLs into `shop.html`.
Move to Option D (print-on-demand) later once volume makes manual
fulfillment tedious.