Adding Structured Data To Opencart Product Pages

Adding Structured Data To Opencart Product Pages
Article posted on 16 March 2022 in Category OpenCart

Having a website is a great tool to get your business in front of a great deal of customers. With there being so many competitors for most industries, it is always a great idea to do everything you can to make your site stand out from the rest of the crowd.

A great way to do this is to add structured data to your site. Doing so will make your entry on a Google search results page look a lot more detailed and complete and this can help improve buyer confidence in your site.

 

Structured Data Example

 

By default, Opencart doesnt have any structured data incorporated but it is possible to add by either purchasing an extension that adds the functionality or by adding it yourself.  Below is a quick "How To" on adding it yourself and it can be done directly from within the admin portal.

Firstly log into the admin portal, then browse to Design -> Theme Editor.

Next select the Product - > product.twig page template.

Now at the top just after the {{ header }} tag add the following code.

Be sure to replace the "ZAR" currency code with your own store currency code and the 'R' currency symbol with your store currency symbol.

 

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "{{ heading_title }}",
  "image": [
    "{{ popup }}"
    ],
  "description": "{{ description|replace({'"':"'"})|raw }}",
  "sku": "{{ model }}",
  "mpn": "",
  "brand": {
    "@type": "Brand",
    "name": "{{ manufacturer }}"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "{{ rating }}",
    "reviewCount": "{{ reviews|replace({' reviews': ''}) }}"
  },
  "offers": {
    "@type": "Offer",
    "url": "{{ share }}",
    "priceCurrency": "ZAR",
    {% if price %}
    "price": "{{ price|replace({'R': '', ',' : ''}) }}",
    {% else %}
    "price": "{{ special|replace({'R': '', ',' : ''}) }}",
    {% endif %}
    "itemCondition": "http://schema.org/NewCondition",
    {% if stock %}
    "availability": "https://schema.org/InStock"
    {% else %}
    "availability": "https://schema.org/OutOfStock"
    {% endif %}
  }
}
</script>

 

Once added, you can now test if it is working properly by going to the schema.org validator site and pasting in one of the product page URL's for you site and it should show the newly added structured data.

Happy Coding.