Want to create a App that contains Multiple Functionality like a full reactjs app, into shopify storefront through theme app extension

Extensions
1

Overview of My App Concept

I am building a React-based application that integrates AI APIs and Shopify features. The app provides the following functionality:

  1. Face Scanning and Avatar Customization:
  • Users grant camera access to scan their face.
  • Captured face data is sent to an AI API that generates avatars and applies wig styles (color, style, etc.) selected by the user.
  1. Product Selection from Shopify:
  • Users can view products (wigs) from my Shopify store.
  • After customization, users can add the selected wig to the Shopify cart.
  1. Chatbot Integration:
  • An AI chatbot recommends wigs to users based on their preferences.

The app has multiple pages, routing, data passing, API integrations, and real-time components that need to work seamlessly.

My Main Concern

I initially planned to inject this React-based application into the Shopify storefront using a Theme App Extension, but I foresee significant challenges:

  1. Shopify Theme App Extensions Are Limited in Scope:
  • Shopify Theme App Extensions are designed to inject small, modular components (e.g., product reviews, ratings, or banners) into the storefront, not full-scale applications.
  1. Routing and State Management Issues:
  • React applications typically rely on client-side routing (e.g., React Router), which conflicts with Shopify’s Liquid templating and server-side routing structure.
  1. Performance Constraints:
  • Shopify enforces strict limits on JavaScript asset size to ensure storefront performance. A large React app with dependencies (e.g., AI chatbot, API integrations) might exceed these limits.
  1. Real-Time AI Features:
  • My app requires real-time camera access, face scanning, and chatbot interactions, which are complex to implement within Shopify’s storefront environment.
  1. Maintainability Concerns:
  • Injecting a complex application directly into Shopify themes can make updates and scalability difficult.

Question to the Community

Is it feasible to inject a large-scale React application with multiple pages, routing, AI API integrations, and real-time features (like face scanning and chatbots) into the Shopify storefront using Theme App Extensions?

  • If not, what are the limitations of Theme App Extensions that prevent this use case?
  • Is there an alternative or best practice for achieving this functionality while maintaining Shopify’s performance and architectural guidelines?
1 Like
2

I recommend utilizing the Storefront API to customize the website as it offers numerous features that are not natively supported by Shopify.

3

Did you ever solve this? I’m looking to do similar with same concerns you expressed - thanks.

4

Nope, we dropped the idea of doing this due to a lack of proper information and guidance on this topic in the documentation and on the web.

5

Yes, you can load a full React app using a Shopify Theme App Extension, there’s no restriction on what JavaScript you can include. The 10KB limit is just a recommendation, not an enforced rule.

CleanShot 2025-02-03 at 13.45.12
CleanShot 2025-02-03 at 13.45.12922×573 46.8 KB

That said, performance is the real challenge, not Shopify’s limitations. Since your app includes AI, face scanning, and real-time interactions, you’ll need to be smart about how you load your scripts to avoid slowing down the store.

Instead of one large JavaScript file, break your app into smaller chunks, for example

  • A core script that initializes your app
  • A separate script for the AI chatbot
  • A script for face scanning
  • A script for Shopify product selection

And then load scripts smartly:

  • Only load the face-scanning module when a user initiates that process.
  • Load the AI chatbot script only when the user interacts with it