convert-bump

# Convert Bump - Order-Form Bump Offer

> *"The bump is the smallest piece of copy in the funnel and the highest dollars-per-word. Eighty words and a checkbox. If you get it right, AOV jumps 12-30% across the whole funnel."*

This skill builds the bump: a single relevant low-friction add-on, presented as a checkbox above the order button, with Method-compressed micro-copy.

## When to Use

Trigger phrases: `order bump`, `bump offer`, `checkout bump`, `bump copy`, `/convert bump <product>`.

Use when the user has a checkout page and wants to add a single low-friction add-on (template pack, course module, license tier, faster-shipping option, swipe file, etc.) - small enough that the buyer adds it without thinking twice.

## When NOT to Use

- **Full upsell with its own page** → `/convert oto-page`.
- **Post-purchase cross-sell** → `/convert cross-sell-page`.
- **Pre-purchase main sales page** → `/convert sales-page`.
- **Auditing existing bump** → `/convert audit`.

## Inputs

Required:
1. **The flagship product** - what's already in the cart.
2. **The bump product** - what's being added. Must be:
   - Genuinely relevant to the flagship (no random "buy a t-shirt with your course" bumps).
   - Priced 5-30% of the flagship.
   - Deliverable instantly (no shipping logistics that complicate checkout).
3. **The flagship's voice + One Person** - bump must match the voice of the page it sits on.
4. **Real bump-only price reasoning** - the bump price is genuinely lower than buying the same thing later.

Optional:
- **Brand colors / logo.**
- **One specific Receipt or Snapshot proof beat** - optional but valuable.
- **`out_path`** - defaults via `build_report_path`.

## Workflow - All Eight Method Phases (radically compressed)

A bump is 30–80 words. Every Method framework collapses to one or two sentences.

### Phase 0 - Four Questions (call `convert-four-questions`)

The bump answers all four in a single short paragraph:
- **Why You** = the bump fills a gap the flagship leaves.
- **Why Me** = inherited.
- **Why This** = "the [bump product] does [specific job] that [flagship] doesn't cover."
- **Why Now** = bump-only pricing valid only at this checkout.

### Phase 1 - Temperature

Boiling. The buyer is on the order form. Don't pitch - *suggest*.

### Phase 2 - Four-Layer Open (call `convert-open`)

Compressed to 1 sentence: a Nerve Strike that anticipates the next question they're about to ask. *"Most people who get [flagship] hit the same wall by week two - no [thing the bump solves]."*

### Phase 3 - Three Locks

- **Want** = the wall the bump removes.
- **Trust** = "I built this in" - Skin in the Game, one phrase.
- **Excuse** = "$X added to your order - vs. $Y if you grab it later."

### Phase 4 - Bullets

If the bump uses bullets at all, 2 max. Snapshot or Keyhole only. Most bumps are better as a single sentence + checkbox label, no bullets.

### Phase 5 - Proof

One Receipt or one Drive-By. Optional. The bump is short enough that the proof is sometimes the price comparison itself.

### Phase 6 - Cascade Close

The checkbox **is** the close. The label is the Door. *"Yes! Add the [bump] to my order for an extra $X."*

### Phase 7 - Greased Chute

The eye must move from the flagship summary line → bump headline → checkbox → buy button without backtracking. Visual hierarchy is everything.

### Phase 8 - Voice + Bullshit Filter

A bump that sounds salesy at this stage triggers cart abandonment. Read aloud - would you say this casually? If no, rewrite.

## The Bump Anatomy (30–80 words)

| Element | Words | Job |
|---------|-------|-----|
| Yellow/highlighted box | - | Break visual rhythm of the order form |
| 1-line headline (bold) | ~8 | The Nerve Strike compressed |
| 1–2 sentence body | ~30–50 | Side Door + Skin + Excuse compressed |
| Bullet (optional, 2 max) | ~10–20 | Snapshot bullet if needed |
| Checkbox label | ~10–20 | The Door |
| Price line | ~5 | The Math |

Total: 30–80 words. Period.

## HTML/CSS Reference Implementation

```html
<!-- Drop-in bump component for order-form pages. -->
<style>
  .bump{
    --bump-bg:#fff8d8;
    --bump-border:#e2c34a;
    --bump-ink:#1a1408;
    --bump-accent:#c0392b;
    background:var(--bump-bg);
    border:2px dashed var(--bump-border);
    color:var(--bump-ink);
    padding:18px 18px 14px;
    border-radius:8px;
    margin:18px 0;
    font:16px/1.5 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  }
  .bump h3{margin:0 0 8px;font-size:18px}
  .bump p{margin:0 0 10px}
  .bump ul{margin:0 0 10px 18px;padding:0}
  .bump label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-weight:600;border-top:1px dashed var(--bump-border);padding-top:10px}
  .bump label input[type=checkbox]{margin-top:4px;width:18px;height:18px;accent-color:var(--bump-accent)}
  .bump label input[type=checkbox]:focus-visible{outline:3px solid var(--bump-accent);outline-offset:2px}
  .bump .price{font-weight:700}
  @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
</style>

<aside class="bump" aria-label="Optional add-on">
  <h3>{{NERVE_STRIKE_HEADLINE_8_WORDS}}</h3>
  <p>{{COMPRESSED_BODY_30_TO_50_WORDS}}</p>
  <!-- Optional bullet block (2 max). Delete if bump body is enough. -->
  <ul>
    <li>{{SNAPSHOT_BULLET_OPTIONAL}}</li>
  </ul>
  <label>
    <input type="checkbox" name="bump_{{BUMP_SLUG}}" value="1" aria-describedby="bump-price-{{BUMP_SLUG}}">
    <span>
      {{CHECKBOX_LABEL_DOOR_VISION}}
      <span id="bump-price-{{BUMP_SLUG}}" class="price">- add ${{BUMP_PRICE}}</span>
    </span>
  </label>
</aside>
```

CSS notes:
- The yellow/dashed-border treatment is the canonical bump visual signal. It breaks the order-form's visual rhythm and pulls the eye exactly once. Do NOT make this look like the rest of the form.
- `accent-color` styles the checkbox to brand color in modern browsers. Falls back gracefully.
- `aria-describedby` links the checkbox to the price line for screen readers.
- Keep the box width matching the