In June 2025, Pandectes GDPR Compliance became officially BFS-certified by Shopify, marking the successful completion of a 3.5-month review process involving four rounds of detailed feedback and iteration.
The real transformation began months earlier, when we made the decision to completely rewrite our application architecture in order to meet Shopify’s stringent performance benchmarks, a prerequisite for even entering the BFS review.
Why We Rewrote the App
Architectural Debt and Scaling Challenges
When Shopify introduced the Built for Shopify (BFS) program, it wasn’t just a checklist of requirements; it was a clear signal of where embedded apps needed to go: faster, more accessible, more stable, and more tightly integrated with Shopify’s ecosystem.
For us, it was the perfect time to take a step back and evaluate our architecture, performance, and user experience from the ground up. Rather than applying incremental fixes or superficial optimizations, we chose to completely reimagine the core of our application to meet not just today’s standards, but those of the future.
This rewrite benefits businesses and companies using Shopify by providing a more robust and scalable solution that supports their growth and operational needs.
Architectural Bottlenecks and Growing Pains
The old architecture had served us well for years, but maintaining two separate codebases, one for the React SPA and one for the Express API, created increasing complexity and friction. Performance bottlenecks began to surface as the app expanded in features and scale, and the gap between frontend and backend logic resulted in duplication, slower delivery, and reduced maintainability.
The BFS push gave us the strategic reason (and motivation) to align our product experience with Shopify’s expectations, and to do so with a singular, focused rewrite using Remix. For brands operating on Shopify, maintaining brand consistency and trust is crucial, and this rewrite supports brands by enabling a seamless, reliable experience that reinforces their brand identity across their site.
With Shopify enforcing stricter quality standards through the Built for Shopify (BFS) program, we saw the opportunity to rethink our foundation. As part of this process, we adopted best practices in both development and compliance to ensure our solution meets the highest standards.
The new architecture ensures the app is store ready for rapid deployment and delivers a seamless site experience for all users.
Key Drivers for the Rewrite
One of the most pressing motivations behind the rewrite was the need to eliminate performance bottlenecks that had accumulated over time. Our app had grown significantly in complexity, and as more merchants onboarded and interacted with the interface, inefficiencies in data fetching, client-side rendering, and layout stability began to impact both usability and Shopify’s Core Web Vitals.
The BFS initiative brought a heightened focus on performance standards, particularly around metrics such as LCP and CLS, making it clear that incremental fixes wouldn’t suffice. We needed a new, server-rendered foundation that could deliver fast, stable, and accessible experiences out of the box. Additionally, the previous architecture led to increased operational costs, making it harder to manage expenses as the platform scaled.
From Fragmented Architecture to Unified Foundation
At the same time, maintaining two separate layers, frontend (React) and backend (Express), had introduced operational and architectural friction. From routing and state syncing to deployment and testing, the developer experience has become unnecessarily fragmented. By adopting a unified framework, we could streamline workflows, reduce technical debt, and create a future-ready platform.
This move would not only enable us to build faster and deploy more reliably, but also align us with Shopify’s evolving expectations for embedded apps, while ensuring our codebase can scale with new features and merchants for years to come. The new architecture also enables additional functionalities for merchants, such as improved support tools and enhanced data management capabilities.
We transitioned from a separate React and Express architecture to a unified Remix-based application, modernizing both the data flow and content rendering.
From React SPA & Express to Remix
Frontend Challenges with React SPA
Our legacy frontend was built as a traditional React Single Page Application (SPA), relying on react-router for client-side routing. While this approach allowed for dynamic navigation without full-page reloads, it also came with drawbacks.
The old architecture relied on various tools to manage frontend and backend integration, which added complexity. Key metrics, such as LCP and CLS, suffered because large bundles had to load before rendering meaningful content. Additionally, as the application scaled, we found ourselves juggling more edge cases related to loading states, routing mismatches, and hydration timing, especially problematic in embedded Shopify contexts.
Backend Complexity in Express
On the backend, we managed a separate Express.js REST API. This meant creating, documenting, and maintaining dozens of endpoints that handled both internal logic and merchant-facing operations. While it provided control, it also introduced overhead.
Handling requests was complex and error-prone, especially when dealing with customer data and compliance requirements. Deployment pipelines had to coordinate two separate services, authentication had to be handled in parallel, and debugging cross-layer issues became increasingly complex, especially when replicating app behavior in embedded environments.
Handling Data Across Layers
Our data layer relied heavily on useEffect hooks and manual fetch calls to communicate between the frontend and backend. State had to be manually synced and managed across contexts, with logic duplicated in both React components and backend controllers.
The lack of standardized templates made UI consistency challenging. This not only bloated our client bundle but also created inconsistencies in error handling, caching, and loading UX. Over time, it became clear that this pattern wasn’t scalable or sustainable, especially under the scrutiny of Shopify’s BFS review criteria. Event tracking also suffered, complicating debugging and analytics.
How Remix Transformed Our Architecture and Data Layer
The shift to Remix wasn’t just a framework swap; it was a structural rethinking of how our application works, communicates, and performs. One of the most impactful changes was the consolidation of architecture.
By unifying the frontend and backend into a single Remix application, we eliminated the overhead of managing two separate projects. This simplified routing, shared logic, and made everything from local development to production deployment significantly more reliable and streamlined. This consolidation is also enabling faster feature development and more agile responses to merchant needs.
Server-Driven Data Fetching with Loaders and Actions
Instead of maintaining a separate set of REST API endpoints, Remix provided us with file-based routing, paired with server-side loaders and actions. Loaders now handle data fetching for each route at the server level, while actions cleanly manage form submissions and mutations.
This architectural model eliminated the need for most of our useEffect hooks and custom fetch logic, thereby reducing our reliance on client-side JavaScript and enhancing both load speed and user experience. Integrations are now more seamless, with improved support for other services within the Shopify ecosystem, such as checkout processes and pixels.
Improved Rendering, Performance, and GDPR Support
With Remix’s server-driven rendering and automatic revalidation, the app now feels consistently fast and interactive. Pages are rendered on the server with fresh data, and client-side interactions are progressively enhanced without blocking UI or requiring spinners.
We also saw improvements in cacheability, reduced bundle sizes, and less duplicated logic across components. By eliminating client-server sync complexity, we made the app easier to reason about, especially under embedded conditions within the Shopify admin. As a Shopify app, our solution is fully compatible with Shopify website requirements, ensuring smooth integration and compliance.
Finally, the move away from React SPA-style forms to Remix-native < Form> components gave us cleaner control over input state, validation, and submission behavior. Combined with server-bound logic in actions, this provided more predictable error handling and reduced unnecessary frontend state management.
This shift contributed significantly to improving metrics like First Input Delay (FID) and Interaction to Next Paint (INP). The new architecture also supports GDPR compliance for merchants by enabling better data handling, privacy controls, and integration with third-party solutions like Pandectes GDPR Compliance.
Each of these improvements contributed not only to technical clarity and performance but also to our confidence in meeting Shopify’s demanding BFS criteria.
Benefits of the Rewrite
Performance Improvements
One of the most immediate wins from the rewrite was faster initial load times, made possible by Remix’s built-in support for server-side rendering (SSR). Unlike client-rendered SPAs that rely on hydration to display meaningful content, Remix routes load on the server with complete data, meaning the HTML returned is already populated and ready to be rendered.
This directly impacts Largest Contentful Paint (LCP) and allows users to start interacting with the interface faster, particularly important in the Shopify admin, where merchants expect snappy, responsive experiences. Faster performance also leads to a smoother checkout experience for both merchants and customers.
Another significant improvement was a reduction in JavaScript bundle size. With Remix, much of the logic that previously resided in the browser, such as API calls, state synchronization, and conditional rendering, was moved server-side.
As a result, fewer dependencies are bundled into client code, which means smaller files and less JavaScript to parse, download, and execute. This had a significant impact not only on loading performance but also on mobile responsiveness, where bandwidth and device constraints are more critical. These improvements help merchants make more money by reducing cart abandonment.
Enhancing Core Web Vitals
Core Web Vitals also improved across the board. Beyond LCP, we observed a measurable decrease in Cumulative Layout Shift (CLS) resulting from server-stable content and enhanced layout structuring. And with less JavaScript on the critical path, Interaction to Next Paint (INP) improved as well, ensuring that the interface remained smooth and responsive even under heavier admin operations.
These improvements weren’t incidental, they were required to meet Shopify’s BFS thresholds and contributed directly to our app’s approval. Collection pages now load more efficiently, further enhancing the browsing experience for customers.
Progressive Enhancement by Design
Finally, Remix’s philosophy of progressive enhancement meant that we could build rich features without sacrificing baseline usability. Pages render correctly with or without JavaScript, fallbacks degrade gracefully, and interactive components are layered on top without blocking the user experience.
Developer Experience
One of the most appreciated changes after the rewrite was moving to a single codebase that houses both frontend and backend logic. Previously, our team had to coordinate development across two separate projects, React for the interface and Express for the API. This introduced duplication, disconnected data models, and friction in day-to-day collaboration.
Unified Codebase and Simplified Workflows
With Remix, everything now lives under one roof: routing, data fetching, form handling, and rendering logic are all co-located by route. This has streamlined development workflows and significantly reduced the cognitive load for new team members onboarding into the project.
Improved Debugging and Error Boundaries
Another major gain was easier debugging and error handling, thanks to Remix’s powerful error boundaries. Remix allows us to define specific boundaries for each route, making it easier to isolate and recover from failures without breaking the entire application.
Whether the issue originates on the client or the server, Remix provides detailed stack traces and localized error displays. This drastically improved our ability to handle edge cases gracefully, especially in embedded contexts where silent failures or vague error messages previously led to frustration and slow resolution.
CI/CD and Deployment Simplification
The rewrite also enabled simplified deployments and CI/CD integration. With only one service to build and deploy, we reduced the number of infrastructure steps, build artifacts, and coordination overhead. Our CI pipelines became leaner, and we were able to move to atomic deployments, pushing a single application artifact that includes both frontend and backend logic. This has helped us maintain higher release velocity and ship improvements more confidently, with fewer regressions.
Finally, by adopting Remix end-to-end, we were able to enforce consistent TypeScript usage across the entire application. Previously, our frontend and backend maintained separate typings, and data contracts often had to be manually mirrored. Now, route modules share types seamlessly between loaders, actions, and components. This reduces bugs, improves auto-completion and refactoring, and has made our development experience both safer and faster.
Shopify-Specific Gains
Improved App Bridge Integration
One of the immediate benefits of migrating to Remix was better compatibility with Shopify’s App Bridge. In our previous setup, managing App Bridge integration required carefully orchestrating scripts and hydration timing between the client-rendered SPA and the Shopify admin environment.
This often led to race conditions, delayed rendering, or broken redirects, especially during authentication or navigation flows. With Remix’s server-first rendering model, we’re now able to integrate App Bridge earlier in the lifecycle and pass data from Shopify into our routes more cleanly and reliably.
Enhanced Performance in the Shopify Admin
The app also became noticeably more responsive inside the embedded Shopify admin. Previously, the client-side rendering approach meant merchants had to wait for JavaScript to load before interacting with the interface. With server-side rendering in Remix, initial content loads much faster, and interactions, like form submissions, page transitions, and content updates, feel snappier. This was crucial for meeting BFS guidelines, which place a strong emphasis on perceived speed and smoothness in embedded contexts.
Scalability and Smart Caching for Shopify Merchants
Lastly, the move to a unified Remix app gave us more flexibility in caching and scaling. With a single server handling both data and rendering logic, we gained tighter control over how responses are cached and when they are revalidated. This is especially valuable when serving Shopify merchants at scale, as it allows us to optimize performance across regions and user types. By centralizing our logic, we also reduced API latency and simplified horizontal scaling strategies for future growth.
Meeting Shopify’s Performance Metrics
Shopify tracks app quality using four key metrics on the Admin Performance Dashboard:
- LCP (Largest Contentful Paint) – measures load speed
- FID (First Input Delay) – measures responsiveness
- CLS (Cumulative Layout Shift) – measures visual stability
- INP (Interaction to Next Paint) – measures interactivity
When we started, two out of four metrics were flagged as Needs Improvement:
Metric | Before Rewrite | After Rewrite | % Improvement |
|---|---|---|---|
LCP | 2.68s ⚠️ | 1.14s ✅ | ~57% faster |
FID | 5.3ms ✅ | 3.7ms ✅ | ~30% faster |
CLS | 0.47 ⚠️ | 0.01 ✅ | ~98% reduction |
INP | 184ms ✅ | 48ms ✅ | ~74% improvement |
These improvements helped us meet Shopify’s thresholds for “Good” performance across all four metrics, a mandatory requirement for BFS certification.
After the rewrite, our LCP dropped from 2.68s to 1.14s, a 57% improvement. This means that the largest visible element, often a chart or key admin module, now appears faster and more reliably for users.
We achieved this by server-rendering critical content, deferring non-essential JavaScript, and reducing layout blocking assets. This improvement was key in pushing us from a Needs Improvement status into Shopify’s Good threshold for BFS eligibility.
Our CLS dropped dramatically from 0.47 to 0.01, which means users no longer experience sudden shifts in layout while content is loading. We fixed this by stabilizing the dimensions of interactive components, avoiding dynamic content injection during render, and reducing font and image reflows. This improvement was particularly critical in achieving accessibility and usability standards required for BFS.
INP dropped from 184ms to 48ms, a major win for interactive responsiveness. INP measures how quickly the app responds to a user’s action and completes rendering the result. The move to Remix helped offload business logic to the server, reduced input delay, and eliminated slow client-side re-renders. The result was faster clicks, smoother transitions, and a better experience for merchants navigating high-traffic admin features.
These improvements were achieved by:
- Lazy-loading all images and optimizing LCP-critical content.
- Refactoring layout containers to eliminate shifts (CLS).
- Breaking complex UI components into performant micro-interactions.
Collaboration with Shopify on Performance Optimization
One of the earliest wins in our rewrite journey came through a direct collaboration with Mateusz Krzeszowiak, Technical Architect – Performance at Shopify. While we were still in the foundational stages of rebuilding the app for performance and BFS readiness, Mateusz noticed a specific opportunity to improve the Interaction to Next Paint (INP) metric when merchants closed the cookie consent banner.
The result was striking: closing the consent popup became almost 40% faster, and the 75th percentile INP dropped below Shopify’s 200ms performance threshold. This may seem like a small detail, but when scaled across thousands of storefronts, the impact on user experience is substantial. What’s more, this success set the tone for how we approached the rest of the rewrite: identifying high-impact moments, optimizing them server-side, and validating every improvement against Shopify’s Core Web Vitals and BFS expectations.
This early collaboration helped us recognize that BFS isn’t just about passing static checklists, it’s about raising the bar for performance across the Shopify ecosystem. And this win, made possible by an open and fast feedback loop, became one of the most meaningful milestones in our journey to full certification.
Discover the Impact on Merchants and Customers
Whether you run a small Shopify store or a global multi-region brand, the changes we implemented unlock faster load times, smoother customer journeys, and increased compliance with data protection regulations. You save time and money with a faster, more compliant store experience.
This isn’t just about speed, it’s about the long-term efficiency, trust, and success of your store. Our compliance engine now integrates better with services like Google Ads, enabling smarter promotions and real-time customer data handling. With Pandectes, managing customer preferences and requests is streamlined, helping merchants handle sensitive information with confidence.
Supporting Ecommerce Across Regions
Pandectes is now better suited for stores operating in multiple regions, offering enhanced localization and performance. From optimized product descriptions to embedded video support, the app scales effortlessly while remaining compliant with GDPR and other data protection regulations.
Shopify merchants can discover faster ways to deliver value, manage access, and reduce layout shifts that typically hinder performance on collection pages.
Additionally, clothing and lifestyle businesses benefit from layout stability and simplified integration with marketing tools like Google Ads and Analytics.
4 Rounds of Review: What We Learned
After our initial rewrite, we submitted our app to the Shopify team and entered the BFS Review process. Here’s how it played out:
First Review: 16 items flagged – mostly related to layout, performance, and BFS-specific structural requirements.
Second Review: 16 new issues plus one remaining from the first round, many related to UI behaviors and onboarding flow.
Third Review: 4 new and 2 existing issues, followed by a final 1-item correction due to a broken link.
Final Submission: All issues resolved, leading to certification approval in early June.
Each round pushed us to refine our UX, onboarding logic, and admin-side visuals. Among the key changes:
- A two-column banner designer with live preview.
- Simplified and segmented onboarding.
- Accessibility improvements across modals and forms.
- Removal of full-width editing views and theme asset writes.
- More meaningful warning placements inside integration areas.
The Result: BFS-Certified & Future-Ready
With our certification approved, Pandectes now delivers a fully BFS-compliant experience. This milestone marks our more profound commitment to performance, trust, and ongoing improvement.
Here’s what this means for our users:
- Faster, more responsive admin experience.
- Fully accessible and mobile-friendly UI.
- Future-ready foundation for compliance innovation.
Achieving BFS compliance is a significant step forward for Pandectes, ensuring our users benefit from enhanced performance and a secure, future-proof platform. We remain dedicated to continuous improvement and innovation.
