How we took a Shopify store from 68% to 22% bounce rate

A 68% bounce rate sounds abstract until you put a revenue number against it. So let's start there.

Take a Shopify store doing £500,000 a year in revenue at a 2% conversion rate. That's 25,000 converting sessions out of 1.25 million total sessions. Now imagine the bounce rate sits at 68% — meaning 850,000 of those sessions left without interacting beyond the landing page. Those bounced sessions cost the same to acquire as the ones that converted. If even a quarter of them stayed and converted at the site average, that's another 6,250 orders. At an average order value of £40, that's £250,000 in missed revenue. Half the business, lost on the first page.

That was the situation when KIRN Coffee Co. came to us. This is what we found, what we rebuilt, and what the numbers looked like ninety days later.

The brief

KIRN had launched on a popular ThemeForest Shopify theme eighteen months earlier. The brand identity was strong, the product was excellent, paid traffic was scaling, and the founders were watching most of that paid traffic bounce. They'd tried two CRO consultants, A/B tested headlines, swapped hero images, added urgency banners. The needle hadn't moved.

What they needed wasn't more optimisation on a broken foundation. They needed the foundation rebuilt. The brief we agreed on was specific: a new Shopify theme built from scratch, performance-first, with a documented experiment framework so future changes were measured rather than guessed.

Timeline: ten weeks. Budget: in the mid five figures. No paid-ads pause — we had to migrate without losing momentum on existing campaigns.

KIRN's in-store experience set the bar the website wasn't meeting. Source: Pexels

The audit

We started with three weeks of pure diagnosis. No design work, no opinions, just measurement. Here's what was actually wrong.

Page speed was the headline problem

The homepage Largest Contentful Paint was 6.4 seconds on a Moto G mobile profile. The product page was worse at 7.1 seconds. The theme shipped eleven JavaScript files at over 700KB combined, three different web fonts with no font-display strategy, a homepage hero video that auto-played at 4.2MB on mobile, and a Shopify section that loaded a full carousel library to display one static testimonial.

When you wait seven seconds for a product page on 4G, you don't bounce because you don't like the brand. You bounce because you've already left.

Mobile experience was incidentally hostile

Seventy-three percent of KIRN's traffic was mobile. The theme's mobile design was a desktop layout shrunk down — not redesigned. Tap targets were 28px in places (Apple's recommended minimum is 44px). The header collapsed to a hamburger that hid the search bar entirely. The product image gallery on mobile required pinch-to-zoom to see anything useful. Adding to cart triggered a slide-out drawer that pushed the page off-screen and felt broken.

Above the fold was answering the wrong question

The homepage hero said "Coffee, Crafted." in elegant serif over a video of beans being roasted. Beautiful. Useless. New visitors landing from a Meta ad wanted to know: what's the product, what's the price, what makes this different, how do I buy it. The hero answered none of those questions in the first scroll.

Navigation was hiding the catalogue

The main nav was Brand / Our Coffee / Method / Journal / Shop. "Shop" was the fifth and last link. The collection grid sat two clicks deep, behind a brand-story landing page. We watched session recordings of paid traffic visiting from a "single origin Ethiopian" ad and bouncing because the product they'd been shown wasn't visible from the page they landed on.

The checkout was leaking

Checkout abandonment sat at 78% on mobile. The standard Shopify checkout, untouched. The problem wasn't the checkout itself — it was that the path to checkout was so long that anyone who started it was already a high-intent buyer fighting through the rest of the friction.

Mobile checkout was the single highest-leverage surface. Source: Pexels

The rebuild decisions

We took the theme to studs and rebuilt with a small set of guiding decisions.

Theme: bespoke, not ThemeForest

We built a custom theme using Online Store 2.0 architecture with strict performance budgets enforced from day one. No carousel libraries. No premium icon packs. No tracking scripts beyond what was strictly necessary. Total theme JavaScript budget: 80KB compressed. Total CSS budget: 25KB compressed. Every section had to justify its weight.

We use Hydrogen on bigger projects, but for KIRN a Liquid-based custom theme was the right call — faster to build, easier for their team to maintain post-launch, and Shopify's Liquid runtime is fast when the theme is written well.

Above the fold rewritten for intent

The new homepage hero said exactly what the brand sold, who it was for, and how to buy it. Product image, three-word value proposition, price visible, primary CTA "Shop our coffees". The roasting video moved further down the page as a brand reinforcement, not the front door. Conversion from homepage to product page increased by 89% in the first month on the same paid traffic.

Mobile-first navigation

The hamburger went away. We replaced it with a persistent bottom navigation bar (Home, Shop, Account, Bag) — borrowed from native app patterns — that kept the catalogue one tap away from every page. Top-of-page we kept the brand wordmark and a search icon. Tap targets all 48px or larger. Add-to-cart on the product page sat as a sticky button at the bottom of the screen on mobile, always visible.

Performance as a non-negotiable

We hit specific budgets:

• Largest Contentful Paint under 1.2 seconds on 4G mobile
• Cumulative Layout Shift under 0.05
• Interaction to Next Paint under 100ms
• Hero image: WebP, 380KB on mobile, served with priority hint
• Web fonts: one family, two weights, subset to Latin, preloaded
• Third-party scripts deferred until first interaction, including analytics

Final achieved load time on the product page: 0.9 seconds first contentful paint, 1.4 seconds largest contentful paint. From 7.1 seconds.

Imagery and copy

KIRN's existing product photography was beautiful but heavy. We re-shot key shots specifically for web — flatter compositions, lighter file sizes, mobile-optimised crops. Product copy was rewritten to lead with what the coffee tastes like (one sentence, present tense) before the origin story. Brand voice preserved, scroll depth doubled.

Experiment framework

We installed Plausible for first-party analytics, a server-side GA4 setup for paid attribution, and a documented testing process. Every change post-launch was logged, hypothesised, measured against a baseline, and decided on a single primary metric. No more vibes-based CRO.

🎬 Watch: KIRN, in motion

Brand specificity belongs on the site too — not only in the shop.

The results

Numbers below are at the 90-day mark post-launch. Same product, same pricing, same brand — the only changes were on-site.

Organic traffic increased not because we did keyword research — we didn't, beyond fixing obvious technical SEO issues. It increased because Google's algorithms reward fast, intent-matching pages. Cleaning up Core Web Vitals, fixing the heading structure, adding proper product schema, and making content scannable were the things that moved rankings. The CRO and SEO wins came from the same work.

Average order value rose because the product page rebuild made bundling and subscription options visible without being pushy. Twenty-one percent of orders post-launch included a second product or a subscription option that hadn't been surfaced in the old theme.

Bounce rate fell first; revenue caught up within the quarter. Source: Pexels

Five principles you can apply to your own store

We're not claiming any of these are novel. We're claiming we executed them well, against a strict budget, with an experiment framework instead of guesswork. You can do the same.

1. Performance is the primary CRO lever

Conversion rate optimisation tutorials obsess over copy and buttons. The real lever for most underperforming Shopify stores is page weight. Strip your theme of every JavaScript file you don't strictly need. Audit your apps and remove anything that's not earning its place. Replace web fonts with system fonts if you can, or self-host and subset if you can't. Get your LCP under 1.5 seconds on mobile before you A/B test anything.

2. Above-the-fold answers questions, not feelings

A new visitor has four questions: what is this, who is it for, why is it different, how do I buy. Your hero needs to answer all four before they scroll. Brand mood matters too — but mood after answers, not instead of answers.

3. Make the catalogue one tap from every page

If a visitor has to click more than once to see what you sell, your funnel is leaking before you've started. On mobile, a persistent bottom nav or sticky shop button. On desktop, the shop link cannot be lower than the third link in your nav.

4. Measure with first-party tools

GA4 is fine for paid attribution but it's slow, sampled, and increasingly polluted by privacy filtering. Add Plausible or Fathom for first-party analytics — you'll see real-time data your team will actually use, with metrics that align with what you care about (conversion paths, page-level engagement). Server-side tracking for paid platforms where attribution matters.

5. Treat changes as experiments, not opinions

Every change to your live store should have a hypothesis, a primary metric, and a defined measurement window. Without that framework, you'll spend a year tweaking your site based on whichever stakeholder shouted loudest in the last meeting. With it, you'll know which changes earn their place and which ones to revert.

Want a free Shopify audit?

Send us your store URL. Within five working days we'll deliver a documented audit covering the top three friction points hurting your conversion rate, with specific recommendations and estimated lift. No sales call required — read the document, do it yourself if you want to.

Request a free Shopify audit →