Project Overview

Therabody is a globally recognised health and wellness brand best known for its Theragun percussive therapy devices. As a Senior Developer, I contributed to maintaining and enhancing their Shopify storefront — one of the highest-traffic stores in the wellness category. The focus was on delivering a premium, performant, and accessible shopping experience that matched the brand's world-class reputation.

Key Responsibilities

Theme Development & Customisation

• Custom Sections & Blocks: Built reusable, merchant-configurable sections and blocks using Online Store 2.0 architecture, allowing the marketing team to update content without developer involvement.
• Metafields & Metaobjects: Implemented dynamic product detail displays — including device specifications, comparison tables, and compatibility charts — driven entirely by structured Metafield and Metaobject data.
• AJAX Product Filtering: Enhanced collection pages with real-time AJAX-based filtering, allowing customers to sort by device type, intensity level, and price range without full page reloads.
• Custom Predictive Search: Developed an enhanced predictive search experience surfacing product recommendations, blog articles, and category suggestions in a visually rich dropdown.

Performance Optimisation

• Core Web Vitals: Audited and improved FCP, LCP, and CLS scores using Lighthouse and PageSpeed Insights, targeting 90+ scores across all key pages.
• Lazy Loading & Resource Hints: Applied Intersection Observer for on-demand image and section loading, along with preconnect, prefetch, and preload hints to reduce Time to First Byte.
• Script Management: Implemented custom script deferral and isolation strategies to prevent third-party app scripts from blocking render — critical for a store with multiple installed Shopify apps.
• Section Rendering API: Utilised the Section Rendering API to load non-critical sections on demand, keeping initial page payloads lean.

Cross-Browser & Mobile Responsiveness

• Ensured pixel-perfect, mobile-first layouts across all device sizes and browsers.
• Translated Figma and Photoshop designs into production-ready Liquid templates with zero layout shifts.

Results

• Maintained 90+ Lighthouse performance scores across product and collection pages.
• Reduced render-blocking resources, improving Time to Interactive for mobile users.
• Enabled marketing team self-service through flexible, configurable section schema — reducing developer dependencies for campaign updates.