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)

This is for adding microdata for Google Shopping 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 ProductOpenCart 3 Theme Editor Product Twig

You will now see an editor, simply 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 = 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 as 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('$') }}",
    {% else %}"price": "{{ special|trim('$')}}",{% endif %}
	"itemCondition" : "http://schema.org/NewCondition",
	"availability" : "{{ stock }}"
  }
}
</script>

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 as 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('$') }}">
    {% else %}
      <meta itemprop="price" content="{{ special|trim('$') }}">
    {% endif %}
    <meta itemprop="availability" content="{{ stock }}">
    <meta itemprop="itemCondition" itemtype="http://schema.org/OfferItemCondition" content="http://schema.org/NewCondition" />
  </div>
</div>

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.

Google Structured Data Testing Result

Need Help?