Optimizing App Embed Status Fetching on Runtime

Shopify App Store
1

Hi,

My goal is to achieve the BFS badge, but metrics like LCP and CLS are still not in the expected range defined by Shopify.

In my app, I need to display the app embed status after Shopify review. I also render different components on the homepage based on whether the app embed is enabled or disabled. Currently, I’m fetching the app embed status on the server side in all requests for the index page, which is increasing TTFB and negatively impacting LCP. And also, it needs to be checked in all requests for the index page.

At the moment, my approach is:

  1. Fetch the theme ID using a GraphQL request

  2. Using the theme ID, retrieve settings_data.json

  3. From settings_data.json, extract the app embed status (enabled/disabled)

I also checked and couldn’t find any webhook that provides app embed status updates.

My question is:

  • Is there a more optimized way to store or retrieve the theme ID or app embed status that I can persist in my database to avoid repeated server-side fetching?

Am I missing any approach or is there any gap in my current understanding?

Looking forward to your guidance. Thanks in advance.

2

Please do not tag myself or Shopify staff members that have not already engaged in a post. This is outlined in the code of conduct.

3

I got your point, @Luke :slight_smile:

4

For people facing the same issue, I’d like to share my approach. There may be better ways to solve this, so feel free to comment and share alternative solutions.

I solved it by integrating a Shopify Theme App Extension that retrieves the data client-side and displays it accordingly. Here’s a sample implementation:

import { shopify } from '@shopify/app-bridge';

// Fetch the status of your app's extensions
shopify.app.extensions().then((extensions) => {
    // Filter for theme extensions or specific embeds
    const themeEmbed = extensions.find(
        ext =>
            ext.type === 'THEME_APP_EXTENSION' ||
            ext.handle === 'YOUR_EMBED_HANDLE'
    );

    if (themeEmbed && themeEmbed.status === 'active') {
        console.log("Your theme embed is live and enabled!");
    } else {
        console.log("Setup needed: The embed is not yet activated.");
    }
});

Theme App Extension docs: https://shopify.dev/docs/apps/build/online-store/theme-app-extensions