.svg)
Product Schema for Webflow Websites
Product schema tells search engines and AI assistants what you sell. It powers Google Shopping free listings, Product rich results in search, and the product panels that appear when someone searches for a specific item.
Why Product Schema Matters
When a shopper searches for a product by name, Google can display:
- Price and availability directly in search results
- Star ratings and review counts
- Product images in the Shopping tab
- Merchant listing cards with buy buttons
AI assistants use Product markup to answer questions like "How much does [product] cost?", "Is [product] in stock?", and "Which brand makes the best [category] under $100?" Without structured Product data, your products are invisible to these surfaces.
Required Fields
These fields must be present for Google to process your Product markup:
Recommended Fields
Google uses these fields to enhance Product rich results and merchant listings:
- brand — The product brand (nested Brand object)
- color — The product color
- description — Product description text
- gtin — Global Trade Item Number (barcode)
- image — Product image URL(s)
- material — What the product is made from
- mpn — Manufacturer Part Number
- sku — Stock Keeping Unit (merchant-specific ID)
Complete JSON-LD Example
A fully implemented Product with all recommended fields:
{
"@context": "https://schema.org/",
"@type": "Product",
"name": "Men's Leather Oxford Shoes",
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg"
],
"description": "Premium full-grain leather oxford shoes for formal occasions.",
"sku": "0446310786",
"mpn": "925872",
"gtin14": "98766051104214",
"color": "Brown",
"material": "Full-grain leather",
"brand": {
"@type": "Brand",
"name": "Acme Shoes"
},
"offers": {
"@type": "Offer",
"url": "https://example.com/oxford-shoes",
"priceCurrency": "USD",
"price": "119.99",
"itemCondition": "https://schema.org/NewCondition",
"availability": "https://schema.org/InStock"
}
}
Product Variants (ProductGroup)
For products that come in multiple sizes or colors, use ProductGroup with hasVariant:
{
"@context": "https://schema.org/",
"@type": "ProductGroup",
"name": "Wool Winter Coat",
"description": "Wool coat, new for the coming winter season",
"url": "https://www.example.com/coat",
"brand": {
"@type": "Brand",
"name": "Good brand"
},
"material": "wool",
"variesBy": [
"https://schema.org/size",
"https://schema.org/color"
],
"hasVariant": [
{
"@type": "Product",
"sku": "44E01-M11000",
"gtin14": "98766051104214",
"image": "https://www.example.com/coat_small_green.jpg",
"name": "Small green coat",
"color": "Green",
"size": "small",
"offers": {
"@type": "Offer",
"url": "https://www.example.com/coat?size=small&color=green",
"priceCurrency": "USD",
"price": 39.99,
"itemCondition": "https://schema.org/NewCondition",
"availability": "https://schema.org/InStock"
}
}
]
}
Source: Google Product Variants documentation
Shared properties like brand, material, and description go on the ProductGroup. Variant-specific properties like sku, color, size, and offers go on each Product inside hasVariant.
Webflow Implementation
Static product pages
Add the full JSON-LD block in Page Settings > Custom Code (Head) for each product page.
CMS template pages
Map Webflow CMS fields to Product properties in a JSON-LD script block on the CMS template page. Key mappings:
- Name field →
name - Main Image field →
image - Short Description plain text field →
description - Price number field →
offers.price - SKU text field →
sku - Brand reference or text field →
brand.name
With Schema HQ
Schema HQ detects your Webflow CMS product fields and generates the complete Product JSON-LD automatically. It handles Offer nesting, currency formatting, and product variant grouping. Publish directly to Webflow custom code without manual JSON editing.
