My client has specific requirements. His supplier has an API. He wants to fetch data from that real time API, and display them in a certain page. And when someone clicks on add to cart button, then it needs to create a new product using that product data in the Shopify store and create an order with that added product. I want to know how to achieve this.
I was going to create the front-end with React and build the code to Javascript and add to a theme app extension. Then build a node server and host it in heroku or netlify and connect that server with supplier API. If someone wants to add a displayed product to their cart, it make a POST request to NodeJS server and NodeJS server uses Shopify Admin API to create new product and the an order with that product.
How to achieve this? I have already coded the React front-end for filtering and displaying.
Simply create a theme app extension (can be an app block or embedded block) and fetch. It’s simply making a fetch request from the storefront. Remember that if you need to access your app’s API from the extension you need to setup the proxy route and verify the HMAC headers though.
I created the theme app extension with React and it’s working now (under testing). That React app (theme app extension) is for display data and filter the data. It’s a filter system. It has 2 functions.
- Fetch the data from my Remix App and display them as products and when user selects parameters to filter data, It collects those filter values and generate a query to make another request to my Remix app and fetch the filtered data and display those.
- There’s a add to cart button for each products. When user add the product to cart, theme app extension needs send another request to my Remix app to create the product in Shopiify using Admin API and create order and add that product to that order.
I Forgot about the Remix App. It communicate with supplier API to fetch data and with Admin API to create the products and orders when needed.
Sounds like you’ve got a solid architecture going with the Remix app as middleware between the supplier API and Shopify. One thing I’d flag since this is now 2026, make sure you’re using the GraphQL Admin API for product creation instead of REST since the REST Product and Variant endpoints were deprecated. The productSet mutation is what you want for creating products with variants in a single call, and orderCreate for the order side (https://shopify.dev/docs/api/admin-graphql/current/mutations/productSet). Also worth thinking about rate limits early, if multiple users are adding products to cart around the same time your Remix app will be firing concurrent Admin API calls and Shopify’s GraphQL bucket (1,000 cost points per minute) can fill up quick during traffic spikes.
For the supplier data fetching, one thing to consider is whether you really need to call the supplier API on every page load or if you could cache the product catalog on your side and refresh it on a schedule. Real time fetch works for small catalogs but if there are hundreds or thousands of products the latency will hurt your storefront performance and you’ll be dependent on the supplier’s API uptime for your store to function.
If the supplier data lives in a database or another system you can connect to, thats actually a pattern we handle at Stacksync where you sync external product data into Shopify automatically in real time with two way sync. It removes the need to build and maintain that middleware layer yourself, handles the rate limits and error retries natively, and keeps your Shopify catalog updated without relying on page load triggers.
Good luck with the build!