Edit Theme File
[focus]
Important :
It is recommend you remove all your old structured data coding.
[/focus]
Edit Theme by going to Storefront > My Themes > Inside the current theme, click on Advanced > 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.
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!