Add Structured Data To Opencart 3.x For Google Shopping (JSON-LD & Microdata)

Add Structured Data To Opencart 3.x For Google Shopping (JSON-LD & Microdata)

How to add structured data for Google Merchant Center to OpenCart 3, click here for OpenCart 1.5x and 2.x

Login to OpenCart

Login to your admin panel of OpenCart and navigate to Design > Theme Editor

OpenCart 3 Theme Editor

Theme Editor

From your Choose a template, go to product > product.twig

OpenCart 3 Theme Editor Product
OpenCart 3 Theme Editor Product Twig

You will now see an editor, paste the code below under {{ header }}, before you do make sure to follow the short edit instructions.

JSON LD

Make sure you change the values highlighted in capitals.

  • REPLACE_WITH_CURRENCY_CODE
  • REPLACE_WITH_CURRENCY_SYMBOL (twice)

Choose the code where the price decimal matches yours. (US or UK = DOT, Continental Europe = Comma)

Prices with dot decimal

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
    "offers": {
    "@type": "Offer",
	"name": "{{ heading_title }}",
    "priceCurrency": "REPLACE_WITH_CURRENCY_CODE",
	{% if price %}"price": "{{ price|trim('REPLACE_WITH_CURRENCY_SYMBOL') }}",
    {% else %}"price": "{{ special|trim('REPLACE_WITH_CURRENCY_SYMBOL')}}",{% endif %}
	"itemCondition" : "http://schema.org/NewCondition",
	"availability" : "{{ stock }}"
  }
}
</script>

You should see the code below when you have changed the currency code and symbol.

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
    "offers": {
    "@type": "Offer",
	"name": "{{ heading_title }}",
    "priceCurrency": "EUR",
	{% if price %}"price": "{{ price|trim('

Prices with comma decimal

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
    "offers": {
    "@type": "Offer",
	"name": "{{ heading_title }}",
    "priceCurrency": "REPLACE_WITH_CURRENCY_CODE",
	{% if price %}"price": "{{ price|replace({'REPLACE_WITH_CURRENCY_SYMBOL': '', ',' : '.'}) }}",
    {% else %}"price": "{{ special|replace({'REPLACE_WITH_CURRENCY_SYMBOL': '', ',' : '.'}) }}",{% endif %}
	"itemCondition" : "http://schema.org/NewCondition",
	"availability" : "{{ stock }}"
  }
}
</script>

You should see the code below when you have changed the currency code and symbol.

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
    "offers": {
    "@type": "Offer",
	"name": "{{ heading_title }}",
    "priceCurrency": "EUR",
	{% if price %}"price": "{{ price|replace({'€': '', ',' : '.'}) }}",
    {% else %}"price": "{{ special|replace({'€': '', ',' : '.'}) }}",{% endif %}
	"itemCondition" : "http://schema.org/NewCondition",
	"availability" : "{{ stock }}"
  }
}
</script>

HTML

Make sure you change the values highlighted in capitals.

  • REPLACE_WITH_CURRENCY_CODE
  • REPLACE_WITH_CURRENCY_SYMBOL (twice)

Choose the code where the price decimal matches yours. (US = DOT, Continental Europe = Comma)

Prices with dot decimal

<div itemscope itemtype="http://schema.org/Product">
  <meta itemprop="name" content="{{ heading_title }}" />
  <div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
    <meta itemprop="priceCurrency" content="REPLACE_WITH_CURRENCY_CODE">
    {% if price %}
      <meta itemprop="price" content="{{ price|trim('REPLACE_WITH_CURRENCY_SYMBOL') }}">
    {% else %}
      <meta itemprop="price" content="{{ special|trim('REPLACE_WITH_CURRENCY_SYMBOL') }}">
    {% endif %}
    <meta itemprop="availability" content="{{ stock }}">
    <meta itemprop="itemCondition" itemtype="http://schema.org/OfferItemCondition" content="http://schema.org/NewCondition" />
  </div>
</div>

If your in the US, your code should look like the example below.

<div itemscope itemtype="http://schema.org/Product">
  <meta itemprop="name" content="{{ heading_title }}" />
  <div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
    <meta itemprop="priceCurrency" content="USD">
    {% if price %}
      <meta itemprop="price" content="{{ price|trim('

Prices with comma decimal

<div itemscope itemtype="http://schema.org/Product">
  <meta itemprop="name" content="{{ heading_title }}" />
  <div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
    <meta itemprop="priceCurrency" content="REPLACE_WITH_CURRENCY_CODE">
    {% if price %}
	  <meta itemprop="price" content="{{ price|replace({'REPLACE_WITH_CURRENCY_SYMBOL': '', ',' : '.'}) }}">
    {% else %}
	  <meta itemprop="price" content="{{ special|replace({'REPLACE_WITH_CURRENCY_SYMBOL': '', ',' : '.'}) }}">
    {% endif %}
    <meta itemprop="availability" content="{{ stock }}">
    <meta itemprop="itemCondition" itemtype="http://schema.org/OfferItemCondition" content="http://schema.org/NewCondition" />
  </div>
</div>

If your in Europe, your code should look like the example below.

<div itemscope itemtype="http://schema.org/Product">
  <meta itemprop="name" content="{{ heading_title }}" />
  <div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
    <meta itemprop="priceCurrency" content="REPLACE_WITH_CURRENCY_CODE">
    {% if price %}
	  <meta itemprop="price" content="{{ price|replace({'€': '', ',' : '.'}) }}">
    {% else %}
	  <meta itemprop="price" content="{{ special|replace({'€': '', ',' : '.'}) }}">
    {% endif %}
    <meta itemprop="availability" content="{{ stock }}">
    <meta itemprop="itemCondition" itemtype="http://schema.org/OfferItemCondition" content="http://schema.org/NewCondition" />
  </div>
</div>

You should see something like the image below

OpenCart 3 Theme Editor Example

Now save and check the landing page for any errors.

Testing the results

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

Please note the data testing tool, only checks for syntax errors, not for policy checks. However, if you add the code as is, then you are withing Google Shopping policy requirements.

Subscribe
Notify of
guest
14 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Angel
Angel
2 years ago

ThanK You!!!

Mason Sklut
Mason Sklut
3 years ago

I added the HTML to my product.twig under {{ header }}, but I’m unable to verify using the Google Structured Data Testing Tool. Any suggestions? https://uploads.disquscdn.c

Kashif
Kashif
3 years ago

“availability” : “{{ stock }}” give error in Google structured data test, have to change it to “availability” : “http://schema.org/InStock”. Same for “name”: “{{ heading_title }}”, How to fix that? you can run a test on https://mitrecyclers.com/alcatel-pixi-4-9001x-8gb-unlocked-grade-ab

Sergiy Novosad
Sergiy Novosad
4 years ago

Availability is translated and become mistaken, no review.

Jonathan Parker
Jonathan Parker
5 years ago

Hi,Using JSON-LD OC 3 & after running through the testing tool I get : A value for the name field is required.Any suggestions/help appreciated.Regards.Dab

Aiko
Aiko
6 years ago

Living in the Netherlands we use a decimal comma instead of a decimal point. A comma is not allowed in microdata so I made a small change to the code to get no errors and to replace the euro symbol and the comma:

It works great now. Thanks for posting the code!

Emmanuel Flossie
Reply to  Aiko
6 years ago

Hi Aiko, that’s exactly right, thank you for posting your code, I will soon update the article to cover both continental Europe and US. Thanks!

Cotswold Tours/Taxis
Cotswold Tours/Taxis
6 years ago

Nice updated Article. Shouldn’t the article be based on JSON-LD for OpenCart 3?

Emmanuel Flossie
Reply to  Cotswold Tours/Taxis
6 years ago

If you want to use JSON-LD you can, at the time of writing I have not yet changed this. Currently you can use both HTML or JSON_LD

Emmanuel Flossie
Reply to  Cotswold Tours/Taxis
6 years ago

Hello, I have updated the article both include JSON LD and HTML, so you can choose whichever you want to include. Hope it helps.

14
0
Would love your thoughts, please comment.x
()
x