How QR Codes Improve Your OpenCart Store Experience

Invented in 1994 to track vehicle components during manufacturing, QR codes have expanded their potential use into a much wider context. The codes are currently used in commercial applications for tracking products and offering convenience for smartphone users, allowing multiple functionalities for mobile devices.

Let’s start by briefly explaining what QR (Quick Response) codes are, what are they used for and how do we implement them in our OpenCart store.

What is a QR code?

You are already familiar with the barcodes on the packaging of almost any kind of product. The QR codes are similar to barcodes, but the primary difference is the QR code’s ability to store much more data. Therefore, they have multiple other applications.

What are they used for?

Similar to the barcodes, a QR code is scanned by a device (which can even be a smartphone that has an appropriate app installed). The data in the QR code is instantly extracted and used for all the purposes that barcodes are used for, as well as for some custom purposes. To name a few, these codes are currently used for commercial tracking of products, labelling and marketing, entertainment, transport ticketing, etc.

Online applications

QR codes can be used for connecting to Wi-Fi networks, acquiring coupons, purchasing items, viewing videos, advertising products, processing orders, etc. In the web perspective, they can be used to send emails, provide links to URL’s, send an audience to a certain website, start phone calls, or send short messages.

Implementations in OpenCart

There are many different methods of using QR codes in a website. For OpenCart, you can find multiple extensions that require a pretty straightforward installation. Let’s take this one for example:

Art QR Code v2.1

The cool thing here, besides the color adjustments and rotation you can make to your QR code, is that you can also embed the logo of your company as a small image inside the QR code. Very useful for branding purposes.

Don’t forget about being mobile

The use of QR codes is very mobile-friendly. For example, if there is a code that is part of some printed media like a magazine, you can scan it with your smartphone’s camera, and the URL encoded in the QR code will be instantly opened in your phone’s browser without you having to type in the address.

Customize your Contact page

Why make your customers dial numbers and type email addresses when they can simply contact you the Homer way by scanning a QR code? This way, they can send you an email or an SMS message on their smartphone, which is much more convenient for them. Another great advantage!

File downloading

PDFs, documents, audio and video files can be linked to a QR code that can be used to download them for users who are on-the-go, and want quick access to a file, map or other types of content.

App downloading

The QR code can link to the app as well as the appropriate store based on the device you are using. For example, if you have developed an app that allows your users to view the content you publish easily with a single tap on an icon, this is a great way to offer convenience for your mobile users.

How to implement QR codes in your OpenCart store

The process of generating a QR code is very simple and intuitive. Let’s take this generator for example:

This generator is quite flexible and offers a variety of options, for you to implement in your website, such as URL, free text, email, phone number, SMS, etc.

For our example, we will use the phone number option.

After you input the details, you have two options: Download and Embed. Let’s use the Embed option and see what happens.

You will see that you have quite a few parameters for customizing your QR code, like setting its size, background, etc. Let’s take the HTML code and paste it into our store’s source code.

Here is a simple implementation of QR codes. We will embed the code we just generated into our website's footer:

1. Connect to your server using your favourite FTP client.

2. Open the root directory of your site and navigate to Catalog > View > Theme > Yourtheme > Common > Footer.tpl

3. Find this piece of code that says:

<li><a href="<?php echo $sitemap; ?>"><?php echo $text_sitemap; ?></a></li>

4. On the next line you can paste this piece of code:

<span>Call us at: </span>
<img src=";bgcolor=FFFFFF&amp;data=tel%3A%2...;" alt="qr code" style="display: inherit;"/>

You can replace the img src="" with the generated QR code.

This is how the final results will look like. You will have a QR code in your footer, which will act as a direct connection to a phone number, which you will dial automatically upon scanning it with your smartphone.


Using QR codes offers an extra level of convenience that you can provide for your customers, and most of all your mobile users who are looking for an easier way to connect on-the-go. However, this does not mean that you should overdo it and put those codes all over your website. That way you risk making them more of a distraction, rather than an actual benefit.

Use QR codes moderately. Since the use of QR codes is not as viral as it was expected to be, you should outweigh the effort you put into implementing them into your website and the actual benefit you see for your users, and for yourself. We hope this information was useful and practical enough for you to get started in finding the right use for QR codes in your web store. Leave us a comment below for any questions you might have!

Join 11,000+ subscribers receiving actionable E-commerce advice

* Unsubscribe any time

Trending blogs

comments powered by Disqus