I’m trying to access Shopify’s REST API directly from my Liquid template files but running into some issues. When I attempt to make API calls from the frontend, I get CORS errors because the storefront domain is different from the API endpoint domain. This results in 401 authentication errors even though I’m already on the store’s website.
Is there a way to make these API requests without dealing with cross-origin restrictions? I need to fetch some custom data that isn’t available through the standard Liquid objects. What’s the best approach to handle authentication when calling Shopify APIs from within Liquid templates?
yeah, CORS is such a pain! but you can totally use shopify’s app proxy feature. just create a route like /apps/yourapp/data to forward your requests to the backend. it’s way simpler than trying to deal with auth tokens directly in liquid.
liquid is server-side, so u can’t directly call apis from it. u’ll need to use js or a backend to manage those requests. consider using fetch() to get the data once the page is loaded. hope this helps!
The problem is that Liquid templates render server-side before hitting the browser, so you can’t make direct REST API calls from Liquid. I’ve had good luck setting up a backend endpoint that bridges your Liquid templates and the Shopify API. This endpoint handles authentication with your private app credentials and skips CORS issues since it’s server-to-server. You can use JavaScript to call your backend endpoint from the frontend, or even better - pre-fetch the data during template rendering and pass it to your Liquid variables. Another option is Shopify’s Storefront API with GraphQL, which is built for frontend access and handles CORS way better than the REST Admin API.
You’re correct that CORS is a limitation, and Liquid operates server-side, which complicates direct API calls. One effective strategy is to create a custom app with a proxy route that handles the API requests server-side. This approach eliminates CORS issues since the calls are made on Shopify’s servers. Alternatively, you could leverage Shopify’s Ajax API for storefront interactions, as it is designed to work without CORS complications. For authentication, use private app credentials or Admin API tokens and ensure your API keys are not exposed in frontend code. I’ve implemented middleware that processes these API requests during the rendering of templates, though this requires additional backend setup.
I ran into this exact problem with custom metafields that weren’t showing up in standard Liquid objects. The issue is that Liquid runs server-side when templates compile, but REST API calls need to happen at runtime. Here’s what worked for me: I built a custom section using JavaScript to hit a middleware endpoint I created. The middleware runs on your store’s domain, so no CORS headaches. I keep the access token server-side and validate requests with session data. The trick is doing this in two steps - render the template with placeholders first, then use JavaScript to pull in the API data and fill everything in. Your page loads fast since it’s not waiting on API calls, and you’re not exposing credentials in the frontend.