How to Add a Product Rich Snippet (Schema.org) in Webflow
Learn how to implement Schema.org Product markup in Webflow to show price, reviews, and availability directly in Google results.
The Schema.org Product markup lets Google display your product or service’s price, reviews, and availability directly in search results. It’s a powerful way to improve click-through rates on your sales pages. Sandro, cofounder of Gemeos Webflow agency, shows you how to implement it.
Prerequisites
- A product or service page on your Webflow site
- A set price, or a price range
- Ideally, customer reviews with a numeric rating
1. Create the Product JSON-LD script
Here’s the full template. Adapt each value to your product or service. For a service with no fixed price, use only the "description" field and leave out "offers".
2. Paste the script into the page settings
In Webflow Designer, open the relevant product page. Go to the page settings gear, then "Custom Code." Paste it into "Before </body> tag." Publish the site.
3. Check it with the Rich Results Test
Test your page URL in the Rich Results Test. Make sure the "Product" type is detected and that no required field is missing. The most common errors: missing image, badly formatted currency, ratingValue outside the 1–5 range.
Conclusion
The Product rich snippet is especially effective on service pages with pricing and on physical product pages. It builds trust before the click even happens.
- Use case 1: agency service page with a price range shown in Google
- Use case 2: SaaS product page with an average user rating
- Use case 3: training page with price and number of sign-ups in the rich snippet
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
.avif)














