Case study · Shopify · Apparel

Fair Harbor: a mobile rebuild that turns browsing into buying.

Fair Harbor is a Certified B Corp menswear and swim brand whose clothing is made from recycled plastic bottles. We rebuilt the mobile product page and tuned checkout for Shop Pay and Apple Pay.

Start a project Visit live site (opens in a new tab)
RPV uplift
+27%
Mobile share
72%
UX rating
4.9/5

Live storefront · scrolling top to bottom

01 / PROJECT DETAILS

The project at a glance.

The range covers swim, tops, bottoms, denim and kids.

fairharborclothing.com (opens in a new tab)
Client
Fair Harbor
Industry
Fashion & apparel
Region
United States
Platform
Shopify
Catalogue
Swim, tops, bottoms, denim, kids
Timeline
2024–2026

What we delivered

  • Mobile-first product page
  • Editorial galleries
  • Size-by-fit selection
  • Shop Pay and Apple Pay checkout
  • Trust signals

02 / THE PROBLEM

A beautiful brand with a mobile experience that didn't convert.

Fair Harbor had a beautiful brand but a poorly converting mobile experience. Product pages took 4+ seconds to load, the gallery wasn't tuned for swipe-first mobile browsing, and Apple Pay wasn't appearing properly in mobile Safari for 30% of users.

Product pages took 4+ seconds

Shoppers on phones waited too long to see the product.

A gallery not built for swiping

The product gallery wasn't tuned for swipe-first mobile browsing.

Apple Pay missing for 30% of users

The button wasn't appearing properly in mobile Safari.

Conversion trailing the brand

The mobile experience was not doing justice to the product.

03 / THE SOLUTION

A mobile-first product page and a checkout tuned for wallets.

A mobile-first product page rebuild with editorial galleries, smarter variant selection, trust signals, and a checkout tuned for Shop Pay and Apple Pay across every iOS version we tested.

  • Editorial product galleries

    Galleries designed for the thumb, carrying the product story on a phone screen.

  • Size-by-fit variant selection

    Variants are organised by fit, so choosing a size takes less thought.

  • Trust signals where they count

    Sustainability badges and return guarantees sit on the product page.

  • Shop Pay and Apple Pay that show up

    Checkout was tuned and tested across every iOS version we could get hold of.

Desktop and mobile · the same build

04 / STRATEGY

Start where the shopper is: on a phone.

Four decisions shaped the build.

  1. 01

    Mobile first, desktop second

    The product page was rebuilt for the phone and scaled up, not the other way round.

  2. 02

    Let the gallery sell

    Editorial galleries built for swiping do the work a long description cannot.

  3. 03

    Make size an easy choice

    Fit comes first in variant selection, because fit is the question shoppers actually have.

  4. 04

    Remove doubt at the pay button

    Fast wallets only help when they appear, so they were tested version by version.

05 / SCREENS

The storefront in motion.

The whole homepage on desktop and on a phone, scrolling top to bottom side by side. Hover to hold it still.

06 / RESULTS

What changed for Fair Harbor.

+27%

Revenue per visitor

after the redesign and checkout rebuild

72%

Mobile share

4.9/5

UX rating

07 / PROCESS

How the engagement ran.

The same four stages as every engagement, with the specific work done for Fair Harbor at each one. The steps play through in order.

  1. Stage 1

    Audit and scope

    We review the current theme, apps and analytics, then write a fixed-scope SOW with named deliverables and a date.

    What we did for Fair Harbor

    • Measured product pages at 4+ seconds
    • Found Apple Pay missing for 30% of mobile Safari users
    • Reviewed the gallery on phones

  2. Stage 2

    Design and build

    Work happens in a dev store on a Git-backed workflow. You get a preview link from week one, not a reveal at the end.

    What we did for Fair Harbor

    • Rebuilt the product page mobile-first
    • Built editorial, swipe-first galleries
    • Reorganised variant selection by fit

  3. Stage 3

    QA and launch

    Cross-browser and device QA, redirect map, analytics verification, then a launch window agreed with you rather than dropped on you.

    What we did for Fair Harbor

    • Tuned checkout for Shop Pay and Apple Pay
    • Tested across iOS versions
    • Added sustainability badges and return guarantees

  4. Stage 4

    Hypercare

    Fourteen to sixty days of included post-launch support while real traffic finds the edge cases.

    What we did for Fair Harbor

    • Supported the store through hypercare
    • Revenue per visitor up 27%
    • UX rating of 4.9 out of 5

08 / THE STOREFRONT

Scroll the whole page.

The full Fair Harbor homepage as shoppers see it. Scroll inside the frame to move through it from the offer strip to the footer.

Commerce platform

  • Shopify
  • Online Store 2.0

Checkout

  • Shop Pay
  • Apple Pay
Fair Harbor homepage, full page