How to add a Store Locator or Google Maps module on OpenCart

Fast How-to

Step 1
Go to control panel of your website.

Step 2
Select the “Design” tab from the navigation menu.

Step 3
From the drop-down bar select “Theme editor” tab.

Step 4
Click on the “common” button from “Chose your store” category.

Step 5
Click on the “home.twig” file.

Step 6
Generate store locator code from our SaaS.

Step 7
Paste in generated code under the <head> or <body> section.

Step 8
Save the file.

Step 9
Check the preview.

Step 10
If it works, enjoy your own Opencart store locator extension, in other way check the previous steps

About OpenCart

OpenCart is a simple and user-friendly online store management system which is based on PHP, using a MySQL database and HTML components. OpenCart beside free downloads and updates is offering system, which you can easily use to manage your online store. Also, in the offer you can find a possibility of adding in a simple way, many functions to your website like built-in SEO management or Opencart modules, extensions, and themes, which might make your website more interesting (you can even create your own Opencart store locator). Currently, this open-source system is powering over 340 000 e-commerce entrepreneurs across the world – what proves that this is one of the most popular places for your website.


If you want to try on your own Opencart system, you can try out the demo version without any problems. But now stay with us, and check out our tutorial in which, we are going to create own store locator app for a website based on Opencart.

Opencart Store Locator or Google Maps extension – Installation

The first thing, you will have to do when you are going to create your own Opencart store locator, is generating store locator script. But before you are going to make it, you have to get it somehow. We have prepared for an example, a store locator platform better than Google Maps – Nearplace. It is free, and all you have to do, to get store locator code from our SaaS, is registering. Check out our preview, in which, we are showing how to copy our code.


After generating the store locator app for the website, go to a website based on Opencart and click the “Design” tab from the menu.


When you are going to reach the latest step, you will see the drop-down bar. Select from it, the “Theme editor” tab. It will move you to another website.


At this point, you will have to click on the “Common” category, from “Choose a template” menu. When you are going to make it, you will see files with extension “.twig”. Depending on where you want to place your store locator script, you can choose the file on your own. We have decided, to place it in the document named “home”. When you are going to click on your tab with the selected file, it will open source code of that document. At this point, you will have to paste in the store locator code (which we have generated on the very beginning of this tutorial) under <head> or <body> sections. Remember to save the file.


If you did all previous steps without any mistake, you can check your results at the frontend interface. If it looks like in our preview, then you did a really great job. (remember, if you put store locator script in another file, it can be positioned at some other place).


Summarising, OpenCart is a very helpful online management store, which you can use to create your own friendly store locator. By its really nice looking UI, you are allowed to make your pages much more interesting (and you don’t need to have any knowledge to do it). So if you are looking for the place for your online stores, OpenCart is for you! If you have any questions or you think that, we should add something tot he tutorial – leave us a comment. For sure we are going to answer it.

Get notified of new articles
45,285 marketers are