Unbeaten Shopify Store — Case Study: From Slow WooCommerce to a High-Energy DTC Storefront

Unbeaten is an Indian performance sportswear and fitness apparel brand built for the active lifestyle market — compression tights, training tees, sports bras, and recovery gear for customers who train hard and shop on their phones. When Unbeaten came to Prateeksha Web Design, their WooCommerce store was haemorrhaging conversions: a 6.2-second mobile LCP, no size guide UX, and a checkout flow that shoppers abandoned at a rate that made every ad campaign unprofitable.

This is the story of how Prateeksha rebuilt Unbeaten on Shopify with a fully custom high-energy theme, slashed load times, introduced a size guide component built for apparel, and integrated Klaviyo to recover abandoned carts — resulting in a 31% lift in mobile checkout completion and 12% of abandoned carts recovered within 24 hours.

About Unbeaten — Performance Sportswear for the Indian Active Lifestyle Market

Unbeaten is a direct-to-consumer sportswear brand targeting fitness enthusiasts, gym-goers, and active lifestyle consumers across India. The brand's product line spans compression wear, training apparel, and recovery essentials — positioned between mass-market athleisure and premium international labels like Nike and Under Armour.

Unbeaten's audience skews strongly mobile. Over 78% of their sessions came from smartphones, primarily on mid-range Android devices with 4G connections. The brand's Instagram-driven acquisition model meant shoppers arrived expecting a fast, visual experience — and the legacy WooCommerce store consistently failed to deliver it.

Key brand characteristics that shaped the design brief:

• Bold visual identity. High-contrast colours, action photography, and energy-forward typography aligned with performance sport aesthetics.
• Size-critical product category. Compression and performance apparel requires accurate sizing. Incorrect size purchases drove returns and eroded customer trust.
• Repeat-purchase category. Training apparel is consumable. Recovering lapsed customers and building loyalty flows directly impacts lifetime value.
• Mobile-first acquisition. Paid social and influencer traffic lands on mobile. Any friction in the mobile purchase journey translates directly into lost revenue.

The Challenge: A WooCommerce Store That Could Not Keep Up

Unbeaten's WooCommerce store had been built incrementally over 18 months — layers of plugins, a premium theme not designed for performance apparel, and a checkout flow that had never been properly optimised for mobile. By the time Unbeaten engaged Prateeksha, the site had four distinct problems compounding each other.

Problem 1 — Critical Mobile Performance

Google PageSpeed Insights recorded a Largest Contentful Paint (LCP) of 6.2 seconds on mobile. Google's Core Web Vitals threshold for a good LCP is 2.5 seconds. A 6.2-second LCP means most mobile users experienced the page as blank for over six seconds before the primary content appeared. Baymard Institute research confirms that 53% of mobile site visits are abandoned if a page takes longer than 3 seconds to load — Unbeaten was well past that threshold on every product page.

The causes were identifiable: unoptimised product images served in JPEG at original upload sizes, a bloated WooCommerce plugin stack (23 active plugins), render-blocking JavaScript from the theme, and no CDN for asset delivery.

Problem 2 — No Size Guide UX

Unbeaten's product pages had a static size chart image buried in the product description — a JPG uploaded once and never updated. It wasn't accessible on mobile without zooming, didn't show measurement-to-size conversion, and wasn't present on every product. The result: customers guessed their size, bought wrong, and returned. Return rates for compression wear and fitted training gear were running above 18%, with size mismatch as the primary stated reason.

Problem 3 — High Mobile Checkout Abandonment

The WooCommerce checkout was a multi-page flow with six form fields on the first screen, no address autocomplete, and a payment step that required the customer to leave the checkout page to authenticate with their UPI or card provider. On desktop this was tolerable. On a 5-inch Android screen it was a conversion killer. Checkout abandonment on mobile was running at 71% — against a typical e-commerce benchmark of 55–65%.

Problem 4 — No Post-Abandonment Recovery System

Unbeaten had no email marketing automation in place. Abandoned carts went uncontacted. There were no post-purchase flows, no win-back sequences, and no size-specific education content sent to customers before their order arrived. Every customer who left the checkout without buying was simply lost — no recovery attempt, no second chance.

What Prateeksha Built: A High-Energy Shopify Store for Active Shoppers

Prateeksha's engagement with Unbeaten covered five workstreams: platform migration, custom theme development, size guide architecture, mobile checkout optimisation, and Klaviyo integration. The full project ran over 10 weeks from discovery to launch.

1. WooCommerce to Shopify Migration

Prateeksha executed a full WooCommerce to Shopify migration covering the complete product catalogue (340 SKUs across 28 collections), historical customer data, and order history. All existing product URLs were mapped to 301 redirects in Shopify to preserve SEO equity. No traffic was lost at launch — Google Search Console showed no significant drop in indexed URLs or rankings in the 30-day post-launch window.

The migration also included a full app audit. Unbeaten's WooCommerce stack of 23 plugins was replaced with 6 purpose-built Shopify apps, eliminating the plugin overhead that was a primary contributor to slow load times.

2. Custom High-Energy Shopify Theme

The existing WooCommerce theme had been designed for a general fashion retailer — it didn't reflect Unbeaten's bold, performance-sport visual identity. Prateeksha designed and built a custom Shopify theme from scratch in Shopify's Liquid templating language, informed by Unbeaten's brand guidelines and competitive benchmarking against international sportswear DTC brands.

Design decisions that distinguished the theme:

• Full-width action imagery. Product pages open with edge-to-edge photography showing the product in motion, not just on a white background.
• High-contrast typography. Bold sans-serif headings with strong weight contrast reinforce the performance positioning and pass WCAG AA contrast ratios.
• Above-fold ATC. The Add to Cart button and size selector appear above the fold on every device size — no scrolling required to initiate a purchase.
• Collection filtering optimised for apparel. Colour, size, and fit filters built as sticky side panels on desktop and swipeable bottom sheets on mobile — not dropdown menus.
• Sticky cart sidebar. A persistent mini-cart slideout on desktop lets customers review their bag without leaving the product page, reducing navigation interruption.

3. Size Guide Component Architecture

Prateeksha built a custom size guide component embedded directly in the product page — accessible via a single tap from the size selector, without navigating away from the purchase flow. The component included:

• Measurement-to-size tables for each product category (compression, training, sports bras) with cm and inch toggles.
• How-to-measure illustrations showing where to take chest, waist, hip, and inseam measurements — critical for compression fit accuracy.
• Fit guide copy explaining whether each product runs true to size, slim, or relaxed — reducing "I wasn't sure so I guessed" returns.
• Metafield-driven content — each product variant's size table is stored in a Shopify metafield and rendered dynamically, so Unbeaten's team can update sizing data without touching theme code.

4. Fast-Load Product Images via Next-Gen Formats

Every product image in the new Shopify store is served through Shopify's native CDN in WebP format with responsive srcset attributes. Image dimensions are constrained by the theme's grid system so Shopify never loads a 4000px image into a 400px container. Lazy loading is applied to all below-fold images, and the hero product image uses fetchPriority="high" to signal the browser to load it first.

Product photography was re-exported at optimised source dimensions (maximum 2048px width) before upload, preventing Shopify from serving unnecessarily large originals. The combined effect reduced product page image payload from an average of 4.2MB per page view to 680KB.

5. Streamlined Mobile Checkout

Shopify's native one-page checkout was configured and extended for Unbeaten's mobile audience. Specific optimisations included:

• Address autocomplete powered by Shopify's built-in Google Places integration — eliminating manual address entry on mobile keyboards.
• UPI and popular Indian payment methods surfaced prominently at the payment step via Razorpay integration, reducing the payment method search step.
• Trust signals at checkout — free exchange badge, 30-day return policy summary, and a compact size confirmation displaying the chosen size before payment.
• Guest checkout as default path — account creation moved to the post-purchase confirmation page as an opt-in, not a gate before payment.

6. Klaviyo Integration for Abandoned Cart Recovery

Prateeksha integrated Klaviyo with the Shopify store and built three foundational flows from scratch: an abandoned cart sequence, a post-purchase welcome and size care guide flow, and a win-back sequence for customers inactive for 90 days.

The abandoned cart flow was structured as a three-email sequence:

1. 1 hour post-abandonment — product reminder with the cart image, no discount. Subject line personalised with the product name.
2. 6 hours post-abandonment — size guide content block included for any apparel SKU in the cart, addressing the most common abandonment hesitation.
3. 24 hours post-abandonment — 10% discount offer with a hard expiry, creating urgency without conditioning customers to always wait for a discount.

All Klaviyo event data was connected to Shopify via the native Klaviyo app. Custom properties were pushed for the size chosen by the customer at abandonment, enabling the size guide content block to reference the specific size the customer had selected.

Key Technical Decisions

Several architectural decisions during the project deserve specific explanation for teams evaluating a similar build.

Shopify Native Checkout Over Headless

Prateeksha evaluated headless Shopify options early in the discovery phase. For Unbeaten's scale (mid-size DTC, ~340 SKUs, no B2B requirements), the complexity and cost of a headless build was not justified. Shopify's native checkout, combined with Checkout Extensibility's UI extensions, delivered the required mobile optimisations without the infrastructure overhead of a headless storefront.

The decision reduced build time by an estimated 4 weeks and ongoing hosting costs by eliminating a separate frontend server. Headless becomes the right answer at higher traffic volumes, complex B2B requirements, or when the storefront needs to serve multiple channels from one backend — none of which applied to Unbeaten at launch.

Metafield-Driven Size Guide Content

Size guide content was stored in Shopify product metafields rather than hardcoded into theme templates. This gave Unbeaten's content team full control over size tables without developer involvement. Product-level metafields were mapped to a dedicated metafield namespace (unbeaten.sizing) with separate fields for size tables, measurement instructions, and fit notes per product category. A custom Shopify admin section was built in the theme's settings to allow in-browser metafield editing for non-technical users.

Image Optimisation Pipeline Before Upload

Rather than relying solely on Shopify's CDN transformations, Prateeksha ran all product photography through an optimisation pipeline before upload — stripping EXIF data, converting to WebP at source, and capping dimensions at 2048px. This prevents Shopify from ever storing or serving an oversized original, reducing storage costs and ensuring CDN edge caching serves the smallest valid version for every viewport.

Klaviyo Property Segmentation from Day One

The Klaviyo integration was built with post-launch segmentation in mind, not just immediate flows. Custom event properties passed from Shopify to Klaviyo at checkout included: product category, fit type, size ordered, and whether the customer had interacted with the size guide modal. This data structure allows Unbeaten to build size-specific re-engagement campaigns and reduce return-driven repeat purchases as the brand scales.

Results at a Glance

The results below are measured over the first 60 days post-launch compared to the equivalent 60-day period on WooCommerce immediately before migration. All metrics are drawn from Google Analytics 4, Shopify Analytics, and Klaviyo reporting.

The LCP improvement from 6.2s to 1.2s placed every product page in Google's "Good" Core Web Vitals band for the first time. The 31% lift in mobile checkout completion is the most commercially significant metric — it means roughly 3 additional completed purchases for every 10 customers who previously reached the checkout and left. At Unbeaten's average order value, that translates to a material increase in monthly revenue from existing traffic, without any increase in ad spend.

The Klaviyo abandoned cart recovery of 12% within 24 hours — on a flow that did not exist before the engagement — represents incremental revenue from customers already in the purchase funnel. The three-email sequence recovered approximately one in eight abandoned carts, with the size guide email in the second touch performing above average for opens and click-throughs, confirming that sizing uncertainty was a real abandonment driver.

The return rate reduction from 18% to 11% is an early signal, not a definitive result — 60 days is a short window for returns data in apparel. But the direction is consistent with the hypothesis that accessible size guide content at the point of size selection reduces misjudged purchases.

Frequently Asked Questions