LLM Schema Integration Guide – Yotpo UGC Discovery

To maximize discoverability, your user-generated content should be easy for Artificial Intelligence and Large Language Model (LLM) engines to crawl and read.

This guide outlines how to inject an HTML snippet containing your user-generated content directly into the initial server-side GET response of your Product Detail Pages (PDPs). By rendering this content on the server, LLM scrapers and crawlers can access and index your review content directly from the page source.

Platform Compatibility & Requirements Note

Shopify (Standard): This feature works out of the box for merchants using the standard Shopify platform with Yotpo Reviews Widgets (v3). If your store fits this criteria, the system handles everything automatically — no manual development or code changes are required from your team.

Other Configurations: If your store runs on another e-commerce platform such as Salesforce Commerce Cloud, Adobe Commerce/Magento, BigCommerce, or uses a Shopify Headless architecture, you must follow the self-implementation steps outlined below to manually integrate the GET API call.

Please note that Yotpo Widget frameworks v1 and v2 are currently not supported.

Implementation Process

Server-Side Fetch & Injection: When a user or crawler requests a PDP, your application server fetches the static review payload directly from Yotpo's optimized CDN endpoint and renders it as raw inline HTML within the initial source page template.

To do this, initiate a server-side HTTP GET request from your product page template or server-side rendering layer. The request must include your Yotpo store ID and the relevant product ID.

Caching: Cache the server-side response and refresh it at least once a day to avoid latency on PDP loads.

Semantic Rendering: Render the returned content as basic, clean, readable HTML text within the initial page response. The content should align with your site's native typography.

Security: Only render HTML returned from Yotpo's trusted CDN endpoint. Do not combine the response with untrusted user input before rendering it on the page.

Platform Examples

Shopify Headless

Liquid

For storefronts utilizing Liquid templates, the generated HTML schema can be injected via metafields. To implement this, add the following code snippet to your product page footer, or under the Yotpo Reviews widget:

{% assign llm_html_content = all_products[block.settings.product].metafields.yotpo.llm_schema_html %}
{% if llm_html_content != blank and llm_html_content contains 'id="yotpo-reviews-section-data"' %}
  {{ llm_html_content }}
{% endif %}

Non-Liquid

If Liquid files are not in use or you prefer to bypass asynchronous metafield updates, you can manually retrieve the Yotpo LLM schema on the server side. The resulting HTML should then be integrated into your product page component; caching this response is highly recommended to maintain optimal loading speeds.

// Example: app/routes/products.$handle.tsx (Hydrogen/Remix)
// or pages/products/[handle].tsx (Next.js)

const YOTPO_API_BASE_URL = 'https://api-cdn.yotpo.com';
const YOTPO_TIMEOUT_MS = 3000;

async function fetchYotpoLlmSchema(storeId: string, productId: string) {
  if (!storeId || !productId) return '';

  const controller = new AbortController();
  const timeout = setTimeout(() => controller.abort(), YOTPO_TIMEOUT_MS);

  try {
    const url = `${YOTPO_API_BASE_URL}/v1/stores/${encodeURIComponent(
      storeId
    )}/products/${encodeURIComponent(productId)}/llm-schema`;

    const response = await fetch(url, {
      method: 'GET',
      signal: controller.signal,
    });

    if (!response.ok) {
      return '';
    }

    return await response.text();
  } catch (e) {
    return '';
  } finally {
    clearTimeout(timeout);
  }
}

Then inside your product page loader/server function:

export async function loader({ params, context }) {
  const product = await context.storefront.query(PRODUCT_QUERY, {
    variables: {
      handle: params.handle,
    },
  });

  const storeId = process.env.YOTPO_STORE_ID;

  // Use the product external ID used in Yotpo, for example Shopify product ID, SKU, or external ID
  const productId = product.product.id;

  const yotpoHtmlData = await fetchYotpoLlmSchema(
    storeId,
    productId
  );

  return {
    product: product.product,
    yotpoHtmlData,
  };
}

And render it in the component:

export default function ProductPage() {
  const { product, yotpoHtmlData } = useLoaderData();

  return (
    <div>
      <h1>{product.title}</h1>

      {/* Product content */}

      {yotpoHtmlData && (
        <div
          dangerouslySetInnerHTML={{
            __html: yotpoHtmlData,
          }}
        />
      )}
    </div>
  );
}

Salesforce Commerce Cloud (SFCC)

For implementation on the SFCC platform, incorporate the code block below into your productDetails.isml template:

<isscript>
    var HTTPClient = require('dw/net/HTTPClient');
    var YOTPO_API_BASE_URL = 'https://api-cdn.yotpo.com';
    var YOTPO_TIMEOUT_MS = 3000;
    var YOTPO_LLM_SCHEMA_PATH = '/v1/stores/{storeId}/products/{productId}/llm-schema';
    var storeId = '<YOUR_STORE_ID>';
    var productId = pdict.product.id;
    var yotpoHtmlData = '';
    if (storeId && productId) {
        try {
            var requestUrl = YOTPO_API_BASE_URL + YOTPO_LLM_SCHEMA_PATH
                .replace('{storeId}', encodeURIComponent(storeId))
                .replace('{productId}', encodeURIComponent(productId));
            var httpClient = new HTTPClient();
            httpClient.setTimeout(YOTPO_TIMEOUT_MS);
            httpClient.open('GET', requestUrl);
            httpClient.send();
            if (httpClient.statusCode === 200) {
                yotpoHtmlData = httpClient.text;
            }
        } catch (e) {
        }
    }
</isscript>
<isif condition="${yotpoHtmlData}">
<isprint value="${yotpoHtmlData}" encoding="off" />
</isif>

Replace <YOUR_STORE_ID> with your Yotpo store ID.

Verification

Open a product page, view page source, and search for yotpo-reviews-section-data. You should see a <div> with review data.

If the section is missing, confirm that the UGC Discovery template is active, the correct Yotpo store ID and product ID are used, and the server-side request returns a successful response.