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

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:

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

Related Skills

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

Checkout Analytics Instrumentation

Problem/Feature Description

Luminary Goods, a mid-sized direct-to-consumer furniture retailer, has seen their overall store conversion rate dip to 1.4% over the last quarter — well below industry benchmarks. Their marketing team is spending heavily on paid social but cannot tell the CEO which stage of the purchase journey is losing the most customers. The engineering lead has asked you to build the analytics layer that will finally answer this question.

The engineering team uses TypeScript on the frontend and PostgreSQL for their data warehouse. They currently have no step-level funnel instrumentation, no field-level error tracking, and their only conversion signal is a server-side order-confirmed event. They want a complete analytics instrumentation module that tracks each stage of the checkout journey and makes that data queryable.

Your goal is to produce a TypeScript analytics module that tracks each step of the checkout funnel and captures field-level validation failures, along with a SQL report query that surfaces step-to-step drop-off rates from the resulting data. The team's data analyst also wants to know how to reconcile discrepancies if the numbers ever differ between their analytics tool and their internal database.

Output Specification

Produce the following files:

• checkout-analytics.ts — TypeScript module with the funnel step tracking function and the field error instrumentation logic
• funnel-report.sql — A PostgreSQL query that reads from a funnel_events table and produces a daily drop-off report covering the last 30 days
• analytics-notes.md — A short document (bullet points are fine) explaining the analyst's question about reconciling analytics discrepancies between front-end tracking tools and the internal order database

Behavioral Analytics and Checkout Health Audit

Problem/Feature Description

Petal & Stone, a boutique e-commerce brand selling handmade ceramics, has a 68% checkout abandonment rate. They have anecdotal evidence of users clicking around seemingly interactive elements that don't respond, and customer support frequently receives complaints about confusing form errors. The head of UX wants to instrument the checkout flow with behavioral analytics so the team can see where users are struggling, and also wants an automated audit that flags structural checkout issues before the upcoming holiday season.

The engineering team has a Hotjar account already set up on the site (the snippet is already loaded on all pages via their tag manager, so window.hj is available). They want frontend TypeScript code that hooks into Hotjar to capture specific behavioral signals, particularly around form field interactions and how far users scroll on product pages. They also want a programmatic audit module that checks their checkout pages for the most impactful structural problems.

Your goal is to produce two TypeScript modules: one that wires up the behavioral event tracking, and one that defines and runs the checkout audit checks. Also produce a brief audit findings report using a sample checkout page description provided below.

Output Specification

Produce the following files:

• behavioral-tracking.ts — TypeScript module that initializes CRO event tracking. It should capture behavioral signals from forms and pages to surface to the analytics tool.
• checkout-audit.ts — TypeScript module defining the audit check list and the function to run all checks against a checkout page. Include the full list of checks as a typed data structure.
• audit-findings.md — A short findings report based on the sample page description below, listing which audit checks pass or fail and the top recommendations. Include specific checkout UX improvements the team should prioritize.

Input Files

The following files are provided as inputs. Extract them before beginning.

=============== FILE: inputs/sample-checkout-page.md ===============

Sample Checkout Page Description

Current State

The checkout flow is a single long-scroll page (not multi-step) with the following characteristics:

• Users must create an account before they can proceed to payment (no guest option)
• The payment section is 900px below the fold on mobile; the "Complete Purchase" button is only visible after scrolling
• Form validation errors appear in a red banner at the top of the page after the user clicks "Submit"
• The address form has 8 required fields: first name, last name, address line 1, address line 2, city, state, zip code, country — with no autocomplete enabled
• There are no security badges, SSL indicators, or accepted card logos visible near the payment fields
• The form fields have no autocomplete attributes set

CRO Experiment Prioritization and Business Case Tool

Problem/Feature Description

Birchwood Home, an online home goods brand, has accumulated a backlog of 8 checkout improvement ideas over the past six months. The growth team has been arguing about which experiments to tackle first, with engineers pushing for the easiest wins and the CMO pushing for the biggest revenue impact. The VP of Growth wants to settle the debate with a data-driven prioritization framework that everyone can reference, and also needs a financial model to justify experiment investment to the board.

You have been asked to build a TypeScript prioritization module that scores each experiment in the backlog and ranks them objectively. The tool also needs to model the expected revenue impact of the top experiments so the team can quantify what is at stake. The team has also asked you to document a brief guidance note on responsible experiment management practices to accompany the tool.

The experiment ideas to include in the backlog are: 1. Allow checkout without mandatory account registration 2. Add Apple Pay and Google Pay buttons at the top of the checkout page 3. Show a "3 items left in stock" urgency message on the product page 4. Redesign the shipping address form to reduce the number of required fields 5. Add a progress bar showing the steps remaining in checkout 6. Show security trust badges and accepted payment logos next to the payment form 7. Send abandoned cart emails triggered 30 minutes after cart abandonment 8. Allow customers to save their cart across sessions without creating an account

For the financial model, use these site metrics: 180,000 monthly visitors, current CVR of 2.1%, average order value of $72.

Output Specification

Produce the following files:

• experiment-prioritizer.ts — TypeScript module with the experiment data structures, scoring function, and revenue impact calculator. Include the full scored and ranked backlog as a constant, and demonstrate the revenue impact calculation for the top-ranked experiment.
• experiment-guidance.md — Brief guidance notes covering best practices for running this experiment program responsibly (concurrent test limits, how to determine when an experiment is ready to call, and what metrics to track alongside conversion rate).