Hi, I faced the same issue when fetching product details in the Theme Extension app. I was able to resolve it by making the necessary changes listed below. You can refer to this and let me know if it works for you.
First, we need to enable the Storefront API in the Shopify Partner account. To do this, log in to the Shopify Partner account, select the app, and go to the Configuration section. Under the Storefront API section, you’ll notice that the Enable Storefront API button is disabled. To activate it, choose a distribution method by selecting Custom distribution, then add your store domain and generate the install link. After that, you’ll be able to enable the Storefront API.
Next, add the required scopes to your shopify.app.toml file:
scopes = “write_products, read_products, unauthenticated_read_product_tags, unauthenticated_read_customers, unauthenticated_read_product_listings”
Then, run the following command to deploy the scopes to your Partner account:
shopify app deploy
After running the deploy command, go to your Partner Dashboard, select the app, and navigate to the API access section. There, you will see that the added scopes are now listed.
Now, update your shopify.extension.toml file for the theme extension to include the same scopes:
[access_scopes]
unauthenticated_read_product_listings = true
unauthenticated_read_product_tags = true
unauthenticated_read_customers = true
write_products = true
read_products = true
Run the deploy command again:
shopify app deploy
From Liquid, you can call the following API to fetch the first 3 product details:
import { json } from “@remix-run/node”;
import { authenticate, unauthenticated } from “../shopify.server”;
import { cors } from ‘remix-utils/cors’;
export async function loader({ request }) {
const { storefront } = await unauthenticated.storefront(
‘egitsstore.myshopify.com’
);
const response = await storefront.graphql(query products { products(first: 3) { edges { node { id title } } } });
const data = await response.json();
return json(
{ data },
{ headers: { “Access-Control-Allow-Origin”: “*” } }
);
}
Finally, reinstall the app. The updated scopes and Storefront API access will only take effect after reinstalling the app.