+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 blends high-performance surf gear with a tech-savvy approach. It needed a development partner who could keep up with that goal.

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 tackled a specific growth issue. Together, they increased checkout completion and expanded global reach.

Technology Stack

  • Shopify Plus
  • Liquid
  • JavaScript
  • node.js
  • ChatGPT
  • Python
  • HTML
  • 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 solid Shopify store development foundation and strong brand value. However, some technical and strategic gaps were slowing their next growth phase.

  • Fit confidence gap. Wetsuits are high-involvement purchases where incorrect sizing drives expensive returns. Customers hesitated at checkout without a smart sizing tool. They often ordered multiple sizes and returned what didn’t fit.
  • Conversion leaks. Bugs in the checkout and product detail pages were silently hurting conversions. Some issues popped up only after navigating the cart or using third-party widgets. The existing promotional logic relied on third-party apps that added weight and complexity.
  • International friction. To expand beyond the home market, we needed a UX that supports multiple languages and currencies. It wasn’t just about translation; each market required a unique buying experience.
  • 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 highlights five key pillars. It begins with the AI integration, which is the project's standout feature.

Custom OpenAI Integration for Shopify: AI Size Advice

The sizing challenge wasn’t solvable with a static chart. Different body types and wetsuit models add to the complexity. Fit preferences, like tight performance and comfy recreational, also play a role. This made the decision tree too complicated 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 – Created a POST /chat endpoint. It proxies requests between the Shopify storefront and OpenAI. It manages conversation context using thread_id, which has a 24-hour TTL.
  • Schema mapping – The AI prompt automatically receives physical measurements from the Size Finder. This way, recommendations are based on actual product data, not just general advice.
  • Reliability engineering – CORS allowlists limit access to approved domains. Expired thread recovery keeps conversations from breaking during a session.
  • Seamless UX – The AI assistant feels like a natural part of the storefront. It matches SRFACE’s brand language and visual style, not just a bolted-on chatbot.

Conversion Rate Optimization

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

  • Smart checkout upsells – We created a “1-click” option in checkout. This lets customers add accessories like wetsuit cleaner and repair kits easily, without leaving the checkout flow.
  • Custom Buy X Get Y Shopify logic without apps – We built a fast, native promotion engine using Liquid and JavaScript. This keeps the storefront light and offers flexible promotional options.
  • Deep bug fixes – We traced and fixed checkout failures. These issues were caused by cart navigation and Intercom widget interactions. They weren’t seen in standard QA but showed up in abandoned checkout data.
  • Mobile-first PDP redesign – Updated the product detail page for mobile, the brand’s main traffic source. Improved tap targets, enhanced image gallery behavior, and made add-to-cart visibility better.
Native Liquid-Based Upsell Engine & Cart Optimization

International Rollout via Shopify Markets

SRFACE’s growth plan needed a clear international rollout using Shopify Markets. This meant more than just adding new currencies. It required creating shopping experiences that are aware of different regions from the start.

  • Shopify Markets setup – Complete configuration for 3+ new international markets. It includes optimized language and currency switchers that follow regional pricing rules.
  • Localized communication – Updated multi-language email templates with dynamic delivery estimates. Return policies are specific to each region; each market has custom sender signatures.
  • B2B instance support – This includes the technical setup for the brand’s wholesale Shopify store. It runs alongside the DTC storefront.
  • Customer account migration – Handled the switch to Shopify’s new Customer Account system. This kept order history and loyalty data safe during the move.
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 side by side with feature development. This wasn’t an afterthought; it was an ongoing priority.

  • INP optimization – Found and fixed interaction bottlenecks that delayed user taps and clicks. Improved Interaction to Next Paint scores to the “Good” range for both mobile and desktop.
  • Sitemap and hreflang repair – We fixed structural issues. This helped search engines link language variants correctly. Now, international indexing works properly.
  • Structured data implementation – Added Organization and Product schema and integrated with Reviews.io. Enabled rich results showing ratings, pricing, and availability.
  • Custom FAQ system – Created a metafield-driven FAQ component with search functionality. This enhances user value and includes 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 – We redesigned the main menu and mobile navigation. This change helps users find products faster in our growing catalog.
  • Home page rebuild – New hero section, USP marquee, announcement bar, and slideshow – each optimized for engagement and brand storytelling
  • Color swatches – We replaced standard variant images with color swatches on collection and product pages. This change cuts down on visual clutter and makes it faster to choose variants.
  • Responsive video containers – Fixed layout shifts caused by embedded video content on the About page and product pages
  • New templates – We made special templates for Gift Cards, Recycling Labels, and Velcro-straps. These didn’t fit the usual PDP layout.

Building a DTC brand on Shopify Plus?

Need AI personalization, global scaling, or high-end performance? We love a technical challenge. Let’s talk about your project.

SRFACE Storefront

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 products have fit profiles for each model, thickness variations, and regional sizing differences. No pre-built tool can handle these accurately. A custom OpenAI integration for Shopify lets us input real product schema data. This includes measurements, materials, and fit characteristics. By doing this, we can generate recommendations based on actual inventory instead of just estimates. 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 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.