conversion-rate-optimization

# Conversion Rate Optimization

## Overview

Conversion rate optimization (CRO) is the systematic process of increasing the percentage of visitors who complete a purchase. Before spending on tools or tests, run a structured audit using free platform analytics and a heatmap tool to identify where users actually drop off. Most stores have 3–5 high-impact fixes that require no A/B testing — just implementation.

## When to Use This Skill

- When overall store conversion rate is below 2% and you need a structured diagnostic approach
- When preparing an A/B test backlog based on data rather than guesses
- When optimizing a newly launched checkout flow before scaling ad spend
- When post-redesign metrics show a conversion regression and root cause analysis is needed
- When stakeholders need a prioritized roadmap of CRO experiments

## Core Instructions

### Step 1: Install analytics and heatmap tools

| Tool | Cost | What It Shows |
|------|------|---------------|
| **Google Analytics 4** | Free | Funnel drop-off by step, conversion rate by source |
| **Microsoft Clarity** | Free | Session recordings, heatmaps, rage-click detection |
| **Hotjar** | Free tier available | Heatmaps, session recordings, on-site surveys |
| **Lucky Orange** | $18/mo | Heatmaps + funnel analytics, good Shopify integration |

Install at least GA4 (required) and one heatmap tool before doing any CRO work. Data collection takes 2–4 weeks before you have enough to act on.

---

#### Shopify

1. Go to **Shopify Admin → Online Store → Preferences**
2. Under **Google Analytics**, enter your GA4 Measurement ID (starts with G-)
3. For Microsoft Clarity: install the **Microsoft Clarity** app from the Shopify App Store — it auto-injects the tracking code on all pages including checkout
4. For Hotjar: add the Hotjar tracking code to your theme under **Online Store → Themes → Edit Code → theme.liquid**

---

#### WooCommerce

1. Install the **MonsterInsights** plugin (free tier) — it connects WordPress to GA4 with ecommerce tracking built in
2. For heatmaps: install the **Microsoft Clarity** WordPress plugin (free, official) or **Hotjar** plugin
3. For funnel tracking: MonsterInsights shows checkout funnel steps in WordPress admin under **Insights → Reports → eCommerce**

---

#### BigCommerce

1. Go to **BigCommerce Admin → Advanced Settings → Analytics**
2. Add your GA4 Measurement ID under "Google Analytics"
3. For heatmaps: go to **Apps → Marketplace** and install Microsoft Clarity or Hotjar

---

### Step 2: Run a CRO audit — check these high-impact items first

Review your store against this checklist before running any A/B tests. These are the highest-ROI fixes:

**Checkout friction (fix these first):**
- [ ] Guest checkout available without forced account creation — forcing registration is the #1 abandonment cause (35% of users leave)
- [ ] Email field is the first field on the checkout form — captures abandoners for email recovery even if they don't complete
- [ ] Express payment methods (Shop Pay, Apple Pay, Google Pay) appear above the fold on mobile
- [ ] Shipping cost is shown before the customer reaches the payment step — surprise shipping costs cause 25% of abandonment
- [ ] Return policy is visible on the checkout page or product page

**Product page friction:**
- [ ] Primary "Add to Cart" button is visible without scrolling on mobile
- [ ] Product images include multiple angles, lifestyle shots, and zoom capability
- [ ] Reviews/ratings are displayed on the product page
- [ ] Low stock / urgency messaging is shown when inventory < 10 units

**Trust signals:**
- [ ] SSL padlock visible in browser
- [ ] Payment method icons (Visa, PayPal, etc.) visible near checkout button
- [ ] Money-back guarantee or return policy linked from product pages

### Step 3: Identify your highest drop-off step using platform analytics

---

#### Shopify

1. Go to **Shopify Admin → Analytics → Reports → Checkout funnel**
2. This shows conversion rate at each checkout step: Information → Shipping → Payment → Order confirmation
3. The step with the highest drop-off is your primary target

Also check:
- **Analytics → Reports → Sessions by landing page** — find which pages drive traffic but have low conversion
- **Analytics → Live View** — watch real-time sessions to understand user behavior

---

#### WooCommerce with MonsterInsights

1. Go to **WordPress Admin → Insights → Reports → eCommerce**
2. Review the checkout funnel: Product page → Cart → Checkout → Order Complete
3. High drop-off at "Cart → Checkout" suggests cart page issues; high drop-off at "Checkout → Order Complete" suggests checkout friction

---

#### GA4 (all platforms)

1. Go to **GA4 → Reports → Monetization → Checkout journey**
2. This shows the standard Google ecommerce funnel: View Item → Add to Cart → Begin Checkout → Purchase
3. Click on any step to see the session recordings in Clarity/Hotjar that match users who dropped off there

### Step 4: Review heatmaps and session recordings

After 2 weeks of data collection:

1. Open Microsoft Clarity or Hotjar
2. **Heatmaps**: look for rage clicks (red areas users click repeatedly) on product pages and checkout — these indicate user frustration
3. **Session recordings**: watch 10–20 sessions of users who reached checkout but did not purchase — identify specific friction points
4. **Click maps on product pages**: are users clicking on non-clickable product images? Are they missing the "Add to Cart" button?

### Step 5: Prioritize experiments using ICE scoring

Before building an A/B test backlog, score each hypothesis:

| Hypothesis | Impact (1–5) | Confidence (1–5) | Ease (1–5) | ICE Score |
|-----------|-------------|-----------------|-----------|-----------|
| Enable guest checkout | 5 | 5 | 3 | 75 |
| Add Apple/Google Pay above fold on mobile | 4 | 4 | 4 | 64 |
| Show shipping cost on product page | 4 | 4 | 3 | 48 |
| Add "Only X left" urgency copy | 3 | 3 | 5 | 45 |

Run experiments in ICE score order. Never run more than 3 A/B tests simultaneously.

**A/B testing tools by platform:**

- **Shopify**: Shopify Experiments (built-in, Shopify Plus only) or **Intelligems** app for all plans
- **WooCommerce**: **Nelio A/B Testing** plugin or **Google Optimize** (discontinued — use VWO or Intelligems)
- **All platforms**: **VWO** ($200/mo) or **Convert** ($199/mo) for serious testing programs

### Step 6: Implement the highest-impact fixes

For Shopify stores, many of these are theme settings, not code changes:

- **Enable guest checkout**: Shopify Admin → Settings → Checkout → check "Allow customers to check out as guests"
- **Enable Shop Pay**: Shopify Admin → Settings → Payments → Enable Shop Pay
- **Add urgency copy**: use a free app like **Urgency Bear** or **Sales Countdown Timer** from the Shopify App Store
- **Add trust badges**: most themes have a "trust badges" section — add it to product pages and the cart page

## Best Practices

- **Fix drop-off at the worst-performing step first** — optimize the highest-volume drop-off before moving to smaller steps
- **Enable guest checkout** before any other test — it is consistently the #1 highest-impact change
- **Surface trust signals near the payment form** — SSL badge, return policy, and accepted card logos at the point of highest anxiety
- **Add express payment methods above the fold on mobile** — Shop Pay, Apple Pay, and Google Pay reduce checkout time from 2 minutes to 15 seconds on mobile
- **Set a minimum detectable effect before running a test** — run tests without a pre-calculated sample size leads to false positives
- **Use revenue per visitor, not just conversion rate** — sometimes a change increases CVR but reduces AOV

## Common Pitfalls

| Problem | Solution |
|---------|----------|
| A/B test shows conflicting results week over week | Use a fixed experiment duration based on statistical power calculation, not "when it looks significant" |
| High cart-to-checkout rate but low checkout completion | The drop-off is inside checkout — review Shopify's Checkout Funnel report to pinpoint the specific step |
| CRO changes improve CVR but reduce AOV | Track revenue per visitor, not just CVR |
| Heatmaps show rage clicks on non-clickable elements | Make these elements interactive (link product images to the product page) or remove the visual affordance |
| Funnel metrics inconsistent between GA4 and Shopify Analytics | Use Shopify's order count as ground truth; GA4 can miss orders due to ad blockers |

## Related Skills

- @cart-abandonment-recovery
- @exit-intent-popups
- @cross-sell-upsell-engine
- @social-proof-widgets
- @marketing-attribution-dashboard