Theme App Embed Activation

Extensions
1

I want merchants to activate the theme app embed easily.

I tried redirecting them to activate it, then checking settings_data.json when they return it works but it’s a poor UX
I also tried a popover window to prompt activation, which works too, but I rely on them closing the window to trigger the check.

Both solutions work, but each has tradeoffs. I’m wondering if there’s a cleaner way to handle this without these issues. Any ideas?

1 Like
2

I’ve completed the implementation, and it works 100% on my side.

  1. Add permission to read theme: scopes = “write_products,read_themes”.

  2. Then make a request to get the configuration of theme, you will see the data response contains all the apps embed enable or not(the themeId can get from graphQL)

export const action: ActionFunction = async ({request}) => {
  const body = await request.json()

  try {
    const {session} = await authenticate.admin(request);

    if (!session.accessToken) {
      throw new Error("Missing access token");
    }

    const response = await fetch(
      `https://${session.shop}/admin/api/2025-07/themes/${body.themeId}/assets.json?asset[key]=config/settings_data.json`,
      {
        method: "GET",
        headers: {
          "X-Shopify-Access-Token": session.accessToken as string, // ✅ force to string
          "Content-Type": "application/json",
        },
      }
    );
    if (!response.ok) {
      throw new Error(
        `Failed to fetch settings_data.json: ${response.status} ${response.statusText}`
      );
    }

    const result = await response.json();

    const settingsData = result.asset?.value
      ? JSON.parse(result.asset.value)
      : {};
    return json({settingsData});
  } catch (error) {
    return json({error: "Failed to load shop data"}, {status: 500});
  }
};