Website & Conversion Optimisation

This section walks through the parts of the website that move conversion most, from product pages and cart flow to homepage structure, email capture, and the testing cadence behind it.

The brands that compound are the ones that manufacture a better result from what they already have - getting 1% better every day, not waiting for the next sale or product launch to save them.

Platform and tool recommendations: Section 10: E-Commerce & Tech Stack.

Product Page Anatomy and Best Practices

These are typically some of the highest-intent visitors on your site.

A pattern we saw too often across DTC brands: launch a product, tell the market about it, make a product page, set some ads running, then move on to the next thing. At Quad Lock we'd launch, then start learning. Optimising the webpage, the messaging, the positioning, the ads. We had videos on our website that were one of the biggest converting elements. We knew people needed to see Quad Lock in action to understand and trust it - a learning from our early days of Facebook video advertising. A lot of our product page was about getting people to watch the video.

Product Page Hierarchy

Image Requirements

• 5-8 images. Hero, lifestyle, close-ups, scale, packaging
• Zoom on hover (desktop). Variant-linked. Swipeable mobile
• Videos a must for complex products

For more on video as an acquisition tool, see Section 13: Meta Ads - Setup & Infrastructure.

The Add to Cart Button

• Above fold, high contrast, 44px+ height
• Sticky on mobile - often lifts conversion materially, especially on longer PDPs
• Clear label - "Add to Cart", nothing clever

At Quad Lock, we found that having multiple add-to-cart buttons on desktop and a persistent add-to-cart button on mobile greatly increased our ATC rate - especially since our buying journey was fairly involved. The key insight: don't force the user through every possible option before they see an active add-to-cart button. You can always upsell and cross-sell on the cart page without overwhelming them on the product page. Get them to commit first.

Social Proof On-Page

• Star rating + count above fold, clickable to reviews
• Full reviews below fold, photos first
• Build volume on hero SKUs fast - consider a higher frequency of review request emails initially.

Tip: if you have multiple variants, make sure reviews are grouped at the product level, not split across individual variants.

Product Description: Benefits Over Features

• Opening: What it does, who it's for
• 4-6 benefit bullets: Outcomes, not specs
• Expandable specs: For those who want detail
• 3-5 FAQs: Handle objections

Trust Elements Near ATC

Returns, shipping, security badges. Stock indicators only if truthful.

Homepage Optimisation

Much of your traffic lands on product pages via organic, review links, ads, Instagram bio and the like. The homepage catches the 20-30% who arrive directly.

Homepage Structure

The positioning simplification that drove overnight sales growth at Quad Lock (Section 3: Brand DNA) applied directly to website structure. We stripped back to one clear message, one clear product, one clear promise - and ran that through the entire site: homepage, product pages, ads, everything. If you diversify too early, the message can get lost.

Hero Section

Three questions in 3 seconds: What? Who? Why should I care?

• One CTA. "Shop Now" not "Learn More"
• Social proof adjacent: "50,000+ 5-star reviews" or press logos
• Load as fast as possible. No carousels. Slide 1 gets most of the clicks and the rest mostly add weight.

Good

• "Trusted by millions worldwide with 100,000+ five-star reviews..." Product in use, single CTA

Bad

• "Welcome to our store." Abstract image, competing CTAs, carousel nobody sees

Collection Page Optimisation

• 3-4 columns desktop, 1-2 mobile. Consistent ratios. Hover images for fashion
• Price and rating on every tile. Sold-out with "Notify Me"
• Sort: Bestselling. Filters: price, colour, size, type
• "Load more" > pagination. Short keyword intro (2-3 sentences)

Guided Shopping: When Your Range Gets Complex

As your product range grows, more choice can actually mean fewer sales. Customers freeze when they can't figure out which product is right for them. At Quad Lock, we invested heavily in guided shopping flows: "What activity do you do? What phone do you have? Here's your setup." The goal was to do the thinking for the customer.

If you're carrying more than 15-20 SKUs, consider:

• Product finder quizzes that narrow options in 3-4 questions
• "Help me choose" flows built into collection pages
• Use-case based navigation (by activity, by need) alongside traditional categories
• Comparison tables for similar products with clear "best for" labels

The more products you have, the more important it is to make the path to purchase simple. Don't just organise your catalogue. Guide the consumer through it.

Email Capture: Popups, Exit Intent, and What Works

Welcome Popup Timing

• Trigger: Test delays and scroll depths. Never on page load. Suppress for subscribers
• Frequency cap: 7-14 days if dismissed

Offer Options (by Conversion Rate)

Exit-Intent & Persistent Popups

Exit-intent popups detect when a visitor is about to leave and trigger a last-chance offer. Results vary - we never had great results with traditional exit-intent at Quad Lock.

What worked better for us: When a visitor quickly dismissed the initial signup popup, we'd show a persistent overlay - a smaller, non-intrusive bar or tab that stayed on screen as they browsed. It gave them a second chance to engage without interrupting their session. They could clear it if they wanted, but most didn't, and it converted well because it caught people once they'd had time to look around and build intent.

If you test exit-intent, try these angles:

• PDPs: "Still thinking? Get 10% off [product name]"
• Cart: "Complete your order for free shipping"
• Homepage: "Join 50,000+ customers - get early access"

The persistent popup approach:

• Visitor dismisses initial popup → small persistent tab appears (e.g. bottom corner)
• Non-intrusive - they can keep browsing
• Catches visitors after they've built intent through browsing
• Can be dismissed again if they really don't want it
• Often outperforms exit-intent because the timing is better - they've seen your products, not just your homepage

Checkout Flow Optimisation

Why Carts Get Abandoned

Source: Baymard Institute aggregated research

Guest Checkout

Non-negotiable. 26% of abandoners cite forced account creation - the #2 reason in the table above. Capture email at checkout; offer accounts post-purchase.

Express Checkout

Treat one-tap wallets like guest checkout: not a nice-to-have, a default. Digital wallets now account for roughly 56% of global ecommerce transaction value, and the gap is widest exactly where you can least afford friction - mobile. A logged-in wallet skips manual entry entirely: the customer taps once with their thumb instead of typing a card number, expiry, CVV, billing and shipping address on a phone keyboard. That is the difference between a checkout that completes and one abandoned at the last screen.

The lift is real, not marginal. Shop Pay converts buyers at around 1.7x the rate of a manual card-entry checkout - that multiplier is measured against typed-in card details, the worst case, which is why it reads higher than the 18-50% general wallet lift quoted in Section 10. And simply having Apple Pay available is worth roughly a 22% conversion bump on the sessions that use it. The reason mobile conversion has been closing the gap on desktop is almost entirely wallet-driven - the slowest part of a mobile purchase got removed.

Placement matters as much as enabling it. The wallet buttons need to be prominent and one-tap on the cart and the PDP, not buried under a payment dropdown the customer only finds after committing to the long form. Put the express buttons where the eye lands first.

One-tap wallet

• Tap Shop Pay / Apple Pay -> confirm with thumb -> done. Card and address pulled from the wallet. Four taps, no typing.

Manual card entry

• Type name, card number, expiry, CVV, billing and shipping address by hand on a phone keyboard. The long flow is where mobile carts die.

Surprise Costs

The #1 driver (48%):

• Show shipping on cart. Display threshold ("$12 from free shipping!")
• Tax-inclusive where norms allow. Fold fees into price or shipping

Free-Shipping Threshold: The AOV Lever

A free-shipping threshold is one of the cheapest AOV levers you have, but only if the customer can see it everywhere. The mistake is burying it. The threshold should follow the customer around the site: a line in the header, context on the product page, and a live progress bar in the cart that updates as they add items. Make the gap visible and they will close it themselves.

The persistent version of this is the conversion lever. "You're $14 away from free shipping" sitting in the cart, counting down as items go in, nudges the incremental unit far better than a static "Free shipping over $95" banner the customer read once and forgot. Mainstream data puts the AOV lift from a well-displayed threshold at roughly 12-20%. Not a free lunch, but a real one for a copy-and-progress-bar change.

Set the threshold too high and you kill conversion - people balk and bounce. Too low and you give away shipping you would have got anyway. The rule of thumb: set it roughly 20-30% above your current AOV, so it nudges an incremental unit without feeling out of reach. Then test it. $50 versus $75 versus $100 will land differently for every brand, and the sweet spot is the one that lifts AOV without denting completion rate. Track both together, never AOV alone.

One more decision before you tune the display: which order are you optimising? The rule above plays the repeat basket-building game, and it fits brands whose orders are roughly the same size. If your first order is much bigger than your repeats - the front-loaded shape - the threshold is an acquisition lever instead: anchor it to the first order so the buy-in ships free, show it to prospects, and accept that small repeat orders fall under it. The maths and the Quad Lock version of that call are in Section 7: Supply Chain & Ops.

Worked example. Say your current AOV is $80. Set the threshold at the lower end of the range and you land around $95-96 (80 x 1.20). That asks most carts for one more small item or accessory, not a second hero product, so it pulls AOV up without scaring off the single-item buyer. If completion rate holds in the test, push toward the top of the band; if it dips, ease the threshold back down. This is also where your cross-sell engine earns its keep - the "$15 from free shipping" nudge and the "customers also bought" row work as a pair (the cross-sell engine is covered below).

Form Optimisation

• Address autocomplete, auto-fill from postcode. Billing = shipping default
• Phone optional. Drop company name
• Streamline everything possible

The Coupon Field Problem

Empty coupon fields send customers Googling - many never return. Either make sure they have a code or hide behind a link. Auto-apply and pre-fill codes when possible, e.g. BFCM.

Cross-Sell & Upsell Implementation

Cross-sells and upsells are the fastest way to increase AOV and deepen the customer relationship in a single session. Done well, they feel like a service. Done badly, they feel like a used car lot.

Upsells vs Cross-Sells: Know the Difference

Upsells upgrade the product the customer is already buying. The key: the upsell must be contextually relevant to the exact category, application, and use case. A generic "upgrade to premium" doesn't work. A specific upgrade tied to what the customer has already selected does.

Cross-sells add complementary products to the cart. The key: recommendations must be driven by purchase correlation data, not guesswork.

At Quad Lock, upsells and cross-sells were used extensively throughout the site. Upsells were specific to the category and application. Buying a motorcycle mount? The upsell was the wireless charging version, relevant to your exact build. Cross-sells appeared as a pop-up and a scrollable row at the bottom of the cart page. The products offered weren't random. They were the products with the highest add-to-cart probability based on what was already in the customer's cart. Previous purchase correlation data drove every recommendation.

Where to Place Them

The Data Engine Behind It

The magic isn't in the placement, it's in the product selection. At Quad Lock, we ran two layers of logic working together:

Layer 1: Conditional rules (deterministic). If a customer adds a specific product, there are products they definitively need next. Bought an iPhone 16 Pro Max? You need an iPhone 16 Pro Max screen protector - and since that's a wireless charging phone, want to upgrade to a wireless charging head? These rules are hard-coded: if this, then offer that. They're based on product knowledge, not data. Get these right first because they have the highest conversion rate of any offer you'll make. No app will solve this.

Layer 2: Probability-based recommendations (data-driven). Beyond the obvious next purchase, what else is this customer likely to add? This is the "customers who bought X also bought Y" engine, tuned for add-to-cart probability based on cart contents, not just historical correlation. A customer with a cycling mount in their cart has a statistically higher chance of adding a Poncho cover. The data tells you which products to surface and in what order.

Both layers need to work together. On the product page, conditional rules handled the essentials (case + screen protector compatibility). In the cart pop-up and scrollable row, probability-based recommendations surfaced the next most likely additions. The conditional logic always took priority. If there was an obvious required accessory, that showed first on the product page. Then probability-based offers followed.

How to build this:

Mobile-First Design

Nav: Hamburger, prominent search, sticky header with cart count. PDPs: Swipeable images, sticky ATC bar, accordions, 44px targets, 16px+ text. Checkout: One-page, express buttons prominent, numeric keyboards. No popups that aren't easily cleared.

Typography

Thumb zone: Actions bottom half. Test full purchase flow one-handed.

Mobile abandonment runs well above desktop, and knowing the gap tells you when mobile CRO jumps to the top of the list. Mobile carts abandon at roughly 79-85%; desktop sits closer to 67-70%. If your mobile rate is up at the top of that band, the single biggest friction remover is wallet-first checkout (Shop Pay, Apple Pay, Google Pay), covered under Express Checkout above, paired with a sticky add-to-cart bar. Those two levers together do more for mobile than any redesign.

One note on the numbers: the ~70% cart abandonment figure in the Core Metrics table later in this section is the blended all-device average - mobile runs higher, desktop lower.

And test on real devices, not a desktop browser shrunk to phone width. A throttled mid-range Android on a slow 4G connection behaves nothing like your designer's emulator on office wifi. That is the device most of your traffic is actually on.

Site Speed Essentials

Every 100ms matters.

Core Web Vitals

The Core Web Vitals targets above are pass/fail on field data - what real users actually experience - not the lab score PageSpeed Insights flashes up. They are different numbers and only one of them moves conversion. A green lab score on a fast office machine means nothing if real shoppers on real phones are seeing a 4-second load. Judge yourself on the field data: Google's CrUX report, Shopify's built-in speed report, and the "real-world" (not "lab") panel in PageSpeed Insights. Fix what your customers feel, not what your laptop reports.

INP is where the fight is now. It replaced FID in March 2024 and it is the hardest of the three to pass, because it measures how fast the page responds to every tap and click across the whole session, not just the first one. A page that loads fast but stutters when you tap "add to cart" fails INP, and that stutter is exactly where intent dies. Watch it harder than the other two.

Speed Killers

Images: WebP/AVIF, lazy-load below fold. Replace GIFs with MP4 (10x smaller).

Speed is not a vanity metric - it is a conversion lever with a known slope. The widely-cited figures put a 0.1-second improvement at roughly +8% conversion, a 1-second delay at about -7%, and 53% of mobile visitors abandoning a page that takes longer than 3 seconds. Treat those as directional, but the direction is not in dispute: faster pays.

The biggest creeping speed killer is apps. Every app you install drops JavaScript onto every page, and that weight compounds quietly until one day the site feels slow and nobody knows why. Run the audit on a cadence and measure the payload before and after.

The 3-Second Rule

Image Formats

A/B Testing Framework

Test things that move the needle.

The landscape changes constantly - Reels, TikTok, shifting attention spans - so a test that worked five years ago may not give the same result today. Always be willing to retest findings that have turned into assumptions. The product page that converted best last year might underperform this year. At Quad Lock, we used AB Tasty and found it enabled us to run more tests, more often, entirely in-house.

High-Impact Tests (Priority Order)

Start at the top.

Testing Rules

1. One variable at a time
2. 7-14 days minimum (weekday/weekend variation, never during sales or product launches)
3. High statistical significance before calling winners
4. Segment by device - desktop winners often lose on mobile
5. Document: hypothesis, variant, result, learning

Measuring Conversion Performance

Core Metrics

Directional benchmarks - vary by category and traffic source.

CRO Review Cadence

Session Recording & Heatmap Tools: Tools like Hotjar and Microsoft Clarity let you watch real user sessions and see where people click, scroll, and drop off. At Quad Lock, we used Hotjar extensively to compare user journeys that ended in a sale versus those that didn't. The patterns were often surprising. Pages we thought were strong had massive drop-off. Flows we'd never considered turned out to be high converters. This data tells you what to optimise next, rather than guessing.

Implementation Checklist