P
Pacestack
Back to Blog
Guide2026-03-06

How to Add Schema.org Product Markup to Your E-Commerce Site (Step-by-Step)

80% of the e-commerce brands we scanned failed this check. Here's how to fix it in under an hour.

Schema.org Product markup is the single most impactful thing you can add to your product pages right now. Not just for Google. For AI agents.

When Claude, ChatGPT, or Perplexity tries to recommend a product, they need structured data to work with. Without it, they're guessing based on scraped text and stale training data. With it, they can read your product name, price, availability, and reviews in a format that's impossible to misinterpret.

We've scanned over 250 e-commerce brands across 10 verticals. 80% failed the Product Schema check entirely. Most had zero JSON-LD on their product pages. The ones that did often had incomplete or broken markup.

This guide will get you from zero to correct Product schema in about 30 minutes.

Why Schema.org Matters for AI Agents

You probably know Schema.org helps with Google rich snippets. Star ratings in search results, price ranges, that kind of thing. But there's a bigger reason to care about it now.

AI shopping agents are becoming the new storefront. When someone asks Claude "what's the best running shoe under $150?" the agent needs to find, compare, and recommend products. It pulls from training data, live web crawls, and structured data. The structured data is the only part you fully control.

No Schema.org markup means agents either skip you or hallucinate your product details. Neither is good.

The Fields That Matter Most

The full Product schema spec has dozens of properties. You don't need all of them. These are the ones that actually move the needle for AI agent readiness:

  • name — Your product name. Keep it clean. No keyword stuffing.
  • description — A plain text description. 1-3 sentences works.
  • image — Full URL to the product image. Not a relative path.
  • brand — Nested Brand object with a name property.
  • sku — Your internal SKU. Agents use this for deduplication.
  • offers — This is where price, currency, and availability live.
  • aggregateRating — Star rating and review count. Huge trust signal.
  • review — Individual reviews. Include at least 1-2 if you have them.

Copy-Paste Examples

Plain HTML (any site)

Drop this in the <head> of every product page. Replace the placeholder values with your actual product data.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Trail Runner Pro 3",
  "description": "Lightweight trail running shoe with Vibram outsole.",
  "image": "https://example.com/images/trail-runner-pro-3.jpg",
  "brand": {
    "@type": "Brand",
    "name": "ExampleBrand"
  },
  "sku": "TRP3-BLK-10",
  "offers": {
    "@type": "Offer",
    "price": "129.99",
    "priceCurrency": "USD",
    "availability": "https://schema.org/InStock",
    "url": "https://example.com/products/trail-runner-pro-3"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.6",
    "reviewCount": "234"
  }
}
</script>

Shopify (via theme.liquid)

In your Shopify admin, go to Online Store > Themes > Edit Code. Open your product template (usually sections/main-product.liquid or templates/product.liquid). Add this block just before the closing tag:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": {{ product.title | json }},
  "description": {{ product.description | strip_html | json }},
  "image": "https:{{ product.featured_image | image_url: width: 1024 }}",
  "brand": {
    "@type": "Brand",
    "name": {{ product.vendor | json }}
  },
  "sku": {{ product.selected_or_first_available_variant.sku | json }},
  "offers": {
    "@type": "Offer",
    "price": {{ product.price | money_without_currency | json }},
    "priceCurrency": {{ cart.currency.iso_code | json }},
    "availability": {% if product.available %}"https://schema.org/InStock"{% else %}"https://schema.org/OutOfStock"{% endif %},
    "url": "{{ shop.url }}{{ product.url }}"
  }
}
</script>

Most Shopify themes include some Schema.org by default. But it's often incomplete or outdated. Check yours before assuming it's covered.

Next.js (App Router)

Add a JSON-LD script tag in your product page component. Next.js will render it server-side, which is exactly what you want for crawlers.

// app/products/[slug]/page.tsx
export default function ProductPage({ product }) {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Product",
    name: product.title,
    description: product.description,
    image: product.imageUrl,
    brand: { "@type": "Brand", name: product.brand },
    sku: product.sku,
    offers: {
      "@type": "Offer",
      price: product.price,
      priceCurrency: "USD",
      availability: product.inStock
        ? "https://schema.org/InStock"
        : "https://schema.org/OutOfStock",
      url: `https://example.com/products/${product.slug}`,
    },
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      {/* your product page JSX */}
    </>
  );
}

Common Mistakes

These are the errors we see most often in our scans:

  1. Missing priceCurrency. You set price: "49.99" but forgot to include priceCurrency: "USD". Agents can't compare prices across currencies without this.
  2. Wrong availability values. The availability field must be a full Schema.org URL like https://schema.org/InStock. Not "in stock", not "true", not "available".
  3. Relative image URLs. Use the full URL starting with https://. A relative path like /images/product.jpg breaks when agents try to fetch it.
  4. Stale data. Your schema says $79.99 but the page says $59.99 (sale price). Keep them in sync or use both price and priceValidUntil.
  5. Putting schema on the wrong page. Product schema goes on product detail pages, not collection or category pages.

How to Test Your Markup

Two tools, both free:

  1. Google Rich Results Test (search.google.com/test/rich-results) validates your JSON-LD syntax and tells you if Google can parse it.
  2. Pacestack Scanner checks your Schema.org markup specifically through the lens of AI agent readiness. It checks not just whether the schema exists, but whether it contains the fields that agents actually need.

The Google tool tells you if your markup is valid. Our scanner tells you if it's useful.

The Bottom Line

Schema.org Product markup is not new. It's been around for over a decade. But its importance just changed. It went from "nice for SEO" to "required for AI agent discovery."

The brands that add proper structured data now will be the ones AI agents recommend. The ones that don't will be invisible to a growing share of online shoppers who never open a browser.

30 minutes of work. Real competitive advantage.

Check Your Site

Run a free scan to see your Schema.org, MCP, and UCP status. No signup required.

Want a full implementation plan? The Complete Diagnosis ($49) includes step-by-step guides for every fix.