How to Implement Yotpo Structured Data in BigCommerce

Search engines and humans read the web differently. That's why structured data was developed to help search engines understand the context of your content. Using a standardized format, structured data organizes information in a way that search engines can easily navigate using simple algorithms. As a result, search engines like Google can use structured data to display special search results including product names, bulleted lists and customer reviews.

Given the increased popularity and necessity of structured data, platforms and tools like BigCommerce and Yotpo natively include rich snippets. Although there are many benefits of these native integrations, displaying product and review structured data can often cause a few issues. 

The Problem

If you use Yotpo and also run a BigCommerce store (particularly on the Cornerstone theme), you may run into an issue with structured data. This occurs because BigCommerce product structured data is embedded as microdata in the HTML tags of individual themes. By contrast, Yotpo’s review structured data is formatted as a JSON-LD object. It's best to choose either microdata or JSON-LD and avoid using both types on a single page or email, as it can confuse Google’s crawler. This can result in multiple unlinked structured data objects when using Google’s Structured Data Testing Tool.

The Solution

We consolidated BigCommerce product data and Yotpo customer review data into one JSON-LD formatted rich snippet. Although there are a few ways to accomplish this, we did so by shifting BigCommerce’s structured data into the JSON-LD format by leveraging a combination of Handlebars and the Yotpo API. This process consolidates the two snippets into one, which allows Google to display all structured data for a product as one object.

How We Did It

First, we removed the default BigCommerce microdata from product page HTML. If you were to run the page URL through Google’s structured data testing tool at this stage, you would only see Yotpo's review data. Next, we used Handlebars to inject the product context into the theme JavaScript to gather product information like name, description, price and currency.

Next, we disabled Yotpo’s automated rich snippets solution. We used a proxy script that connects to the Yotpo API to look up individual products in Yotpo to acquire aggregate rating information and the product’s review count. We then used the theme JavaScript to generate a JSON-LD formatted structured data object containing both the product information and review data. Finally, we appended this new JSON-LD object to the product page markup.

After going through this process and running your page through Google’s structured data testing tool, you will only see one structured data object. This object will include both your product information and a subsection for review ratings and the review count.

Why is this Helpful

Aside from resolving the issue at hand, this solution simplifies the structured data process by only including one snippet on your page. Additionally, this process can be applied to BigCommerce themes besides Cornerstone to accomplish the same objective.

Need help getting this setup on your site or have questions about Yotpo and BigCommerce? Just fill out the form below and we’re happy to help!