+21% Checkout Completion for a Global DTC Brand via Custom AI Sizing and Shopify Plus Optimization

Srface preview image for Case Study
Illustration of logo for Srface company

Project Context

SRFACE is a premium sustainable wetsuit brand based in the Netherlands, selling direct-to-consumer through a storefront powered by our Shopify Plus development services. The brand combines high-performance surf gear with a tech-forward mindset – and needed a development partner who could match that ambition.

The engagement covered five strategic pillars: AI-powered sizing, conversion rate optimization, international expansion, technical SEO and performance, and a full UI/UX overhaul. Each pillar addressed a specific growth bottleneck, and together they produced a measurable lift in checkout completion and global reach.

Technology Stack

  • Shopify Plus
  • Liquid
  • JavaScript
  • node.js
  • ChatGPT
  • Python
  • reviews io
  • CSS
  • html
  • Figma

Executive Summary

Client / Industry: SRFACE – premium sustainable DTC wetsuit brand (Netherlands, Shopify Plus)

Scope: AI-powered size finder integration • conversion rate optimization • international expansion via Shopify Markets • technical SEO & Core Web Vitals • UI/UX redesign

Tech Stack: Shopify Plus • Liquid • JavaScript • Node.js • OpenAI API • Python • Reviews.io • Intercom • Shopify Markets

The Challenge

SRFACE had an established Shopify store development foundation with strong brand equity – but several technical and strategic gaps were holding back the next phase of growth.

  • Fit confidence gap. Wetsuits are high-involvement purchases where incorrect sizing drives expensive returns. Without an intelligent sizing tool, customers hesitated at checkout or ordered multiple sizes and returned what didn’t fit.
  • Conversion leaks. Bugs in the checkout and product detail page flows – some triggered only after cart navigation or third-party widget interactions – were silently killing conversions. The existing promotional logic relied on third-party apps that added weight and complexity.
  • International friction. Expanding beyond the home market required multi-language, multi-currency, and region-aware UX – not just translated strings, but a structurally different buying experience per market.
  • Performance and SEO debt. Core Web Vitals scores, particularly Interaction to Next Paint, were below competitive thresholds. Sitemap and hreflang issues limited international organic visibility.
bstract visualization of global ecommerce infrastructure and international scaling on Shopify Plus.

The Solution

This Shopify AI size finder case study covers five pillars - starting with the AI integration that became the project's signature feature.

Custom OpenAI Integration for Shopify: AI Size Advice

The sizing challenge wasn’t solvable with a static chart. Different body types, wetsuit models, and personal fit preferences (tight performance fit vs. comfortable recreational fit) made the decision tree too complex for a simple table.

The solution: a “Get AI Size Advice” button on every product page, connected to a custom chat interface powered by OpenAI’s API.

  • Node.js middleware for Shopify API – Built a dedicated POST /chat endpoint that proxies requests between the Shopify storefront and OpenAI, handling conversation context via thread_id with a 24-hour TTL
  • Schema mapping – Physical measurements from the existing Size Finder are automatically passed into the AI prompt, so recommendations are grounded in real product data rather than generic guidance
  • Reliability engineering – CORS allowlists restrict access to authorized domains; expired thread recovery ensures conversations don’t break mid-session
  • Seamless UX – The AI assistant feels native to the storefront, not like a bolted-on chatbot – matching SRFACE’s brand language and visual style

Conversion Rate Optimization

With the sizing barrier addressed, the next priority was eliminating friction from the purchase flow itself.

  • Smart checkout upsells – Developed a “1-click” variant selector in the checkout, letting customers add accessories (wetsuit cleaner, repair kits) without leaving the checkout flow
  • Custom Buy X Get Y Shopify logic without apps – Built a high-performance, native promotion engine directly in Liquid and JavaScript, keeping the storefront lean while delivering flexible promotional mechanics
  • Deep bug fixes – Traced and resolved checkout failures triggered by cart navigation sequences and Intercom widget interactions – bugs that were invisible in standard QA but measurable in abandoned checkout data
  • Mobile-first PDP redesign – Restructured the product detail page for mobile (the brand’s primary traffic source), improving tap targets, image gallery behavior, and add-to-cart visibility
Native Liquid-Based Upsell Engine & Cart Optimization

International Rollout via Shopify Markets

SRFACE’s growth plan required a structured international rollout via Shopify Markets – not just enabling new currencies, but building region-aware shopping experiences from the ground up.

  • Shopify Markets configuration – Full setup for 3+ new international markets with optimized language and currency switchers that respect regional pricing rules
  • Localized communication – Updated multi-language email templates with dynamic delivery estimates, regional return policies, and custom sender signatures per market
  • B2B instance support – Technical infrastructure for the brand’s wholesale Shopify store, running in parallel with the DTC storefront
  • Customer account migration – Managed the transition to Shopify’s new Customer Account system, preserving order history and loyalty data across the migration
Mobile view of SRFACE storefront showing a French language selection popup and localized navigation menu, illustrating a Shopify Markets international rollout.

Improving INP (Interaction to Next Paint) on Shopify Plus and Technical SEO

Performance and discoverability work ran in parallel with feature development – not as an afterthought, but as a continuous workstream.

  • INP optimization – Identified and resolved interaction bottlenecks causing delayed responses to user taps and clicks, bringing Interaction to Next Paint scores into the “Good” threshold across mobile and desktop
  • Sitemap and hreflang repair – Fixed structural issues that prevented search engines from correctly associating language variants, unlocking proper international indexing
  • Structured data implementation – Added Organization and Product schema integrated with Reviews.io, enabling rich results with ratings, pricing, and availability
  • Custom FAQ system – Built a metafield-driven FAQ component with cross-site search functionality, providing both user value and FAQ schema markup for search engines

UI/UX and Storefront Enhancement

Visual and interaction design improvements touched every major surface of the storefront.

  • Navigation overhaul – Redesigned the main menu and mobile navigation for faster product discovery across an expanding catalog
  • Home page rebuild – New hero section, USP marquee, announcement bar, and slideshow – each optimized for engagement and brand storytelling
  • Color swatches – Replaced standard variant images with color swatches on collection and product pages, reducing visual clutter and speeding up variant selection
  • Responsive video containers – Fixed layout shifts caused by embedded video content on the About page and product pages
  • New templates – Created dedicated templates for Gift Cards, Recycling Labels, and specialty products (Velcro-straps) that didn’t fit the standard PDP layout

Building a DTC brand on Shopify Plus?

If your store needs AI-powered personalization, international scaling, or deep performance optimization, your project sounds like the kind of challenge that gets our team excited.

Talk to a Shopify Plus expert

SRFACE Storefront

Click to enlarge
SRFACE homepage on desktop showing hero banner and wetsuit collection
Home Page
Click to enlarge
Product Page
Click to enlarge
SRFACE collection page with filters
Collection Page
Click to enlarge
SRFACE product page with AI-powered size recommendation widget
AI Size Advice
Click to enlarge
Product Page - mobile

Technical Decision-Making

Why build a custom OpenAI integration for Shopify instead of using an off-the-shelf chatbot?

Off-the-shelf sizing chatbots operate on generic decision trees. SRFACE’s product line has model-specific fit profiles, thickness variations, and regional sizing differences that no pre-built tool could handle accurately. A custom OpenAI integration for Shopify let us feed real product schema data – measurements, materials, fit characteristics – directly into the AI prompt, producing recommendations grounded in actual inventory rather than approximations. The Node.js middleware for Shopify API also gave us full control over conversation context, rate limiting, and error recovery.

Why implement custom Buy X Get Y Shopify logic without apps?

Third-party promotion apps on Shopify Plus typically inject their own JavaScript, add API calls on page load, and introduce dependencies that are outside your control during peak traffic. For a DTC brand optimizing for speed and conversion, that overhead is unacceptable. Building custom Buy X Get Y Shopify logic without apps – directly in Liquid templates and vanilla JavaScript – kept the promotional mechanics fast, predictable, and fully within the theme’s deployment pipeline.

Why was improving INP on Shopify Plus a priority over other performance metrics?

Google’s shift from First Input Delay to Interaction to Next Paint as a Core Web Vital in March 2024 changed the competitive landscape for Shopify stores. INP measures the responsiveness of every interaction on the page – not just the first click. For a store with complex PDP interactions (size selectors, color swatches, AI chat, upsell modals), poor INP directly translates to perceived sluggishness and lost conversions. Addressing INP first had the highest impact-per-effort ratio for SRFACE’s specific traffic patterns.

Results

Conversion and Revenue

  • +21% increase in completed checkouts – measured across all markets after the combined AI sizing, CRO, and bug-fix workstreams
  • Lower return rates – significant reduction in sizing-related returns attributed to the AI Size Finder

Global Reach

  • 3+ new international markets launched within the projected timeline via Shopify Markets
  • Stable checkout performance across all regions – no region-specific conversion drops after rollout

Performance

  • INP scores in the “Good” threshold on both mobile and desktop
  • Structured data live – Organization and Product schema with Reviews.io integration producing rich results

Operational

  • Zero third-party app dependencies for core promotional logic – reduced ongoing costs and eliminated external failure points
  • Consolidated customer accounts after migration to the new Shopify system – no data loss, no support escalations
A high-performance Shopify slide-out cart featuring native '1-click' accessory upsells and automated discount logic

What We Delivered

  • Custom OpenAI integration with Node.js middleware for Shopify API – AI-powered size recommendations on every PDP
  • Conversion rate optimization: checkout upsells, native Buy X Get Y promotions, deep bug fixes
  • International expansion via Shopify Markets – 3+ markets with localized UX, emails, and pricing
  • B2B Shopify instance technical support
  • Customer account migration to the new Shopify system
  • INP and Core Web Vitals optimization for Shopify Plus
  • Technical SEO: sitemap repairs, hreflang fixes, Organization and Product structured data
  • Custom metafield-driven FAQ system with cross-site search
  • Full UI/UX overhaul: navigation, home page, PDP, mobile cart, color swatches
  • New page templates for Gift Cards, Recycling Labels, and specialty products
  • Responsive video containers and animation fixes
  • Multi-language email templates with dynamic delivery data

Related Shopify Case Studies

More Projects

Related Services

Ready to scale your Shopify Plus store?
Tell us about your store's biggest growth bottleneck - whether it's international expansion, conversion optimization, or a custom integration. A senior developer will review your project and recommend the fastest path forward.




    We use cookies to provide best web experience for our users. By continuing to browse this site, you agree to this use. Read more from our Privacy Policy.
    ACCEPT