How to Enable and Disable Shopify Theme App Blocks with GraphQL in Remix?

Shopify Remix provides a great in-depth way to manage Shopify’s Admin API using GraphQL. One of the possible scenarios for when you may want to particularly consider a more dynamic approach is with theme app blocks. In this tutorial we will walk through enabling or disabling a specific app block within a Shopify theme using GraphQL in a Remix app.

Understanding the Use Case

A lot of Shopify apps will add custom blocks to a theme in order to change functionality within the storefront. The ability to programmatically enable and disable blocks provides added value to merchants that are looking for more control over the customizations to their stores.

In this case, we are using the  app, and we will be using GraphQL to do the following:

• Retrieve the active theme ID
• Retrieve the theme settings_data.json file
• Parse the JSON data to determine if the app block is enabled
• Provide a UI to enable or disable the app block

Steps to Enable and Disable Shopify Theme App Blocks with GraphQL in Remix

Step 1: Querying the Active Theme with GraphQL

First, we will need to know what the currently active theme is – we will accomplish this with a GraphQL query to fetch the theme corresponding to the MAIN role:

export async function loader({ request }) {
  const { session, admin } = await authenticate.admin(request);

  const Themeresponse = await admin.graphql(
    `#graphql
    query {
      themes(first: 1, roles: MAIN) {
        edges {
          node {
            name
            id
            role
          }
        }
      }
    }`
  );

  const Themedata = await Themeresponse.json();
  const mainTheme = Themedata?.data?.themes?.edges[0]?.node?.id;

  if (!mainTheme) {
    console.error("Main theme not found!");
    return json({ appStatus: false });
  }

This query returns back the active theme’s id, which is necessary to update the theme settings and to enable/disable app blocks.

Step 2: Retrieving and Parsing Theme Settings

Once we have identified the active theme, we can retrieve the settings_data.json file via GraphQL. This file contains theme configuration details, including whether the app block is enabled or disabled. By fetching and parsing this JSON data, we can determine the app block’s current status:

  const fileName = ["config/settings_data.json"];
  const ThemeFiles = await admin.graphql(
    `#graphql
    query {
      theme(id: "${mainTheme}") {
        files(filenames: ${JSON.stringify(fileName)}, first: 1) {
          nodes {
            body {
              ... on OnlineStoreThemeFileBodyText {
                content
              }
            }
          }
        }
      }
    }`
  );

  const ThemeFilesData = await ThemeFiles.json();
  const settingsContent = ThemeFilesData.data?.theme?.files?.nodes[0]?.body?.content || "{}";

Step 3: Checking App Block Status

After retrieving the settings_data.json file, we will parse the JSON data to see if the app block is enabled. The first thing we need to do is remove any comments to ensure that the JSON is valid – then we can inspect the blocks object and look for our specific app block type. If the block exists and is not disabled, we can treat it as active.

function removeCommentsFromJSON(jsonString) {
    return jsonString.replace(/\/*.*?\*\//gs, '');
  }

  try {
    const cleanedContent = removeCommentsFromJSON(settingsContent);
    const jsonContent = JSON.parse(cleanedContent);
    const currentBlocks = Object.values(jsonContent.current?.blocks || {});

    const type = "shopify://apps/{app_name}/blocks/{app_block_name}/{theme_id}";
    var appStatus = currentBlocks.some(block => block.type === type && !block.disabled);
  } catch (error) {
    console.error("Error parsing JSON:", error);
  }

Step 4: Displaying the Enable/Disable UI in Remix

Using the appStatus value, we create a UI that allows users to toggle the app block on or off. The UI includes a status indicator (Active or Disabled) and a button linking to Shopify’s theme editor. Clicking the button directs users to the editor where they can enable or disable the app block within their theme settings.

function Index() {
  const { appStatus } = useLoaderData();

  var SHOPIFY_RFQ_THEME_ID = `4742c678-81ea-4005-8778-bb73acas1ff7`;
  var shop = `https://${sessionshop.shop}`;
  var handlebody = `test`;
  const url = `${shop}/admin/themes/current/editor?context=apps&template=template&activateAppId=${SHOPIFY_RFQ_THEME_ID}/${handlebody}`;

  return (
    <Page title="Manage App Block">
      <Card>
        <InlineStack align="space-between">
          <Text variant="headingMd">App Status</Text>
          <ButtonGroup>
            {appStatus ? (
              <Badge tone="success">Active</Badge>
            ) : (
              <Badge tone="attention">Disabled</Badge>
            )}
            <Button variant="primary" url={url} target="_blank">
              {appStatus ? "Disable" : "Enable"}
            </Button>
          </ButtonGroup>
        </InlineStack>
      </Card>
    </Page>
  );
}

Conclusion

Through the use of GraphQL and Remix, we can easily manipulate Shopify theme app blocks to enable merchants to turn on and off app features simply. This results in a smoother user experience and encourages theme modifications at the same time.