Adding Structured Data To BigCommerce for Google Merchant Center (JSON-LD & Microdata)

Adding Structured Data To BigCommerce for Google Merchant Center

Edit Theme File


Important :
It is recommend you remove all your old structured data coding.

Edit Theme by going to Storefront > My Themes > Inside the current theme, click on Advanced > Edit Theme Files

BigCommerce Edit Theme Files

Navigate to : templates/components/products/product-view.html

Paste the below JSON-LD or Microdata at the top of the page and save.

JSON-LD

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "{{product.title}}",
  "sku": "{{ product.id }}",
  "gtin14": "{{ product.gtin }}",
  "brand": "{{product.brand.name}}",
  "description": "{{ sanitize product.description }}",
  "image": "{{getImage product.main_image "thumbnail"}}",
    "offers": {
		"@type": "Offer",
		"priceCurrency": "{{currency_selector.active_currency_code}}",
		"price": "{{ product.price.with_tax.value }}",
		"itemCondition" : "http://schema.org/NewCondition",
		"availability" : "{{#if product.out_of_stock}}http://schema.org/OutOfStock{{else}}http://schema.org/InStock{{/if}}",
		"url" : "{{product.url}}"
	}
}
</script>

Microdata

<div itemscope itemtype="http://schema.org/Product">
<meta itemprop="name" content="{{ product.title }}" />
<meta itemprop="sku" content="{{ product.id }}"/>
<meta itemprop="gtin14" content="{{ product.gtin }}"/>
<meta itemprop="brand" content="{{ product.brand.name }}"/>
<meta itemprop="description" content="{{ sanitize product.description }}"/>
<meta itemprop="image" content="{{getImage product.main_image "thumbnail"}}"/>
<div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="{{currency_selector.active_currency_code}}">
<meta itemprop="price" content="{{ product.price.with_tax.value }}">
<meta itemprop="itemCondition" itemtype="http://schema.org/OfferItemCondition" content="http://schema.org/NewCondition" />
{{#if product.out_of_stock}}<meta itemprop="availability" content="http://schema.org/OutOfStock"/>{{else}}<meta itemprop="availability" content="http://schema.org/InStock"/>{{/if}}
<meta itemprop="url" content="{{ product.url }}" />
</div>
</div>

Testing

Verify that you have done it correctly by checking the page with Google’s Structured Data Testing Tool

As of writing, you will see 3 warnings, these are :

  • priceValidUntil
  • aggregateRating
  • review

Shopify has no default coding that can be used to fill these fields in. So simply ignore these.

Google Structured Data Testing Result

Tip

If you want the ability to edit your titles for Google Shopping but do not want to change the website, why not use FeedArmy for publishing your products to Google Shopping. You can also export variants and use import rules or manually edit data!

Need Help?