> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hiveku.com/llms.txt
> Use this file to discover all available pages before exploring further.

# CRO Defaults Bundle

> Five conversion-rate components that ship by default with every Shopify storefront — free shipping bar, stock urgency, recently viewed, trust badges, cart upsell. Tunable per shop, applied on next deploy.

## What this is

Five conversion-rate-optimization components that ship inside every cart and product-detail scaffold. They self-disable based on env vars, so a merchant who never opens the settings UI still gets sensible defaults. Tuning lives at `/dashboard/commerce/settings/storefront`.

These are the same kinds of features the Shopify app store sells as separate apps for \$5–20/month each (Free Shipping Bar, Hextom Stock Urgency, Recently Viewed Products, Trust Badge, Frequently Bought Together).

## The five components

<CardGroup cols={2}>
  <Card title="Free Shipping Bar" icon="truck">
    Top-of-cart-drawer strip showing how close the shopper is to free shipping ("\$15.00 to free shipping").
  </Card>

  <Card title="Stock Urgency" icon="triangle-exclamation">
    "Only N left in stock" badge on the PDP price block when inventory is low.
  </Card>

  <Card title="Recently Viewed" icon="clock-rotate-left">
    Bottom-of-PDP strip with the last 5 products this shopper looked at. Client-side localStorage, hidden on first visit.
  </Card>

  <Card title="Trust Badges" icon="shield-check">
    Payment-method monogram row in the cart drawer footer (Visa, Mastercard, Amex, Apple Pay, Google Pay, Shop Pay).
  </Card>

  <Card title="Cart Upsell">
    Suggested add-on in the cart drawer when subtotal hits a configured floor. Phase 2 — toggle exists in settings, component scaffolds in a future ship.
  </Card>
</CardGroup>

## Default settings

The defaults are conservative on purpose — components that need a merchant-specific number (free-shipping threshold) ship **off**; components that work without configuration ship **on**.

| Component         | Default                    | Why                                                                    |
| ----------------- | -------------------------- | ---------------------------------------------------------------------- |
| Free Shipping Bar | **Off** (no threshold set) | Threshold is merchant-specific; a wrong default would mislead shoppers |
| Stock Urgency     | **On**, threshold = 10     | Reasonable for most catalogs; tune per shop type                       |
| Recently Viewed   | **On**, count = 5          | Client-side only, no PII concerns                                      |
| Trust Badges      | **On**                     | Visible payment-method monograms have no downside                      |
| Cart Upsell       | **Off**                    | Phase 2 component not yet rendering                                    |

## Where shoppers see them

### Free Shipping Bar

Top of the cart drawer (above the line items). Reads cart subtotal + threshold from env vars and shows progress:

```
┌────────────────────────────────────────────┐
│ ☑ $15.00 away from free shipping          │
│ ████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
└────────────────────────────────────────────┘
```

When subtotal ≥ threshold, becomes "🎉 You qualify for free shipping!"

### Stock Urgency

Inline next to the price on the PDP, only when the variant's `totalInventory` ≤ threshold:

```
$24.00     Only 3 left in stock
```

Hidden for products with inventory tracking disabled (`totalInventory == null` in Storefront API).

### Recently Viewed

Below the product description on the PDP. Tracks the last N product handles the shopper viewed in `localStorage` (excluding the current product). Falls back gracefully when localStorage is unavailable (private browsing).

### Trust Badges

In the cart drawer footer, between subtotal and the checkout button. Inline SVG (no third-party fonts/icons load). Fixed list of common payment methods — covers >95% of US/EU merchants.

```
Secure checkout via Shopify
[VISA] [MC] [AMEX]   Pay [G Pay] [shop]
```

## Tuning per shop

`/dashboard/commerce/settings/storefront` has the full panel. Multi-shop accounts get a shop-picker dropdown — settings are per-connection, so the fashion brand's stock-urgency threshold of 5 doesn't override the electronics brand's threshold of 50.

### Free Shipping Bar

* **Enable** — master toggle
* **Threshold** (e.g. \$75.00) — cart subtotal at which shipping becomes free
* **Currency** (e.g. USD) — for the formatted amount
* **Custom message** — override default copy with `{{remaining}}` variable

### Stock Urgency

* **Enable** — master toggle
* **Show when stock is at or below** — threshold (1–1000)

### Recently Viewed

* **Enable** — master toggle
* **Number of products to show** — 1–20

### Trust Badges

* **Enable** — master toggle (no other config — merchant-enabled methods are detected)

### Cart Upsell

* **Enable** — toggle (Phase 2 — component scaffolds when ready)
* **Min cart subtotal** — floor before the upsell strip appears

## How changes apply

CRO settings flow as env vars at deploy time:

```
NEXT_PUBLIC_SHOPIFY_CRO_FREE_SHIPPING_ENABLED=1
NEXT_PUBLIC_SHOPIFY_CRO_FREE_SHIPPING_CENTS=7500
NEXT_PUBLIC_SHOPIFY_CRO_FREE_SHIPPING_CURRENCY=USD
NEXT_PUBLIC_SHOPIFY_CRO_STOCK_URGENCY_ENABLED=1
NEXT_PUBLIC_SHOPIFY_CRO_STOCK_URGENCY_THRESHOLD=10
NEXT_PUBLIC_SHOPIFY_CRO_RECENTLY_VIEWED_ENABLED=1
NEXT_PUBLIC_SHOPIFY_CRO_RECENTLY_VIEWED_COUNT=5
NEXT_PUBLIC_SHOPIFY_CRO_TRUST_BADGES_ENABLED=1
NEXT_PUBLIC_SHOPIFY_CRO_CART_UPSELL_ENABLED=0
```

Saving in the dashboard updates the database and **the next deploy picks them up**. The settings UI surfaces this expectation explicitly with a sticky banner.

<Note>
  Why not hot-reload? Env-var injection is the cleanest seam between merchant settings and rendered behavior. Hot-reloading would require either a runtime fetch on every render (latency cost) or a websocket push to deployed sites (operational complexity). Redeploying takes 60-90 seconds and matches user expectations for any other settings change.
</Note>

## Why these aren't separate scaffolder features

Each CRO component is small (50-150 lines). Splitting them into individual scaffold tools would make the agent's job harder ("did I scaffold the trust badges feature?") and make the cart drawer awkward to assemble. Bundling all five into the cart + PDP scaffolds means:

* The cart drawer always has the right shape
* Toggling a feature off via settings is the merchant control surface, not a code surgery surface
* Rebuilding the entire CRO bundle is one redeploy, not five scaffold tool calls
* The AI agent points users at `/dashboard/commerce/settings/storefront` instead of trying to scaffold individual features

## What we did not ship

* **A/B testing on CRO components.** Toggles are global per shop.
* **Schedule windows** ("free shipping bar visible only Friday-Sunday"). Phase 2.
* **Cart upsell component** itself — toggle exists, render lands later.
* **Geo-targeting** ("free shipping in US only"). Phase 2.
* **Custom CRO components** beyond the bundled five. Build your own components and import them; we don't ship a plug-in surface yet.

## What's next

<CardGroup cols={2}>
  <Card title="Storefront scaffolding" icon="hammer" href="/integrations/shopify/storefront">
    What gets generated alongside the CRO bundle.
  </Card>

  <Card title="Reviews" icon="star" href="/integrations/shopify/reviews">
    The other component shipped automatically with PDP.
  </Card>
</CardGroup>