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

If you have received errors or warnings regarding missing or invalid data for prices, condition, availability, etc… Then the code below will solve this issue. You will need to both updates Opengraph and JSON-LD. Copy the JSON-LD code and paste it inside your product.liquid file using the latest JSON-LD technology. And replace two lines in your social-meta-tag file. This code supports variants by keeping the first selected product as the first iteration. If you have multiple variants such as colors and the second color is preselected based on the URL. This is done to follow the Google Merchant Center guidelines and while keeping SEO integrity.

This tutorial no longer supports the old Microdata technology as JSON-LD is a lot faster to read for Google Bots.

This code now also supports id’s for Facebook, so you can import product data using structured data.

Important:
It is required you remove all your old structured data coding, to avoid conflicts. If you do not know how to do this, you can ask for my help using the contact form below

From the code example below, edit the value between code settings start and end. Do not change anything else or you might break the functionality. I have highlighted below what you can edit.

  1. By default the code is set up for the US, if you targeting a different country, change the value of fa_product_id_alpha2_code to your target country alpha2. For example, the United Kingdom is GB. You can find the full list here: https://help.shopify.com/en/api/custom-storefronts/storefront-api/reference/enum/countrycode
  2. If you’re in the US, then keep fa_prices_with_decimal_separator to true, if you are in a European country then change it to false.
  3. The following step requires you to check the product id in Google Merchant Center > Products > List. And see what ID you are using.
    1. If it looks like shopify_US_81191654332_1055121650148, then keep fa_product_id set to default
    2. If it looks like 1055121650148 then set the value fa_product_id to product_id
    3. If it looks like the main id 81191654332 then set the value fa_product_id to parent_id
    4. If it looks like a sku then set the value fa_product_id to sku

The Code

<!-- Copyright FeedArmy 2020 Version 3.01 -->
<!-- FeedArmy tutorial found at https://feedarmy.com/kb/shopify-microdata-for-google-shopping/ -->

<!-- CODE SETTINGS START -->
<!-- CODE SETTINGS START -->

<!-- Please add your alpha2 code, you can find it here: https://help.shopify.com/en/api/custom-storefronts/storefront-api/reference/enum/countrycode -->
{% assign fa_product_id_alpha2_code = 'US' %}

<!-- if you have prices such as 1,000.00 set below to true, if you have prices such as 1.000,00 set below to false -->
{% assign fa_prices_with_decimal_separator = true %}

<!-- set your product id values are default, product_id, parent_id, sku-->
{% assign fa_product_id = 'default' %}

<!-- CODE SETTINGS END -->
<!-- CODE SETTINGS END -->

<!-- ==================================== -->
<!-- DO NOT EDIT ANYTHING BELOW THIS LINE -->

{%- if template contains 'product' -%}

{%- assign fa_current_variant = product.selected_or_first_available_variant -%}
{%- assign fa_variant_count = product.variants | size -%}
{%- assign fa_count = 0 -%}

{%- if fa_product_id == 'default' -%}
{%- capture fa_product_id_value -%}shopify_{{ fa_product_id_alpha2_code }}_{{ product.id }}_{{ fa_current_variant.id }}{%- endcapture -%}
{% elsif fa_product_id == 'product_id' %}
{%- capture fa_product_id_value -%}{{ fa_current_variant.id }}{%- endcapture -%}
{% elsif fa_product_id == 'parent_id' %}
{%- capture fa_product_id_value -%}{{product.id }}{%- endcapture -%}
{% elsif fa_product_id == 'sku' %}
{%- capture fa_product_id_value -%}{{ fa_current_variant.sku }}{%- endcapture -%}
{% endif %}

{% if fa_prices_with_decimal_separator == true %}
		{% assign fa_product_price = fa_current_variant.price | money_without_currency | remove:',' %}
{% else %}
		{% assign fa_product_price = fa_current_variant.price | money_without_currency | remove:'.' | replace: ',', '.' %}
{% endif %}


<script type="application/ld+json" data-creator_name="FeedArmy">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "{{ product.title | strip_html | escape }}",
  "url": "{{ shop.url }}{{ product.url }}",
  "sku": "{{fa_product_id_value}}",
  {%- if product.variants.first.barcode.size == 12 -%}
    "gtin12": {{ product.variants.first.barcode }},
  {%- endif -%}
  {%- if product.variants.first.barcode.size == 13 -%}
    "gtin13": {{ product.variants.first.barcode }},
  {%- endif -%}
  {%- if product.variants.first.barcode.size == 14 -%}
    "gtin14": {{ product.variants.first.barcode }},
  {%- endif -%}
    "productID": "{{ product.id }}",
  "brand": {
    "@type": "Thing",
    "name": "{{ product.vendor | escape }}"
  },
  "description": {{ product.description | strip_html | json }},
  "image": "https:{{ product.featured_image.src | img_url: 'grande' }}",
  {%- if product.variants -%}
  {%- assign fa_count = fa_count | plus: 1 -%}
    "offers":
      {
        "@type" : "Offer",
        "priceCurrency": "{{ cart.currency.iso_code }}",
        "price": "{{ fa_product_price }}",
        "itemCondition" : "http://schema.org/NewCondition",
        "availability" : "http://schema.org/{% if fa_current_variant.available %}InStock{% else %}OutOfStock{% endif %}",
        "url" : "{{ shop.url }}{{ fa_current_variant.url }}",
            {%- if fa_current_variant.image -%}
              {% assign variant_image_size = fa_current_variant.image.width | append: 'x' %}
              "image": "https:{{ fa_current_variant.image.src | img_url: variant_image_size }}",
            {%- else -%}
              "image": "https:{{ product.featured_image.src | img_url: 'grande' }}",
            {%- endif -%}
            {%- if fa_current_variant.title != 'Default Title' -%}
              "name" : "{{ product.title | strip_html | escape }} - {{ fa_current_variant.title | escape }}",
            {%- else -%}
              "name" : "{{ product.title | strip_html | escape }}",
            {%- endif -%}
            {% if fa_current_variant.barcode.size == 12 %}
              "gtin12": {{ fa_current_variant.barcode }},
            {%- endif -%}
            {%- if fa_current_variant.barcode.size == 13 -%}
              "gtin13": {{ fa_current_variant.barcode }},
            {%- endif -%}
            {%- if fa_current_variant.barcode.size == 14 -%}
              "gtin14": {{ fa_current_variant.barcode }},
            {%- endif -%}
			         "sku": "{{fa_product_id_value}}",
            {%- if product.description != blank -%}
            "description" : {{ product.description | strip_html | json }},
            {%- endif -%}
          "priceValidUntil": "{{ 'now' | date: '%s' | plus: 31536000 | date: '%Y-%m-%d' | uri_encode | replace:'+','%20' }}"
      }
    {%- if product.variants.size > 1 -%},
      "additionalProperty": [{
        "@type": "PropertyValue",
        "propertyID": "item_group_id",
        "value": "{{ product.id }}"
      }]
      {%- endif -%}
    {%- if product.metafields.spr.reviews -%}
    {%- assign fa_rating = product.metafields.spr.reviews | split: '"reviewCount": "' | last | split: '"' | first | plus: 0 -%}
    {%- if fa_rating > 0 -%}
    ,"aggregateRating": {
     "@type": "AggregateRating",
     "ratingValue": {{ product.metafields.spr.reviews | split: '"ratingValue": "' | last | split: '"' | first | plus: 0 }},
     "ratingCount": {{ product.metafields.spr.reviews | split: '"reviewCount": "' | last | split: '"' | first | plus: 0 }}
    }
    {%- endif -%}
    {%- endif -%}
  {%- endif -%}
}
</script>
{%- endif -%}
<!-- Copyright FeedArmy 2020 Version 3.01 -->

Once the new coding has been added, it will take Google Merchant Center several days before the warnings inside your diagnostic panel disappear. The reason it takes so long is that Google does not check every page every day, but over a span of 30 days.

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

Go to Online Store > Themes

Shopify 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

The recommended place to paste the code is at the top. After installing the code, check that you did not break anything by checking the preview results of your product landing page.

Step 6

Remove the original Shopify review structured data, if you have added the widget in sections/product-template.liquid. This needs to be removed to ensure there are no warnings or errors. Search and replace the below code.

Search for:

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

Replace with:

<div id="shopify-product-reviews" data-id="{{product.id}}"></div>

Step 7

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

And also check Facebook’s data testing tool.

You will see 1 warning

  • The review field is recommended. Please provide a value if available.
    • This can’t be added and should be added by the review app you are using.

The aggregatedReviews in this script only extract data for the default Shopify review system, if you have other review systems such as yotpo, stamped, judgeme, loox, etc… then please contact me at the bottom of this article for a custom installation.

Google Structured Data Testing Result

If you want to succeed in your advertising efforts, why not hire a Google Shopping Specialist!

Fix Opengraph

A newly found issue for a few months now is related to Opengraph. It seems that sometimes Google looks at the Opengraph Price Amount. The issue here is that in most cases it will show the first variant that you created in Shopify. Instead of the selected variant. I did not mention this prior to 30th of April 2021, however Optily a merchant confirmed the existence of this issue and I have now decided to update this article to fix this issue too.

Step 1) Edit Liquid File

Go to:

  1. Open Your Shopify Admin
  2. Click from the left hand menu on Online Store
  3. Select Themes
  4. From the file folder navigate to the folder Snippets
  5. Open social-meta-tags.liquid
Shopify Edit Social Meta Tags Liquid

Step 2) Replace Coding

Near the bottom of the file you will see two lines wrapped inside an if statement that checks if the page is equal to product.

{% if template.name == 'product' %}
  <meta property="og:price:amount" content="{{ product.price | money_without_currency | strip_html }}">
  <meta property="og:price:currency" content="{{ shop.currency }}">
{% endif %}
Social Meta Tags Liquid Pricing Issue

Replace the above code with the below code.

{% if template.name == 'product' %}
  <meta property="og:price:amount" content="{{ fa_product_price }}">
  <meta property="og:price:currency" content="{{ cart.currency.iso_code }}">
{% endif %}

It should look like the image below.

Opengraph edit

For this to work, you do need to install my structured data at the top of the page.

Need Help?

Changelog

3.01
  • 3 days ago Add Added a fix for Opengraph
  • 1 month ago Update Updated the code to allow to easily change the product ID.
  • 4 months ago Fixed Fixed an issue when zero reviews, would add the aggregateRating, this is resolved an no longer the case
  • 7 months ago Fixed Updated first variant availability issue if out of stock