How to communicate remix app with theme app extensions?

Retired Boards Appdev Extensions

Topic summary

Goal: Pass data from a Remix admin app to a Theme App Extension (app block) so it can render on storefront pages (e.g., product page).

Proposed approach (untested):

  • Store values in shop Metafields via the Admin API (e.g., JSON of exchange rates). Then read them in the extension’s Liquid using shop.metafields and expose to JavaScript.
  • A sample POST to create the metafield and a Liquid assignment snippet were provided. Code snippets are central to the discussion.

Concerns and alternatives:

  • Metafield type limitations may restrict customization needs.
  • Alternatives mentioned but not detailed: App Proxy (storefront JS calls app backend through a Shopify-proxied endpoint) and bundling React code with Webpack/Vite for the extension.

Context/terms:

  • Metafields: custom data fields attached to store resources, accessible in Liquid.
  • App Proxy: route that lets the storefront securely fetch dynamic data from the app.

Status:

  • No confirmed best-practice or working implementation shared yet. Another participant asked if a solution was found. Discussion remains open with key question unresolved: definitive method to sync dynamic app state to a theme app extension.
Summarized with AI on January 10. AI used: gpt-5.
1

Hello, I am new to Shopify development.

I am looking for a way to have my remix app communicate with my theme app extensions? I have both created, but for example if my app has the merchant input some text into a text field within the app in the admin, how do I make it so that text is sent over to the theme app extension so that it can be shown within the theme in a product page for example?

I am aware of how the communication is between the assets and css files and the liquid files within the theme app extension, but have no idea how to have the remix react code useStates and variables be sent over to the extension.

Thanks in advance!

2 Likes
2

Hi @hacun3jr
I’m also new to Shopify app development, and now I’m doing some smaller apps just get the grasp. Currently I try to make currency converter as a theme app extension, and also had that question, how to get the exchange rates to the App Block or how can the app block Javascript make an API call to my app to get the exchange rates.
After all the research I asked ChatGPT :slightly_smiling_face: here it is what it proposed. It looks reasonable but I still haven’t get to that part, so it’s not tested.

----- ChatGPT response —

To make the exchange rates available in Liquid templates, store them as Metafields associated with the shop. You can use the Shopify API to set Metafields for the shop. Each Metafield might represent a currency and its exchange rate.

Here’s an example using the Shopify API (this is just a simplified example; you’ll need to adapt it to your specific needs):

POST /admin/api/2021-10/metafields.json
{
  "metafield": {
    "namespace": "currency_converter",
    "key": "exchange_rates",
    "value": "{ \"USD\": 1.0, \"EUR\": 0.85, \"GBP\": 0.75 }",
    "value_type": "string"
  }
}

In your Liquid template that includes your App Block extension, you can use the metafield object to fetch the exchange rates and make them available to your Javascript:

{% assign exchangeRates = shop.metafields.currency_converter.exchange_rates | json %}

Now, you can use the exchangeRates variable in your JavaScript to perform currency conversion as described in a previous response.

I hope that this helps. And I also keep an eye on this thread in case someone else proposes a better solution.

3

Thank you for the response!

I saw the metafields but I’m not sure if i will be able to customize the store as much as I’d like too with the limited metafield types? I have seen others use app proxy and some people talk about just bundling the react code into webpack or using vite, i havent tried those., but I wish there was a definitive way Shopify would have all of use use that is easy this way we don’t have too much trial and error

4

bro did you find the answer ? i’m also failed to find the exact way to send data from the remix app to the theme app extension