`deploy/shopify/PASTE-INTO-THEME.md`

54 lines
# Adding "Design Coordinate" to the live Shopify theme

The dw-pairs-well service is live at `https://pairs.designerwallcoverings.com`. To make the button appear on every product page on `designerwallcoverings.com`, paste one self-contained snippet into the theme.

The Shopify admin token currently in our `.env` does **not** have `write_themes` scope (same as the existing `read_customers` gap noted in `CLAUDE.md`). So this step needs to be done by hand via the Shopify admin UI — or by minting a token with theme scopes.

## Option A — paste via Shopify admin (3 minutes)

1. Open <https://admin.shopify.com/store/designer-laboratory-sandbox/themes>
2. On the **live theme**, click `…` → `Edit code`
3. Open `sections/product-template.liquid` (or wherever your AI color-key block currently lives — search the codebase for `ai-color-key-container`)
4. **Paste the contents of `design-coordinate.liquid`** (in this folder) directly AFTER the line:
   ```liquid
   <div id="ai-color-key-container" style="margin-top: 1em; margin-bottom: 1em;"></div>
   ```
   and BEFORE the line:
   ```liquid
   <div class="product-recommendations-wrapper--right" ...
   ```
5. Click **Save**
6. Open any product page — the black "Design Coordinate +" pill appears below the image.

## Option B — automate via API (if you mint a token)

Mint a custom app token with these scopes:
- `read_themes`, `write_themes`

Then:
```bash
TOKEN=shpat_xxxxx
STORE=designer-laboratory-sandbox.myshopify.com

# Find the active (main) theme id
THEME_ID=$(curl -sS "https://${STORE}/admin/api/2024-10/themes.json" \
  -H "X-Shopify-Access-Token: $TOKEN" \
  | jq -r '.themes[] | select(.role=="main") | .id')

# Fetch the current product template
curl -sS "https://${STORE}/admin/api/2024-10/themes/${THEME_ID}/assets.json?asset[key]=sections/product-template.liquid" \
  -H "X-Shopify-Access-Token: $TOKEN" \
  | jq -r '.asset.value' > /tmp/current.liquid

# Splice in our snippet at the right anchor, then PUT back
# (manual splice or use a sed-based wrapper)
```

## Rollback

If anything looks wrong on the live page, edit the same template and delete the snippet block (between the `{%- comment -%} Design Coordinate` marker and the closing `</section>` of `#pairs-well-with`). The page returns to its prior state in seconds.

## Internal-only access (without touching the theme)

The service also serves a full preview UI at <https://pairs.designerwallcoverings.com/preview.html> — no Shopify needed. Use that as the internal Design Coordinate tool today.