CASE STUDY · BESPOKE TAILORING · PRESTASHOP

Live-Preview Product Configurator Built for Be-Tailor’s PrestaShop Store

Live-preview PrestaShop product configurator for Be-Tailor
Quick Summary

Quick Summary

Be-Tailor sells made-to-measure suits online, but its standard PrestaShop setup created a rigid order flow that confused customers and drove up cart abandonment. WebDesk Solution built a live-preview product customizer with real-time rule evaluation, gender-aware flow templates, proprietary multi-currency detection and an integrated PCI-compliant payment module. Results: cart abandonment down 28%, conversion rate up 18%, average order value up 15%, and international sales up 24%.


The Context

Overview

Be-Tailor bridges the gap between traditional tailoring and the modern digital fashion market by allowing customers to design made-to-measure suits online with unparalleled precision and personalization. Founded by Pascal Bolli and Mehmet Ongan, Be-Tailor focuses on high-quality, custom-made suits at accessible price points, targeting discerning clientele in Europe, North America, and beyond. As demand grew, their standard PrestaShop setup couldn’t keep pace: the rigid order flow and limited customization options led to customer confusion and high abandonment rates. They needed a sophisticated Prestashop product customizer with live preview, capable of dynamically adapting to each user’s selections while maintaining a clean, intuitive interface. Additionally, Be-Tailor required secure multi-currency support and a robust backend to manage an ever-expanding fabric catalog. Recognizing the stakes-a luxury brand’s reputation and revenue hinged on flawless digital craftsmanship-Be-Tailor engaged WebDesk Solution to architect a high-stake, technically complex overhaul that would set a new standard for online bespoke tailoring.

Technical Approach

Approach

From the outset, WebDesk Solution embraced a strategic digital transformation mindset, treating Be-Tailor’s PrestaShop store not merely as an eCommerce site but as a dynamic customization engine. We began with stakeholder workshops to map every decision point: garment styles, fabric selections, accessory add-ons, and payment pathways. Leveraging Agile sprints, our cross-functional team built a modular order flow engine in PrestaShop, enabling real-time rule evaluation (“live preview”) so that only relevant customization steps appeared as users progressed. This selective rendering dramatically reduced cognitive load and streamlined checkout.

To ensure global readiness, we developed a proprietary automatic location detection and currency conversion tool-bypassing costly third-party APIs-to display accurate local pricing in Swiss francs and U.S. dollars. For payment, we integrated a PCI-compliant gateway directly into the custom flow, eliminating intermediary fees. On the back end, we designed an intuitive fabric management module that allowed Be-Tailor’s team to categorize, tag, and update hundreds of fabric SKUs in seconds. Rigorous QA cycles and performance testing guaranteed fast load times even as complexity scaled. This holistic approach-melding live preview customization, seamless multi-currency support, secure integrated payments, and efficient backend operations-enabled Be-Tailor to deliver a premium, user-centric experience.

The Obstacles

What challenges did Be-Tailor face before building a live-preview product customizer?

Be-Tailor’s standard PrestaShop setup could not support true made-to-measure customization at scale. Seven interlocking problems stood between the brand and a checkout fast enough, clear enough, and global enough for a luxury audience.

01

Be-Tailor’s Order Flow Could Not Adapt to Each Customer’s Choices in Real Time

Be-Tailor needed an order flow engine capable of adapting in real time to every customer’s unique combination of style choices-lapel types, lining patterns, button configurations, and custom measurements-while preserving an uncluttered, intuitive interface. Off-the-shelf modules lacked the flexibility to dynamically insert or remove steps based on preceding selections, meaning customers faced irrelevant fields that created confusion and cognitive overload. Eliminating these pain points required rethinking the entire checkout architecture so it could evaluate business rules on the fly, selectively surface only pertinent inputs, and maintain high performance under peak traffic, all while safeguarding conversion rates and brand reputation in the luxury apparel space.

02

Be-Tailor’s Men’s and Women’s Configurators Risked Fracturing One Brand Identity

Men and women approach bespoke tailoring with fundamentally different configuration needs-women’s suits may include skirt options, drape adjustments, and feminine tailoring details, whereas men’s designs focus on two- or three-piece combinations and masculine silhouettes. Creating two divergent flows within the same PrestaShop instance threatened to fracture user interface consistency and increase development complexity. The risk was that customers would feel disconnected from a unified brand identity or encounter logic errors that exposed inappropriate options. Maintaining cohesive branding while delivering seamlessly customized experiences for each gender demanded a modular yet shareable codebase and rigorous UX alignment.

03

Be-Tailor’s Hundreds of Fabric and Styling Options Overwhelmed Shoppers at Every Step

With hundreds of fabric selections, lining colors, button styles, and accessory add-ons, Be-Tailor’s storefront risked overwhelming even the most style-savvy customer. Displaying every possible choice at once leads to decision paralysis, increased bounce rates, and abandoned carts. The challenge was to intelligently filter and prioritize options so that at any given step customers saw only those attributes relevant to their prior selections-rather than presenting an exhaustive list. Achieving this required a robust metadata taxonomy and client-side logic that would dynamically prune choices, reduce noise, and guide customers through a streamlined, stress-free decision journey.

04

Be-Tailor Had No Way to Show Accurate Local Pricing Without Third-Party Currency Fees

Be-Tailor serves both Swiss and U.S. markets and needed pricing that reflected local currency instantly at page load. Relying on external API-based currency converters introduced transaction fees, latency, and occasional outages-any of which would undermine customer trust and margin. The challenge was to build a proprietary solution that geo-detected visitor location, fetched exchange rates on a controlled schedule, and applied them in real time within the PrestaShop pricing engine. This system had to ensure foolproof accuracy down to the cent, handle sudden rate fluctuations, and integrate seamlessly with promotional pricing and taxes without external dependencies.

05

Be-Tailor’s Checkout Lacked a Secure, Fee-Free Way to Process Payments In-Brand

Standard payment gateways often redirect buyers offsite or apply hidden currency conversion fees, eroding both trust and profit. Be-Tailor demanded an embedded, PCI-compliant payment solution that kept users on-brand throughout checkout, tokenized sensitive data immediately, and eliminated intermediary costs. Integrating such a mechanism into a highly customized order flow-where fields appear and disappear dynamically-threatened compatibility and introduced security risks. Ensuring end-to-end encryption, meeting strict PCI DSS requirements, and implementing error-proof fallbacks for declined transactions all while preserving the seamless live-preview experience posed a significant technical and compliance challenge.

06

Be-Tailor’s Fabric Catalog Updates Were Slow, Manual, and Prone to Mismatches

Managing hundreds of fabric SKUs-each with multiple attributes like weave, color, pattern, and weight-through PrestaShop’s native catalog was slow and error-prone. Manual updates risked storefront-business logic mismatches, outdated previews, and stock inaccuracies. The challenge was to design a single admin interface that allowed bulk imports, attribute tagging, and on-the-fly grouping, yet pushed updates instantly to the live product customizer. Ensuring data integrity, preventing race-condition errors during concurrent edits, and providing rollback capability demanded a carefully architected backend module and robust audit logging to maintain confidence across operations teams.

07

Be-Tailor’s Platform Could Not Scale to New Markets Without Rising Maintenance Costs

As Be-Tailor’s offerings expanded into new markets and added fabrics, linings, and styling options, the underlying system had to scale without ballooning maintenance costs. PrestaShop’s core architecture wasn’t designed for continually evolving business rules or heavy customization, so every new option risked degrading performance or requiring code rewrites. The challenge was to separate business logic from presentation and data layers, implement a rule-driven engine that non-technical staff could configure, and ensure automated testing caught regressions. Achieving operational agility while maintaining high availability and rapid deployment cycles was critical to future growth.

Performance Metrics

Key Metrics

Cart Abandonment Reduction - Be-Tailor
28%
Cart Abandonment Reduction
Conversion Rate Lift - Be-Tailor
18%
Conversion Rate Lift
Average Order Value Increase - Be-Tailor
15%
Average Order Value Increase
International Sales Growth - Be-Tailor
24%
International Sales Growth

Similar Project?

Planning a similarly complex product customizer?

Explore Our eCommerce Development Services

The Build

WebDesk Solution’s Development Work for Be-Tailor’s Live-Preview Product Customizer

WebDesk Solution paired a real-time rule engine with gender-aware templates, metadata-driven filtering, a proprietary currency engine, an embedded payment module, a fabric management console, and a rule-driven scaling layer to answer each challenge in turn.

1

WebDesk Solution Built a Dynamic Live-Preview Order Engine

WebDesk Solution engineered a bespoke order engine within PrestaShop that seamlessly blends client-side interactivity with server-side rule evaluation to deliver a true live-preview experience. As soon as a customer selects “two-piece” or “three-piece” suit configurations, the system dynamically queues tailored customization steps-such as lapel style, pocket configuration, and button count-while instantly hiding irrelevant fields like advanced collar length when “Minimalist Collar” is chosen. This approach ensures the interface remains focused and uncluttered, reducing cognitive overload and cutting through complexity. Under the hood, incremental AJAX calls fetch only the necessary next options, maintaining high performance even under peak traffic. By continuously recalibrating the user journey in real time, we dramatically lowered abandonment rates, accelerated checkout completion times, and upheld the luxury brand’s promise of precision and elegance in every interaction.

Key deliverables:

  • Real-time rule evaluation inserts or removes customization steps the instant a shopper picks a lapel, lining, button, or measurement.
  • Incremental AJAX calls fetch only the next relevant set of options, keeping the interface uncluttered under peak traffic.
  • Continuous recalibration of the customer journey replaced the old one-size-fits-all checkout with a focused, step-by-step flow.
  • The live-preview engine was a lead driver behind the 28% drop in cart abandonment and faster checkout completion.
WebDesk Solution's live-preview order engine for Be-Tailor

2

WebDesk Solution Unified Be-Tailor’s Men’s and Women’s Flows into One Core

To address the distinct requirements of men’s and women’s bespoke tailoring, we created two parallel, yet unified, PrestaShop templates driven by a shared modular core. Each template encapsulates unique decision trees-for example, women’s flows include skirt and drape adjustments, while men’s flows focus on jacket-pant-vest sequences-yet both draw from the same underlying engine to enforce brand consistency. Utilizing feature flags and shared component libraries, developers could deploy enhancements across both experiences without duplicating code. Rigorous UX testing validated that each flow felt cohesive with the brand’s aesthetic, preventing customer confusion. This architecture minimized maintenance overhead, ensured consistent performance, and provided a scalable framework for future gender-specific expansions, preserving a single source of truth and enabling agile updates without risking cross-gender logic errors.

Key deliverables:

  • Two parallel PrestaShop templates – one for women’s flows, one for men’s – run on a single shared modular core.
  • Feature flags and a shared component library let developers ship enhancements to both flows without duplicating code.
  • UX testing validated that each flow felt cohesive with Be-Tailor’s brand identity before launch.
  • The shared-core architecture removed the risk of cross-gender logic errors and gave Be-Tailor a scalable base for future flows.
WebDesk Solution's gender-aware configurator templates for Be-Tailor

3

WebDesk Solution Built Contextual Metadata-Driven Filtering

To tame the extensive array of customization options, we designed a robust metadata taxonomy that tags every fabric, lining, button, and accessory with attributes like seasonality, formality, material weight, and color family. As customers make initial choices-selecting, for instance, a lightweight summer wool-the customizer engine applies these tags to prune downstream options, hiding winter-weight fabrics and formal satin linings automatically. Client-side JavaScript listens for selection events and queries a lightweight in-memory index to fetch only relevant subsets, slashing visible options by up to 70% per step. This context-aware filtering guides shoppers through a curated, stress-free journey that balances discovery with simplicity, significantly improving decision speed and satisfaction. The result: higher cross-sell rates, reduced bounce rates, and a more intuitive, user-centric customization experience.

Key deliverables:

  • A metadata taxonomy tags every fabric, lining, button, and accessory by seasonality, formality, weight, and color family.
  • Client-side JavaScript queries an in-memory index to prune irrelevant options as soon as a shopper makes an early choice.
  • This context-aware filtering can cut the visible option set by up to 70% at a given step.
  • Faster, less overwhelming decisions contributed to the 15% rise in average order value through better-targeted upsells.
WebDesk Solution's metadata-driven option filtering for Be-Tailor

4

WebDesk Solution Engineered a Proprietary Currency Detection and Conversion System

WebDesk Solution implemented a fully proprietary multi-currency engine to bypass third-party conversion services and associated fees. A serverless geo-location function identifies visitor region at page load, triggering an hourly cron job to fetch current exchange rates from trusted financial feeds and store them in a secure cache. When rendering product and checkout pages, the PrestaShop pricing engine applies these stored rates client-side, converting prices into Swiss francs or U.S. dollars with cent-level accuracy. This design eliminates latency spikes, avoids API rate limits, and ensures that promotional discounts and taxes are correctly applied across currencies. Customers benefit from transparent, accurate local pricing without confusing markups, while Be-Tailor retains full control over margins and avoids hidden conversion costs.

Key deliverables:

  • A serverless geo-location function identifies each visitor’s region at page load, with no third-party conversion API involved.
  • An hourly cron job pulls current exchange rates from trusted financial feeds into a secure cache.
  • The PrestaShop pricing engine applies stored rates client-side with cent-level accuracy, correctly layering in promotions and taxes.
  • Transparent local pricing in Swiss francs and U.S. dollars helped drive the 24% growth in international sales.
WebDesk Solution's proprietary currency engine for Be-Tailor

5

WebDesk Solution Embedded a PCI-Compliant Payment Module

To maintain full control over transaction fees and brand integrity, we embedded a PCI DSS-compliant payment gateway SDK directly into the custom checkout flow. Card data is tokenized in the browser using secure client-side encryption libraries, ensuring sensitive information never touches Be-Tailor’s servers. The tokenized payload is sent via secure HTTPS to the gateway for processing, all within the brand’s domain-eliminating disruptive redirects and reinforcing customer trust. Error handling workflows capture declined transactions or network issues, presenting intuitive messages and fallback retry options. This seamless integration preserves a consistent UX, safeguards revenue by avoiding third-party fees, and upholds rigorous security standards, ensuring customers complete purchases with confidence and peace of mind.

Key deliverables:

  • A PCI DSS-compliant payment gateway SDK is embedded directly in the custom checkout flow, never redirecting shoppers off-site.
  • Card data is tokenized client-side before it reaches Be-Tailor’s servers, keeping sensitive information out of the brand’s systems.
  • Error-handling workflows catch declined transactions and network issues with clear messages and retry options.
  • Keeping checkout on-brand and fee-free protected both customer trust and Be-Tailor’s margins on every transaction.

6

WebDesk Solution Delivered a Fabric Management Backend Console

We delivered a React.js-based administrative console designed for real-time catalog management and synchronization with the storefront. Fabric SKUs can be bulk imported via CSV or manually added, then tagged with multi-dimensional attributes (weave, weight, colorway, season). WebSocket connections propagate updates instantly to the live product customizer, enabling instant preview of changes. Administrators can group fabrics into custom collections-such as “Summer Linens” or “Premium Wools”-and schedule activation windows for seasonal launches. Built-in audit logging captures every edit, and one-click rollback restores prior states if needed. This streamlined backend slashed catalog update times from hours to minutes, eliminated mismatches between admin and storefront, and empowered Be-Tailor’s team to maintain a vast, ever-evolving fabric library with minimal effort.

Key deliverables:

  • A React.js admin console lets staff bulk-import or manually add fabric SKUs and tag them by weave, weight, color, and season.
  • WebSocket connections push every catalog edit to the live customizer instantly, so admin and storefront never fall out of sync.
  • Built-in audit logging and one-click rollback let the team undo a bad update instead of leaving it live.
  • The module cut catalog update time from 3 hours to under 1 hour per batch, a 60% efficiency gain.

7

WebDesk Solution Built a Rule-Driven Scalability and Maintenance Engine

To future-proof the platform against ongoing growth, we architected a rule-driven engine that decouples business logic from presentation layers. Non-technical staff can define or modify workflow rules-such as which steps appear after selecting a specific fabric or accessory-via an intuitive admin interface, without touching code. Comprehensive unit and integration tests automatically validate these rules against sample user journeys, catching regressions before deployment. Dockerized microservices handle discrete functions-currency conversion, payment processing, metadata filtering-allowing horizontal scaling based on load. Continuous deployment pipelines ensure zero-downtime releases. By externalizing configuration and automating testing, we provided Be-Tailor with an agile, maintainable system that adapts quickly to new business requirements while preserving performance and reliability.

Key deliverables:

  • A rule-driven engine separates business logic from the presentation layer, so non-technical staff can edit workflow rules without touching code.
  • Automated unit and integration tests validate every rule change against sample customer journeys before it reaches production.
  • Dockerized microservices handle currency conversion, payment processing, and metadata filtering, each scaling independently under load.
  • Continuous deployment pipelines gave Be-Tailor zero-downtime releases and a system built to absorb new business rules without rewrites.

Next Step

Need a PrestaShop product customizer built around your catalog?

Book My Customizer Strategy Call

Performance Gains

What business results followed Be-Tailor’s product customizer rebuild?

28%

Cart Abandonment ↓ 28%

The dynamic order flow and contextual filtering provided clarity, guiding customers smoothly through customization.

18%

Conversion Rate ↑ 18%

Simplified choices and live preview increased completed orders as users felt more confident.

15%

Average Order Value ↑ 15%

Intelligent upsell suggestions (e.g., premium lining options) surfaced only when relevant, boosting add-on purchases.

24%

International Sales ↑ 24%

Seamless multi-currency support unlocked U.S. and European markets with transparent pricing.

60%

Admin Efficiency ↑ 60%

The fabric management module reduced catalog update time from 3 hours to under 1 hour per batch.

Conclusion

Conclusion

Be-Tailor’s live-preview product customizer shows what a replatform can do when every layer – order flow, currency, payment, catalog, and scaling – is built around one customer journey instead of bolted on piece by piece. The project paired a 28% drop in cart abandonment and an 18% lift in conversions with a backend the Be-Tailor team can run without engineering help for every new fabric line. For a luxury brand selling customization itself, that combination of a faster checkout and an easier-to-maintain catalog is what let growth continue without growing the support burden behind it.

Project Q&A

Questions About Be-Tailor’s Product Customizer Project

How does Be-Tailor’s live-preview product customizer decide which customization steps to show a shopper?
WebDesk Solution’s rule-evaluation engine checks each selection in real time – lapel, lining, button, and measurement choices – and only renders the next step when it’s relevant to what the shopper already picked. A field like advanced collar length never appears once “Minimalist Collar” is chosen. Incremental AJAX calls fetch just the next set of options, which keeps the interface uncluttered as the configuration grows.
Why did Be-Tailor build a proprietary currency engine instead of using a third-party conversion API?
WebDesk Solution built a geo-detection and exchange-rate engine in-house to avoid the transaction fees, added latency, and outage risk that come with third-party APIs. A scheduled job pulls current rates into a secure cache, and the PrestaShop pricing engine applies them client-side with cent-level accuracy, so promotions and taxes calculate correctly in both Swiss francs and U.S. dollars.
How does Be-Tailor keep its men’s and women’s customization flows consistent with one brand experience?
Both experiences run on the same underlying PrestaShop engine and shared component library, with feature flags separating gender-specific decision trees – skirt and drape options for women’s flows, jacket-pant-vest sequences for men’s. Because updates ship from one shared core, the two flows stay visually and functionally consistent without duplicating code.
What stops Be-Tailor’s fabric catalog updates from going out of sync with the live customizer?
A React.js-based admin console pushes catalog edits to the live customizer over WebSocket connections, so a bulk import or a single SKU edit appears in the storefront within the same session. Built-in audit logging and one-click rollback give the team a way to reverse a bad update instead of leaving mismatched data live.
Is Be-Tailor’s embedded payment flow PCI compliant if customers never leave the checkout page?
Yes – card data is tokenized client-side with encryption libraries before it reaches Be-Tailor’s servers, and the tokenized payload is sent to the PCI DSS-compliant gateway over HTTPS without leaving the brand’s domain. Built-in error handling catches declined transactions or network issues and offers a retry instead of dropping the customer mid-checkout.
How many fabric and accessory combinations does Be-Tailor’s customizer narrow down per step?
The case study doesn’t publish an exact combination count. It states that the metadata-taxonomy filtering can prune the visible option set by “up to 70% per step” once a customer makes an initial choice, such as selecting a lightweight summer wool – that is the only figure given.
What happens to Be-Tailor’s customization rules when the business adds a new fabric or accessory line?
Non-technical staff can define or change workflow rules – such as which steps appear after a specific fabric or accessory is chosen – through an admin interface, without code changes. Automated unit and integration tests validate each rule change against sample customer journeys before it reaches production.
Which currencies does Be-Tailor’s real-time detection and conversion engine currently support?
The case study names two specific currencies the engine displays: Swiss francs and U.S. dollars, matching Be-Tailor’s stated base in Europe, North America, and beyond. Pricing updates automatically based on the shopper’s detected location, with exchange rates applied at cent-level accuracy rather than rounded estimates.
More Case Studies

Related PrestaShop Work

Be-Tailor live-preview product customizer, built by WebDesk Solution

Ready to Build Your Own Product Customizer?

Whether you need a PrestaShop live-preview engine, proprietary multi-currency without third-party fees, or PCI-compliant embedded checkout – the right customizer turns complex bespoke ordering into a confident, conversion-friendly journey.

USA
New York
98 Cutter Mill Rd, Ste 466, Great Neck, NY 11021
Canada
Toronto
150 King Street W, Ste 200, Toronto, ON M5H 1J9
Canada
Hours
Mon – Fri 9:00 AM – 6:00 PM