Need help with theme app extension architecture

Shopify Apps
,

Topic summary

A developer is building a Shopify app for product pages that uses camera access to capture shopper images, analyze body measurements, and recommend apparel sizes. They’re deciding between two architectural approaches:

Liquid (Theme App Extension) approach:

  • Easier access to product metafields containing sizing data from admin
  • Gives store owners more control
  • Faces CSS styling conflicts due to Shopify theme overrides
  • Developer less comfortable with vanilla HTML/CSS/JS (prefers React)

iFrame approach:

  • Requires external hosting and separate data management
  • Provides better UI control and styling isolation
  • More stringent Shopify approval process
  • Better suited for complex interactive features

Resolution reached: The developer decided to proceed with the Liquid approach for their MVP after discovering:

  • Metafields can be passed to JavaScript via HTML data-attributes
  • CSS specificity adjustments can resolve styling conflicts
  • Camera access and TensorFlow pose estimation work within theme app extensions (using CDN bypasses 10MB file size limits)
  • The app doesn’t require highly dynamic UI, making Liquid’s limitations manageable
Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hi, am new to shopify development and had a few questions to ask

Im making an app that will be embedded in the product page which will access the camera that takes an image of the shopper and return their body measurements, then recommend the appropriate apparel sizing

Im confused on what is the most appropriate approach; coding the entire app within liquid (vanilla html,css,js) or code my app out elsewhere and embed it within an iframe

Have been looking at other shopify apps and most of them uses iframe approach, but i did see apps that does not (okendo)

My thinking is that if code it with liquid, i can easily get the product metafields that will contain the sizing data from the admin (have the admin coded out in polaris to input sizing data of each products that will save the size data in the metafields), while approaching it with iframe means i have to host all the data within my own servers, i wish to make the process as simplified as possible and give more control to the store owners hence am leaning towards liquid approach

But coding in liquid is quite painful as the app looks very different, when i code things out in my local html server and then migrate it to my shopify extension liquid code theres some styling that gets affected and I think it is due to shopify overwritting the styles and im worried there this could be a big issue down the road where I cannot control the look of the app (also my skill is quite lacking in html css js as im used to coding in react and using ui frameworks)

Additionally I am not sure if i am right but when publishing the app on shopify, iframe approach would be much more stringent compared to using the liquid approach recommended by shopify docs.

Could any developer give me some advice on what I should do, or if there is anything wrong with my way of thinking do please correct me.

2
  1. Liquid vs. iFrame Approach: If you want deep integration with Shopify’s native features (like accessing metafields easily), Liquid is a logical choice. However, Liquid is primarily for templating and has limitations for complex interactive features like camera access. iFrames, while requiring external hosting, offer more flexibility and control over your app’s UI and functionality.
  2. Styling Issues in Liquid: Shopify’s CSS can override your styles, making it harder to maintain consistency. You could scope your styles using unique class names or inline styles, but an iFrame would ensure your design remains intact across all themes.
  3. Publishing Considerations: Shopify’s app approval process is more stringent for iFrame apps because they interact externally, but if your app requires advanced functionality like accessing a webcam, iFrames (or an App Proxy) might be the better choice.
  4. Recommendation: If your app requires camera access and a polished UI, the iFrame approach is better despite the added hosting complexity. You can still use Shopify’s Admin API for metafields while keeping the front-end smooth and controlled. If you prefer the Liquid approach, you may hit more styling and interactivity limitations
3

Hey Alena!

Thanks for the detailed answer,

1.)For this app, im mainly using html and am testing if I can pass metafields from liquid to my js file by embedding the metafields data within a html element data-attribute (seems quite hacky but logically seems like it will work)
2.)regarding css styling issues, I also saw from one of the forum that increasing css specificity would resolve the overriding issues, so gonna try that
3.)for camera access, im actually able to get it working within the theme app extension framework and using tensorflow cdn for pose estimation to bypasses the 10mb file size limit

4.)I think with these thoughts overall, ill continue developing out a mvp using the liquid approach since I dont really require much dynamic ui and I should be able to get around all my previous issues with your suggestions.