Does Schema App integrate with Shopify Hydrogen storefronts?

Schema App’s integration with Shopify enables the automated generation and deployment of schema markup (JSON-LD) across supported Shopify resources. While we do not directly support Hydrogen storefronts, this article outlines how our normal deployment works, how Hydrogen differentiates from this, and how a Hydrogen storefront can utilize the markup resources the app generates.

Standard Shopify Theme Deployment

Our standard deployment process is intended for Shopify's Online Store 2.0 themes. From a high level, the process has three major components: schema markup generation, Metafield storage, and rendering using an App embed block:

1. Schema markup generation
   On a daily basis our APIs retrieve resource data from Shopify and generate schema markup. For Product resources, we also listen to webhooks to keep the schema markup in sync.
2. Metafield storage
   The generated markup is stored in a Shopify Metafield under our app’s namespace (e.g., namespace: schemaapp, key: schema, value: the JSON-LD string).
3. Markup Rendering via App embed block
   Using a Shopify App embed block, the schema markup is rendered into the page HTML. This involves enabling our app embed block in the store’s theme editor. Instructions on how to enable this / where this is activated can be found here: link.

Hydrogen Storefronts

Hydrogen is a headless commerce framework from Shopify that uses the Storefront API and does not support traditional themes or theme app extensions. Therefore, step 3 of the deployment process listed above is not possible in Hydrogen storefronts, as app embed blocks are not supported.

What Schema App Can Do

• ✅ Generate the schema markup using our APIs
• ✅ Store the markup in Metafields on supported resources
• ❌ Automatically render the markup on Hydrogen storefront pages

What the Merchant Must Do

To use the Schema App-generated schema markup stored in the resources' metafields, merchants using Hydrogen must implement custom GraphQL code to retrieve the schema markup, and custom layout code to inject the markup in each page:

1. Expose the Metafield to the Storefront API
   This requires a GraphQL mutation to make the relevant Metafield available for querying via the Storefront API.
2. Query the Metafield via the Storefront API
   Use a GraphQL query in the Hydrogen application to retrieve the stored JSON-LD markup.
3. Inject the Markup into the Page
   After retrieving the markup, inject it into the storefront page as a script element using standard React or JavaScript logic within the Hydrogen application.

Storefront API

To assist with implementation of the GraphQL queries and mutations, here are some documentation resources for using the Storefront API:

• GraphQL Storefront API
  
• Retrieve metafields with the Storefront API
  
  

Example markup injection

To assist with implementation of the markup injection, merchants can reference this snippet from our Liquid template code where the schema markup is inserted into the page HTML. While Hydrogen doesn’t use Liquid template code, this can serve as a reference for how the script tag should be constructed:

<!-- Example (for reference only) -->
<script type="application/ld+json" data-source="Shopify">
  {{ shop.metafields.schemaapp.schema | json }}
</script>