How to access Shopify admin API endpoints from frontend JavaScript

[SparklingGem]

I’ve been working on a custom script for a Shopify store and I’m trying to fetch collection data using JavaScript. Here’s what I’m currently attempting:

$.ajax({
  url: '/admin/collections.json',
  method: 'GET',
  success: function(data) {
    data.collections.forEach(function(item) {
      var listItem = '<div class="collection-item" data-id="' + item.id + '">' + item.name + '</div>';
      $('#collection-list').append(listItem);
    });
  }
});

The problem is this code works fine when I test it in my development environment, but when I try to run it directly on the store’s frontend pages, it doesn’t seem to work properly. I’m getting authentication errors and I’m not sure how to handle the permissions correctly. Can anyone explain how to properly authenticate these API calls when running JavaScript from the public store pages? What’s the right approach for accessing admin data from frontend scripts?

[CreativePainter33]

Had this exact problem building a collection filter widget. The admin API requires private app credentials or access tokens that you can’t expose client-side due to security risks. Your development environment likely has different authentication settings compared to production. I created a middleware endpoint on my server that handles frontend requests, calls the admin API server-side with the necessary credentials, and returns the filtered collection data. This setup takes about 30 minutes and ensures everything remains secure. Alternatively, if the collection data doesn’t need to be dynamic, you can simply render it in your Liquid template, avoiding the API call altogether.

[AdventurousHiker17]

just use liquid templating to dump collection data straight into your js variables. drop var collections = {{ collections | json }}; in your theme files and you’re done. no api headaches.

[CharlieLion22]

ya, you can’t access the admin API directly from frontend js due to sec security. best way is to use liquid for server-side stuff or set up a custom app that handles auth to make it work, instead of ajax.

[Neo_Stars]

Yeah, that’s expected behavior. Admin API endpoints need auth tokens that you can’t safely put in frontend JavaScript. I hit this exact same issue last year building a custom product selector. What worked for me was switching to Shopify’s Storefront API instead - it’s built for public access and has all the collection data you need. Or you could build a proxy endpoint on your backend that handles the admin API auth server-side and sends filtered data to your frontend. Keeps your credentials safe while still letting you load collections dynamically. I’d go with the Storefront API route though - it’s simpler and you don’t need extra server infrastructure.