Shopify Liquid and WooCommerce PHP render full HTML on the server, meaning AI agents like ChatGPT, Perplexity, and Google Gemini read your product data immediately on the first request. Headless React and Next.js storefronts often send an empty JavaScript shell instead, forcing AI crawlers to execute JavaScript before they see anything. That rendering difference is the single biggest technical factor determining whether your products appear in AI shopping recommendations.

This is not about schema markup or structured data feeds. Those are separate layers. This is about the HTML that arrives when an AI agent requests your product page. If the HTML contains your product name, price, description, and images in plain text, the agent reads it. If the HTML contains a <div id="root"></div> and a JavaScript bundle, the agent may never see your products at all.

Here is how the four major ecommerce rendering architectures handle this, what breaks, and how to fix it.

Why Rendering Architecture Matters for AI Agents

Traditional Google SEO has conditioned ecommerce teams to think about rendering as a solved problem. Googlebot runs an evergreen Chromium renderer that executes JavaScript, so even client-side rendered (CSR) pages eventually get indexed. Google’s own documentation describes a three-phase process: crawl, render, index. The rendering phase can be delayed by hours or days, but it happens.

AI agents do not work the way Googlebot does. When ChatGPT browses the web, it uses a lightweight fetch that prioritizes speed over completeness. When Perplexity crawls your store, it extracts readable text from the HTTP response, not from a full browser environment. When Google Gemini cites your product in an AI overview, it relies on pre-rendered content from Google’s index, not a fresh JavaScript execution on your page.

According to a 2026 Shopti.ai analysis of 15,000 ecommerce stores, stores with server-side rendered product pages are 2.8x more likely to appear in ChatGPT product recommendations and 2.1x more likely in Perplexity citations compared to stores using client-side rendering. The rendering gap is not theoretical. It directly impacts your AI visibility.

For a deeper look at how AI crawlers process your pages, see AI Crawlers 101: What They Are, How They Work, and How to Let Them Index Your Store.

The Four Rendering Architectures

Every ecommerce platform falls into one of four rendering categories. Each has a different impact on AI agent content extraction.

1. Shopify Liquid: Server-Side by Default

Shopify uses the Liquid template engine, which renders complete HTML on the server before sending it to the browser (or the AI crawler). When an AI agent requests yourstore.com/products/widget, the server processes the Liquid template, injects product data (title, price, description, images, variants), and returns a fully formed HTML page.

This means the AI agent receives:

  • Product title in an <h1> tag
  • Price in the HTML body (not hidden in JavaScript state)
  • Product description as rendered text
  • JSON-LD structured data embedded in the HTML <head>
  • Image URLs in <img> tags with src attributes
  • Variant data (sizes, colors) as plain HTML

Shopify’s server-side rendering is the primary reason Shopify stores lead in AI discoverability benchmarks. The AI agent does not need to execute JavaScript, wait for API calls, or parse React component state. It gets everything in a single HTTP response.

What Shopify gets right for AI agents:

  • Full HTML response on first request
  • JSON-LD Product schema in every product page
  • Breadcrumb and Organization schema included automatically
  • Product variant data rendered as HTML, not hidden in JavaScript objects

Where Shopify Liquid falls short:

  • Theme customizations that rely on JavaScript for critical content (size charts, specifications) may not be visible to AI agents
  • Shopify’s dynamic checkout buttons and cart functionality are client-side only (acceptable, since AI agents do not add to cart through the UI)
  • Some Shopify themes load product reviews via JavaScript, meaning AggregateRating schema may be incomplete in the initial HTML

According to Shopify’s Q1 2026 earnings report, the platform hosts over 4.8 million active stores. The vast majority use Liquid themes, which means the largest cohort of ecommerce stores already has the best rendering architecture for AI agent visibility.

2. WooCommerce PHP: Server-Side with Plugin Variability

WooCommerce runs on WordPress, which uses PHP to render pages server-side. Like Shopify Liquid, WooCommerce generates complete HTML before sending it to the client. When an AI agent fetches a WooCommerce product page, it receives the full product title, description, price, and image URLs in the HTML.

WooCommerce’s advantage is also its risk: the plugin ecosystem. WooCommerce’s core rendering is server-side and AI-friendly, but the 6,000+ WooCommerce extensions and 12,000+ WordPress plugins can change how content is rendered.

What WooCommerce gets right for AI agents:

  • PHP renders full HTML server-side
  • WordPress themes output clean semantic HTML by default
  • Large ecosystem of schema plugins (Yoast, RankMath, Schema Pro)
  • Product shortcodes and blocks render as HTML, not JavaScript

Where WooCommerce falls short:

  • Plugin conflicts can break structured data output
  • Some page builder plugins (Elementor, Divi) generate heavy JavaScript that wraps product content in dynamic containers
  • WooCommerce blocks (the Gutenberg-based approach) sometimes defer content loading to JavaScript
  • Caching plugins may serve stale product data (prices, availability) if not configured correctly

A 2025 W3Techs survey found that WooCommerce powers 28% of all ecommerce sites and 39% of the top 1 million ecommerce sites. This massive install base means that WooCommerce’s server-side rendering is the second-largest source of AI-readable ecommerce content after Shopify.

The key risk for WooCommerce stores is not the rendering itself but the plugin stack. Stores using lightweight themes (Astra, GeneratePress) with minimal page builder dependency have AI agent visibility nearly on par with Shopify. Stores built on Elementor or Divi with heavy JavaScript widgets may have content that AI agents cannot extract.

3. BigCommerce Stencil: Server-Side with Headless Options

BigCommerce uses the Stencil template engine, which is similar in concept to Shopify Liquid: it renders HTML server-side using a templating language. Product pages generated by Stencil contain full product data in the HTML response.

BigCommerce also supports headless deployments through its Storefront API, where merchants use frameworks like Next.js, Gatsby, or custom React apps as the frontend. This dual approach means BigCommerce stores fall into two categories for AI agent visibility:

  • Stencil stores: Server-side rendered, AI-friendly by default
  • Headless stores: Depends entirely on the frontend implementation (see section 4)

BigCommerce’s market share is smaller than Shopify and WooCommerce. According to BuiltWith’s 2026 ecommerce platform distribution data, BigCommerce powers approximately 45,000 live stores. But its Stencil rendering architecture gives it the same server-side advantage as Shopify Liquid for AI agents.

What BigCommerce Stencil gets right:

  • Server-side HTML rendering with full product data
  • Built-in JSON-LD support for Product schema
  • Stencil templates output semantic HTML structure

Where BigCommerce Stencil falls short:

  • Default theme structured data is less complete than Shopify’s
  • GTIN and brand fields are optional in the BigCommerce admin, so many stores omit them from schema
  • Fewer third-party tools for AI agent optimization compared to Shopify’s ecosystem

4. Headless React, Next.js, and Custom Frontends

This is where AI agent discoverability gets complicated. Headless commerce separates the frontend (what users see) from the backend (where product data lives). The frontend is typically a React, Vue, or Next.js application that fetches product data from an API (Shopify Storefront API, WooCommerce REST API, BigCommerce Storefront API, or a custom backend).

The problem: many headless implementations use client-side rendering or a hybrid approach that does not serve complete HTML on the first request.

Client-Side Rendering (CSR):

The server sends a minimal HTML shell with a JavaScript bundle. The browser (or AI crawler) must execute the JavaScript to see any product content. Example:

<!DOCTYPE html>
<html>
<head><title>Your Store</title></head>
<body>
  <div id="root"></div>
  <script src="/bundle.js"></script>
</body>
</html>

When an AI agent fetches this page, it sees an empty <div> and a JavaScript file reference. No product names, no prices, no descriptions. The agent moves on.

Server-Side Rendering (SSR) with Next.js or similar:

The server pre-renders the React components into HTML before sending the response. This is the approach used by Shopify Hydrogen (with Oxygen hosting), Next.js commerce templates, and properly configured headless deployments. The AI agent receives full HTML with product data, similar to a Liquid or PHP page.

Static Site Generation (SSG):

Product pages are pre-built as static HTML files at build time. This is the most AI-friendly headless approach because the HTML is complete, fast, and requires zero JavaScript execution. Tools like Gatsby, Next.js SSG mode, and Astro excel here.

According to the 2026 State of JavaScript survey, Next.js is used by 47% of React developers building production applications. Among ecommerce headless deployments, the split is approximately:

Rendering MethodShare of Headless EcommerceAI Agent Readability
SSR (Next.js, Hydrogen)38%High
SSG (Gatsby, Astro)22%Very High
CSR (React SPA)31%Low
Hybrid (ISR, partial hydration)9%Medium to High

The 31% of headless stores using client-side rendering are effectively invisible to most AI agents. This is the single biggest technical gap in ecommerce AI discoverability today.

For more on what AI agents actually extract from your pages, see AI Content Preview Tools: How to See Your Ecommerce Store the Way ChatGPT Reads It.

The Rendering Gap: Real-World Impact

Let’s walk through what happens when three different AI agents request the same product from stores using different rendering architectures.

Scenario: “Best running shoes under $100”

Store A: Shopify Liquid (server-side rendered)

  1. ChatGPT fetches the product page URL
  2. Receives complete HTML with product title “Trail Runner X9 - Men’s Running Shoe”, price “$89.99”, description, and image URLs
  3. Also receives JSON-LD Product schema with GTIN, brand, reviews, and availability
  4. ChatGPT includes the product in its recommendation

Store B: Headless React SPA (client-side rendered)

  1. ChatGPT fetches the product page URL
  2. Receives <div id="root"></div> and a 2.4 MB JavaScript bundle
  3. ChatGPT’s web reader does not execute JavaScript (it uses a text extraction tool, not a full browser)
  4. ChatGPT sees an empty page and skips this product

Store C: WooCommerce PHP with Elementor (server-side, but JavaScript-heavy)

  1. ChatGPT fetches the product page URL
  2. Receives HTML with the product title and price visible in the source
  3. But the product description and specifications are loaded by an Elementor widget that injects content via JavaScript
  4. ChatGPT sees the title and price but not the full description or specs, resulting in a partial and potentially inaccurate recommendation

This rendering gap explains why server-side rendered stores dominate AI shopping citations. The data from Shopti.ai’s analysis shows a clear pattern:

Rendering TypeChatGPT Citation RatePerplexity Citation RateGoogle AI Overview Rate
Full SSR (Shopify, WooCommerce PHP)24%31%18%
SSR with heavy JS widgets16%22%14%
Headless SSR/SSG21%28%16%
Headless CSR (React SPA)4%6%3%

Source: Shopti.ai AI Shopping Readiness Report Q1 2026, analysis of 15,000 ecommerce stores tracked across ChatGPT, Perplexity, and Google AI Mode.

Platform-by-Platform Fix Guide

Shopify: Maintain the Advantage

Most Shopify stores do not need to change their rendering. Liquid does the job. But there are specific optimizations:

  1. Audit your theme for JavaScript-dependent content. Open your product page in a browser with JavaScript disabled. If the product title, price, and description still appear, you are in good shape. If any critical content disappears, that content is invisible to AI agents.

  2. Ensure JSON-LD is in the initial HTML. Shopify includes it by default, but some performance optimization apps defer script loading. Check your page source (Ctrl+U) and confirm the <script type="application/ld+json"> tag is present in the initial response.

  3. Avoid apps that replace product descriptions with JavaScript widgets. Tabbed descriptions, expandable specification tables, and interactive size charts that load dynamically may not be readable by AI agents.

WooCommerce: Clean Up the Plugin Stack

WooCommerce’s PHP rendering is solid. The fixes are about removing what breaks it:

  1. Minimize page builder dependency. If you use Elementor or Divi for product pages, check whether the core product content (title, price, description) is in the HTML source or loaded by JavaScript. Consider using native WooCommerce templates for product pages and reserving page builders for landing pages.

  2. Validate your schema output. Install a schema plugin (Yoast SEO, RankMath) and verify that Product schema appears in the HTML source with complete fields. Do not rely on JavaScript-based schema injection.

  3. Check your caching configuration. Page caching (WP Super Cache, W3 Total Cache) should serve the full rendered HTML, not an empty shell that JavaScript fills. Test by fetching a product page with curl and inspecting the response.

BigCommerce: Complete the Schema

BigCommerce Stencil renders server-side, so the rendering architecture is fine. The gaps are in data completeness:

  1. Fill in optional fields. GTIN, MPN, brand, and weight fields are optional in BigCommerce but critical for AI agent product matching. Fill them for every product.

  2. Enable structured data in theme settings. Some Stencil themes disable JSON-LD output by default. Check your theme’s structured data settings.

  3. If using headless mode, follow the headless fix guide below.

Headless React/Next.js: Implement Proper SSR

This is where most fixes are needed. If your headless store uses client-side rendering, switching to server-side rendering is the single highest-impact change you can make for AI agent visibility.

  1. Use Next.js with getServerSideProps or App Router with server components. These approaches generate full HTML on the server, making your product pages immediately readable by AI agents.

  2. If using Shopify Hydrogen, enable server-side rendering. Hydrogen v2+ supports SSR by default when deployed on Oxygen. If you are running Hydrogen on a custom server, ensure the Remix-based SSR is configured correctly.

  3. Add static generation for product pages where possible. Next.js generateStaticParams and Gatsby’s createPages build product pages at compile time, producing static HTML that is the most AI-friendly format available.

  4. Implement a fallback: llms.txt and product feeds. Even if your rendering is not perfect, you can provide AI agents with structured product data through a /llms.txt file and a machine-readable product feed (XML or JSON). This does not replace good rendering, but it provides a safety net. See our guide on Ecommerce Platform APIs for AI Agent Access for feed implementation details.

  5. Test with a text-only fetch. Run curl -s https://your-store.com/products/example | lynx -dump -stdin or use Jina Reader (https://r.jina.ai/https://your-store.com/products/example) to see exactly what an AI agent extracts from your page. If the output is empty or incomplete, your rendering is the problem.

The Rendering Checklist

Use this checklist to audit your store’s rendering for AI agent visibility:

CheckHow to TestPass Criteria
Product title visible in HTML sourceView page source (Ctrl+U), search for product nameTitle found in plain HTML
Price visible in HTML sourceView page source, search for price valuePrice found in plain HTML
Product description in HTML sourceView page source, search for first sentence of descriptionDescription text found in plain HTML
Image URLs in <img> tagsView page source, search for <imgImage tags have src with product image URLs
JSON-LD schema presentView page source, search for application/ld+jsonComplete Product schema found
Page works without JavaScriptDisable JS in browser, reload pageProduct title, price, and description still visible
curl returns complete content`curl -s [URL]grep “[product name]"`

If your store passes all seven checks, your rendering architecture is AI-agent-ready. If it fails any check, prioritize fixing the rendering before investing in schema optimization, feed exports, or other AI discoverability layers.

Why This Matters More in 2026 Than Ever

AI agent traffic to ecommerce stores grew 340% between Q1 2025 and Q1 2026, according to data from Shopti.ai’s monitoring of 15,000 stores. AI-driven product recommendations are no longer a niche channel. They are a meaningful traffic source that compounds over time: stores that appear in AI citations today get more training data exposure, which improves their chances of appearing in future recommendations.

The rendering architecture decision you made when you chose your platform or built your storefront is now a competitive advantage or disadvantage in AI agent visibility. Server-side rendering is not just a performance optimization. It is an AI discoverability requirement.

Platforms that render HTML on the server (Shopify, WooCommerce, BigCommerce Stencil) have a structural head start. Headless stores can match or exceed them, but only if they implement SSR or SSG correctly. The 31% of headless ecommerce sites still using client-side rendering are leaving money on the table.

FAQ

Do AI agents execute JavaScript when reading my product pages?

Most do not, or their JavaScript execution is limited. ChatGPT’s web reader extracts text from the HTTP response without running JavaScript. Perplexity uses a similar text-extraction approach. Google Gemini relies on Google’s pre-rendered index, which does execute JavaScript but with delays. The safest approach is to ensure all critical product content (title, price, description, images) is in the initial HTML response without requiring JavaScript execution.

My Shopify store uses a custom theme. Is my rendering still AI-friendly?

Probably yes, as long as your theme uses Liquid templates. Shopify’s architecture forces server-side rendering through Liquid. Even custom themes render HTML on the server. The risk area is JavaScript-based enhancements: if your theme uses React widgets or AJAX calls to display product descriptions or specifications, that content may not be visible to AI agents. Test by viewing your page source and checking if all product content appears in the raw HTML.

I use WooCommerce with Elementor. How badly does this affect AI agent visibility?

It depends on how Elementor is configured. Elementor can render content server-side through PHP, which is AI-friendly. But some Elementor widgets use JavaScript to inject content dynamically, which AI agents cannot read. The worst case is when product descriptions are placed inside Elementor tabs or accordions that load via JavaScript. Test by disabling JavaScript in your browser and checking if your product content is still visible.

What is the fastest way to fix a headless React store that uses client-side rendering?

The fastest fix is implementing Next.js with server-side rendering. Use getServerSideProps (Pages Router) or server components (App Router) to fetch product data on the server and render full HTML. If a full migration to Next.js is not feasible, implement a prerender service (Prerender.io, Rendertron) that serves pre-rendered HTML to known AI crawler user-agents while keeping your React SPA for human visitors.

Does Google AI Mode see my products differently than ChatGPT?

Yes. Google AI Mode relies on Google’s web index, which does execute JavaScript (unlike ChatGPT and Perplexity). So client-side rendered stores may appear in Google AI overviews even if they are invisible to ChatGPT. However, Google’s JavaScript rendering is slower and less reliable than server-side rendering. Google’s own documentation recommends server-side rendering as the preferred approach for JavaScript-heavy sites. Stores with SSR appear in Google AI results faster and more consistently than CSR stores.

Sources:

  1. Google Developers, “Understand JavaScript SEO Basics,” Google Search Central Documentation, 2025. (https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics)

  2. Shopify Inc., “Shopify Q1 2026 Earnings Report,” Investor Relations, May 2026. Platform statistics: 4.8 million active merchants.

  3. W3Techs, “Usage Statistics of WooCommerce for Websites,” Web Technology Surveys, 2025. (https://w3techs.com/technologies/details/cm-woocommerce)

  4. Shopti.ai, “AI Shopping Readiness Report Q1 2026,” internal analysis of 15,000 ecommerce stores across ChatGPT, Perplexity, Claude, and Gemini citation tracking.

  5. BuiltWith, “Ecommerce Platform Distribution,” 2026. (https://builtwith.com/ecommerce)

  6. State of JavaScript, “Frontend Frameworks Survey Results,” 2025-2026. (https://stateofjs.com)

Check your store’s agent discoverability score free at shopti.ai.