Adding Structured Data to Shopify for Google Merchant (Microdata & JSON-LD)

Adding Structured Data to Shopify for Google Merchant (Microdata & JSON-LD)

If you have received errors or warnings regarding missing or invalid data for prices, condition, availability. Than the code below will solve this issue. Simply copy the code and paste it inside your product.liquid file. You can choose between the newest JSON-LD technology (recommended) or Microdata.


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

JSON-LD

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "{{ product.title }}",
  "sku": "{{ product.variants.first.sku }}",
  "gtin14": "{{ product.variants.first.barcode }}",
  "brand": "{{ product.vendor }}",
  "description": "{{ product.description }}",
  "image": "{{ shop.url }}/{{ product.featured_image }}",
    "offers": {
		"@type": "Offer",
		"priceCurrency": "{{ shop.currency }}",
		"price": "{{ product.price |money_without_currency  |strip_html }}",
		"itemCondition" : "http://schema.org/NewCondition",
		"availability" : "{% if product.available == true %}http://schema.org/InStock{% else %}http://schema.org/OutOfStock{% endif %}",
		"url" : "{{ shop.url }}{{ product.url }}"
	}
}
</script>

Microdata

<div itemscope itemtype="http://schema.org/Product">
<meta itemprop="name" content="{{ product.title }}" />
<meta itemprop="sku" content="{{ product.variants.first.sku }}"/>
<meta itemprop="gtin14" content="{{ product.variants.first.barcode }}"/>
<meta itemprop="brand" content="{{ product.vendor }}"/>
<meta itemprop="description" content="{{ product.description }}"/>
<meta itemprop="image" content="{{ shop.url }}/{{ product.featured_image }}"/>
<div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<meta itemprop="price" content="{{ product.price |money_without_currency  |strip_html }}">
<meta itemprop="itemCondition" itemtype="http://schema.org/OfferItemCondition" content="http://schema.org/NewCondition" />
{% if product.available == true %}<meta itemprop="availability" content="http://schema.org/InStock"/>{% else %}<meta itemprop="availability" content="http://schema.org/OutOfStock"/>{% endif %}
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}" />
</div>
</div>

Once the new coding has been added, it will take several weeks to a month before the warnings inside your diagnostic panel will be removed.

Here is a step by step guide on how to paste the code in your products.liquid file.

Step 1

Login to your Shopify Admin Panel

Shopify Login

Step 2

Open up the theme editor

shopify how to go to edit themes

Step 3

In the top right corner click on actions. A menu will appear and click on Edit Code

Edit Shopify Theme Code

Step 4

Click on Templates > product.liquid

Shopify Product Liquid File

Step 5

Depending on how your theme is built, the recommended place to paste the code us underneath the last include, this should be very near to the top. If you have any headers included, definitely after this line. Due to so many different themes, I can not explain exactly where to place it. However, it should be inserted within the first 10 lines of code. Check that you did not break anything by checking the preview results of your product landing page.

Step 6

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?