Public App or Theme App Extension or Hydrogen or?

Partner Discussions
1

I’m confused over how to move forward. I wrote a custom app (Remix) for a merchant and installed it in their store - all good. It is exposed in their Admin UI.

Next, I would like to create a new app based on the custom app (rewrite to make it “public” if that’s the correct term) that any merchant can get from the Shopify App Store.

This app would have a portion that runs in the Admin environment for the merchant to use for various things like, for example, settings.

Also, this app would have a portion that is visible to a customer of the merchant (someone going to their Shopify site). The customer would use a UI to provide information that would be used to create an order in Shopify to be fulfilled by the merchant (the behavior of this portion would be influenced by the settings updated by the merchant in the admin interface). This would be a full React app hosted on AWS.

So…is this 1 app or 2 apps? As a dev, would this be one project that includes all the above functionality or completely separate code bases?

I’m struggling to visualize how this would be structured and the docs cause more confusion…maybe I haven’t found the correct section but what I read makes me think there are several choices that are in the area of what I want to do (which seems like it would be common) but not clear exactly what to do?

Thanks for any clarity and direction.

2

I think this would be one app that uses both Theme App extensions and your existing Admin UI extensions. Would that model work for you?

1 Like
3

Thanks, Liam.

I am trying this but have concerns about the size limitations as my app extension will be large.

So far, I’ve created a theme app extension which creates an iframe in the theme and this looks OK so far. I am still trying to work out the authentication (how to validate signature and get access to customer ID…as well as being able to update the cart for the session).

QQ - is iframe used as I described approved by Shopify and would it pass an app review?

4

If your theme app extension is loading an iframe, I’m thinking it would be rejected - iframes are permitted within the context of the UI that merchants interact with but I don’t believe you can use iframes in a theme app extension.

Can you share the general usecase of this app? If it replaces most of a page or has requirements beyond what’s possible with the intentional limitations of theme app extensions, it could qualify to get an exemption to use the Asset API The Asset API resource (legacy)

5

See attached image

Screenshot 2025-02-05 at 12.11.44 PM
Screenshot 2025-02-05 at 12.11.44 PM1920×1369 98 KB

from my dev store.

The section with the doggie is from my theme app extension and it displays in the store. The iframe is added to my liquid block in the theme app extension.


{%- assign the_url = "src=https://my-customer-facing-part-endpoint.com?myparm=xyz&dynpoparm3=" -%}

{{ the_url | append: "some_path"}}


the_url {{ the_url }}

<iframe
  {{ the_url }}
  style="width: 100%; height: 100%; border: none;"
  allow="clipboard-read; clipboard-write"
></iframe>

{% schema %}
{...etc.

So…this looks good but I’d like to know if I’m on the right path before I go much further.

6

Have confirmed with the Shopify app review team that this would be flagged for potential rejection. You can add images within the /assets directory though, see this example app: theme-extension-getting-started/assets at main · Shopify/theme-extension-getting-started · GitHub

Would this work instead?

7

Thanks for checking - sorry to hear my solution won’t pass.

I’ll take a look at the assets folder but I believe my app will be too large to fit within the guidelines.

I have seen apps that have similar profiles as mine - makes me wonder how they do it. I checked one out today being used by a friend and I can see it’s running in an iframe in the storefront - maybe they have a legacy exception?

In any event - back to the drawing board.

8

What do you mean by ‘too large’? Are you referring to the JavaScript bundle size or the liquid file size? I’d be happy to suggest some workarounds to optimise loading large JavaScript files on the storefront.

9

JS bundle size is my concern. I’m using React Router for the code I want to run in the storefront as part of the greater app (admin + APT + storefront).

Thanks for sharing your ideas to optimise loading large JavaScript files.

10

I commented on similar issue a couple of days ago - https://community.shopify.dev/t/want-to-create-a-app-that-contains-multiple-functionality-like-a-full-reactjs-app-into-shopify-storefront-through-theme-app-extension/4492/5?u=gulam_hussain_quinn