How do I obtain a Storefront Access Token for my Shopify Remix App?

Shopify Apps

Topic summary

A developer encountered an “unauthorized” error while trying to fetch product details via GraphQL in a Shopify Remix app integrated with a theme extension.

Solution Found:

  • Used unauthenticated.storefront(shop) method to obtain storefront access
  • This approach successfully retrieves product details from the Storefront API without authentication errors

Implementation Details:

  • The working code uses a GraphQL query to fetch product and variant data by IDs
  • Query retrieves: variant details (title, price, image, selected options), product information (handle, tags, online store URL)
  • Filters results to return only ProductVariant nodes
  • Uses CORS handling for the response

Status: Issue resolved - the developer successfully implemented product variant retrieval from Shopify’s Storefront API.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I’m currently working on a Shopify theme extension using Liquid and integrating it with my Remix app. I am trying to fetch product details via GraphQL using an array of product IDs, but I keep encountering an “unauthorized” error.

Could someone please explain the correct process to obtain and use a App Access Token in this context? Any guidance on configuring the access token for a Remix app integrated with a theme extension would be highly appreciated.

2

To fix the issue, I used:

const { storefront } = await unauthenticated.storefront(shop);

This allows me to fetch product details from the Storefront API. Here’s the full code:

import { json } from “@remix-run/node”;
import { unauthenticated } from “../shopify.server”;
import { cors } from “remix-utils/cors”;

export async function loader({ request }) {
const { storefront } = await unauthenticated.storefront(shop);

const response = await storefront.graphql(
query ($ids: [ID!]!) { nodes(ids: $ids) { __typename ... on ProductVariant { id title price { amount currencyCode } image { url } selectedOptions { name value } product { id title handle onlineStoreUrl tags } } ... on Product { id title handle onlineStoreUrl priceRange { minVariantPrice { amount currencyCode } } featuredImage { url } } } },
{ variables: { ids } }
);

const data = await response.json();
const result = data.data.nodes.filter((node) => node.__typename === “ProductVariant”);

return cors(request, json({ result }));
}

This resolved my issue with retrieving product variant details from Shopify’s Storefront API.