OpenCart Tips and Tricks Vol 3

Special thanks to Daniel Kerr, his team and

the OpenCart community.

Copyright © 2017 by iSense Ltd.

All rights reserved. No part of this publication text may be uploaded or posted online without

the prior written permission of iSense Ltd.

For permission requests, get in touch with us on

[email protected]

ISBN: 978-0-9966004-6-0


[*MIHAIL SAVOV | *]Digital Content Specialist

[*TEYA VESELINOVA | *]Developer

[*EVGENI KOLEV | *]Developer


Tips and Tricks

How to Update the PHP Version of a Server Hosting OpenCart

How to Setup URL Redirects in OpenCart (With and Without Extensions)

Understanding How to Use the Order Totals in OpenCart 2.x

How to Enable SEO URLs in OpenCart 2.x (Apache and NGINX Servers)

How to Setup Shipping in OpenCart 2.3.x

How to Make Sure Your Checkout and Autoresponders are Working in OpenCart 2.x

How to Update your Contact Details in OpenCart 2.x

How to Automatically Generate Invoice Numbers in OpenCart 2.x

How to Add Character Count to Just About Any OpenCart 2.x Comments Box

How to Enable and Disable Multiple Products – OpenCart 2.x DIY Coding Tutorial

How to Add Social Media Icons to OpenCart

How to Work with the OpenCart Image Manager

How to Create Successful Marketing Campaigns in OpenCart

E-Commerce Inspiration

14 E-Commerce Websites Showing The Beauty of OpenCart

20 OpenCart Fashion & Clothing Stores and Their Unique Style

Top 15 Most Alluring Slideshows We Found in OpenCart Websites

How to Update the PHP Version of a Server Hosting OpenCart

OpenCart is a PHP-based platform for building an E-Commerce store. The core of your site is built using this programming language and updating it should not be the last of your priorities.

In most cases, the PHP version is only manageable by your hosting provider, but there are web hosts with cPanel access that allow you to modify your own PHP configuration.

If you are running an OpenCart store, the minimum PHP system requirements for the platform are:

  • PHP 5.3+ for OpenCart 2.x
  • PHP 5.2+ for OpenCart 1.5.x

Important Note:

Popular SDKs like those of Facebook, Twitter, etc require PHP 5.4+, so social media integrations will need this to work with your store.

In reality, those versions are far from new but that’s not necessarily a bad thing. Updating your version might be a good idea due to a few reasons.

Why You Might Need to Update Your PHP Version

Currently, the latest stable version of PHP is 7.1.1 (19 Jan 2017). Here are the most common reasons why you might gain from upgrading:

  • If you want to migrate from an older OpenCart version to a new one
  • In case OpenCart upgrades the minimum requirements
  • Newer extensions might conflict with older PHP versions
  • Possible security flaws get fixed in newer PHP versions

However, before you decide to make the upgrade, there are a few things you should know. There are situations where upgrading your PHP version might cause more problems than it solves.

What to Consider Before Updating Your PHP Version

If your current OpenCart store already has multiple extensions, modifications, themes and custom functionality, there might be complications if you update the PHP version without making sure that everything will still work.

If you don’t look into this and update to a version that is not compatible with your site’s modifications, this can partially or completely break your store.

To find out if your OpenCart store will continue working smoothly with your new PHP version, it’s always a good idea to backup your data and test the new version on a test server.

This way, you will not risk doing any damage to your real live store.

If everything is fine with the test server, you can go ahead with the real store.

In general, there should not be any problems with your OpenCart store and a new PHP version. So far, we have not encountered any issues caused by updating PHP versions.

How to Update Your PHP Version

Once you have decided that your OpenCart store is good to go with a newer PHP version, your option is to do it via cPanel. In case you don’t have this option, you need to contact your hosting provider to do the update for you.

Using cPanel to do the update takes just a few clicks. Login to your cPanel account and find the PHP Manager.

You will see the section with the PHP settings you can modify. Updating the version takes literally two clicks. Choose the desired version and click Change.

Congratulations! Your PHP version is now updated and you’re good to go.

How to Setup URL Redirects in OpenCart (With and Without Extensions)

Every website can come at a point where there are a few broken links, some outdated content or removed pages. All of that leaves some links that need to be redirected to working pages with relevant content.

This is an exercise that fixes some holes in your site’s user experience and might even give you a slight ranking improvement. After all, it’s URLs we’re talking about, they matter.

In this post, we will talk about redirecting links in OpenCart. We’ll show you the manual way, which is easy enough for anyone to follow, and how to use an extension to configure your URL redirects.

Finding Your .htaccess File

We’ll show you how to use the .htaccess.txt file that comes with the OpenCart installation. This is a configuration file that is very important to any website.

Let’s say you have just installed OpenCart and you have a functioning store. This installation comes with an htaccess file that needs a minor modification to work.

Rename .htaccess.txt to .htaccess

To find your htaccess file, open your store files (with FileZilla for example). The file should be located in the public_html folder in your store files:

As you see, we’ve already renamed the file so you see how it should look like.

Editing Your .htaccess File

Now to enter the commands in the .htaccess file that will allow us to create the redirects we need.

Permanent website redirect

Let’s try with a permanent redirect of the entire website. To do that, open your .htaccess file and enter the following command on a new line:

Redirect 301 / http://new-domain.com

When you save your .htaccess file and try to enter your original domain, it will redirect you to the domain you have entered in the command.

Temporary website redirect

There are a lot of cases when you need a temporary redirect to a new page, such as limited-time landing pages for promotional purposes. This command lets you temporarily redirect your site to another domain:

Redirect 302 / http://temporary-new-domain.com

Web page redirect

Those commands may give you an idea of how to redirect specific pages of your OpenCart store as well. For example:

Redirect /old_product http://store.com/new_product

Important: You must not enter the entire URL of the page you are redirecting, only its URI (meaning the part after .com).

Entering this will redirect to the new page of your product whenever a user tries to open the old URL.

When you are done with the commands, save your .htaccess file and reupload it to your server.

Basically, that’s how redirects are done using your .htaccess file. It’s a good measure against broken links and other pages leading to 404 (Page Missing) errors, which are looked upon with a frown both from users and search engines.

An Alternative URL Redirect Method

So much for the manual way.

Let’s check out another way, using an OpenCart extension called SEO Backpack.

You can enter and modify your .htaccess file straight from the control panel of the extension, without going through your store files.

If you go to the SEO Backpack Demo, you will notice a tab in the module settings called File Editor.

Let’s say we want to create a new redirect for the Canon camera demo product.

Go to the bottom of the .htaccess Editor and enter:

Redirect /c-cameras/p-canon-eos-5d.html http://google.com

Click on Save Changes and go to the storefront. Try opening the product and see what happens.

You can repeat the same commands that we showed you in the first part of the post to setup the URL redirects you need.

This gives you a clear idea of what redirects do and how to use them to preserve the positions and traffic your old URLs are generating.

Redirect the Smart Way

Redirecting should not be abused and must be implemented with the user experience being the highest priority. The regular flow a user should have with redirects goes like this:

  1. The user opens a link or enters a URL
  2. It leads to a page saying “This page is no longer available. You might wanna try this one”
  3. The redirect takes the user to the new page without giving a 404 error

This gives the user an expected experience and content that is relevant to their initial query. No errors, no disappointments. Google likes this as well.

Possible scenarios where you might need redirects are:

Possible Scenario #1

Let’s say you’ve been running a campaign for a discounted product, but that page is no longer available and the campaign is over. In that case, you can use that page and redirect any incoming traffic to a related product or your store’s home page.

Possible Scenario #2

You have moved your site to a new domain and you want to preserve the traffic and inbound links to the old one. In this case, use the 301 permanent redirect so that the old URL will always lead to your new site. If you ditch the old URL entirely, you will probably lose a lot of incoming traffic, especially if your store has been live for some time and has acquired a sizeable audience.

Possible Scenario #3

If you maintain a blog and have an article with a lot of views that is outdated, you can still use that traffic for a more current purpose. For instance, a new blog post covering the same or similar topic, but with relevant information. You can redirect the URL of the older, outdated blog post to the new one, so readers can get the most up-to-date info on the topic. Another win-win.

Understanding How to Use the Order Totals in OpenCart 2.x

The Order Totals in OpenCart are one of the most important features in your store. They are found within the extensions and their purpose is to calculate the total price of your customers’ orders.

Simple as that. Let’s see how they are used and give a few examples of how they work in the storefront.

First, you need to find them in the admin panel. Go to Extensions > Extensions and click the dropdown with all the modules. You’ll find the Order Totals at the bottom.

This is the Order Totals list. You can choose which ones you want to use and configure them using their own settings.

Our test store had the Sub-Total and Total enabled, but we disabled them to show you how this looks like in the storefront.

We added an iPhone to the cart. As you see, there are no totals apart from the Eco Tax and VAT. The price of the product is shown, but it’s nowhere to be seen among the total costs.

Let’s go back to the admin panel and do some tweaks to see how this will change.

We’ll add the Sub-Total. Simply click edit in the Order Totals list and enable the extension. Click Save and go back to the storefront.

As you see, this has put the Sub-Total in our cart and we can see the product’s cost appearing in the totals.

Let’s do the same with the Total. Edit, enable and click Save.

We now see a more complete look of the order totals in our shopping cart. We see the product cost, the taxes and the entire total of our order.

So, we saw how the Order Totals work and how to set them up.

However, what can you do with the other extensions? Well, you can add additional costs, add taxes, give discounts, offer free shipping and so on.

Let’s give another example. We will set up a fee for orders that have a low cost.

Go back to the Order Totals list and Edit the Low Order Fee.

What we’ve done here is set an Order Total of 100 and a Fee of 25. This means that if a customer makes an order that is below the value of 100, this extension will automatically add a fee of 25 to their cart.

Enable the extension, click Save and go back to the storefront.

In our case with the iPhone, its cost is below $100, so a $25 fee is added to the cart, making its total at $111.00. This is useful for setting a minimum order value for your customers.

How to Enable SEO URLs in OpenCart 2.x (Apache and NGINX Servers)

SEO in OpenCart is one of the starting points when you are building your store. If you know a little about search engine optimization, you will probably know that links are one of the most powerful factors for the ranking of any website.

OpenCart supports SEO-friendly URLs, however they are not enabled by default.

This tutorial will show you how to do that and what needs to be done outside of the admin panel for the SEO URLs to work.

Enable SEO URLs

To enable this setting, you need to log into your admin panel and go to System > Settings > Server. Then you need to select [*Yes *]on the [*Use SEO URLs *]field.

Rename .htaccess File

However, you might notice that this field has a little info box. Hover over the small blue question mark to see it.

It states:

To use SEO URLs, apache module mod-rewrite must be installed and you need to rename the htaccess.txt to .htaccess.


These instructions are only valid for OpenCart stores running on Apache-based servers.

To modify your .htaccess.txt file, you need to access your source files (in FileZilla for example). The screenshot below shows you where the .htaccess file is located.

It has already been renamed from .htaccess.txt to just .htaccess.

This is pretty much it. If you are running on an Apache server, you are all set now and you can skip the NGINX instructions to see how the SEO URLs are configured in your OpenCart categories and products.

NGINX Server Instructions

With NGINX servers, it’s a bit more tricky. There are some server configurations that need to be done. Contact your server administrator for access to your configuration settings. When you access them paste the code sample from line 5 to line 15.

server {



      location / {

       try_files $uri @opencart;


       location @opencart {

      rewrite ^/(.+)$ /index.php?_route_=$1 last;


       location ~* (\.(tpl|ini))$ {

      deny all;



Configuring SEO URLs

To customize your SEO URLs for your products, go to your admin panel, select Catalog > Products, edit a product, go to the Data tab and scroll down until you see the SEO URL field.

You can configure the URL in any way you like.

Important Note:

The SEO URL field should contain unique phrases so you don’t risk ending up with duplicate URLs. OpenCart does not have a duplication checker, which might lead to inaccessible products if you enter the same URL twice.

Your OpenCart categories can also have custom SEO URLs. It’s the same as the products, go to Catalog > Categories, select a category and go to the Data tab to find the same SEO URL field to customize.

You can do the same for all the Information pages in your OpenCart store as well, for an extra SEO boost. Go to Catalog > Information, choose the information page you want to edit and go to the Data tab to find the SEO URL field.

How to Setup Shipping in OpenCart 2.3.x

The magic of online shopping is hugely dependent on shipping and delivery. After all, that’s one of the reasons we love buying online so much – we can purchase something that’s far away and have it delivered to our doorstep!

That’s why shipping plays such a huge role in E-Commerce. Configuring your shipping methods is usually one of the first steps before launching your online store.

This tutorial will show you how to setup your delivery methods in OpenCart so customers can start shopping from the moment your web store is live.

Here are some important facts about E-Commerce shipping you should know before setting up your delivery methods in OpenCart:

  • Free shipping is a desired delivery method by 73% of customers
  • Unexpected or high shipping costs make 44% of customers give up on an order
  • 22% of customers will abandon their order if the shipping cost is mentioned too late

Take notes for your store and make sure that your shipping policy is shown explicitly and as convenient as possible for your customers.

Now, let’s get into the setup.

OpenCart comes packed with 12 native shipping methods in the default installation of the platform. That’s perfectly enough to get you started.

Installing and Enabling the Shipping Methods

In this tutorial, we will show you how to configure 4 delivery methods:

Flat Rate

Free Shipping

Store Pickup

Weight Based

To access the shipping settings, go to your OpenCart admin panel, click on Extensions > Extensions and choose Shipping from the extension type dropdown menu. This will appear:

We will install each of them by clicking on the green Plus icon to the right. After this is done, we will click the Edit icon on each of them and configure their settings.

Flat Rate Shipping

Flat rate shipping is a delivery method that has the same cost for any kind of order. For example, we have set a $5.00 flat rate cost for our shipping method, which means that all the customers who choose this shipping method will have to pay the same cost for their delivery.

Free Shipping

For the free shipping method, you need to choose the sub-total that will need to be reached by customers in order for them to use it. For example, we have set a $50.00 total, which means that when a customer adds products that are equal or above that, will be able to checkout with free shipping.

Pickup from Store

This shipping method is convenient if you have a physical store and your customers find it more convenient to come by and pick up their order instead of getting it delivered. The only thing you need to set here is the Geo Zone.

Weight Based Shipping

The way weight based shipping works is you set the tax class of your choice and define the cost per weight unit.

We’ll use the UK Shipping as example. The helper text on Rates shows that we have to write down the rates as follows – Weight:Cost.

So, if the order weight is 5, and we want the cost to be $10.00, we write down 5:10.00.

That’s pretty much it!

Shipping Methods on Checkout in the Storefront

Let’s begin a test order and see how those shipping methods appear in the checkout process.

We have added a product, filled our personal details and reached Step 4: Delivery Method. If you have followed the instructions correctly, you should see all four shipping methods appearing like so:

Now your customers will be able to choose between the delivery method they prefer and start checking out with their orders.[* *]

How to Make Sure Your Checkout and Autoresponders are Working in OpenCart 2.x

Part of setting up your OpenCart store is making sure that everything is working and ready to start generating real orders. This post will show you how to make sure that all of your autoresponders, contact forms and checkout process are performing flawlessly.

Let’s start with the contact forms and email notifications. The easiest way to test that is to send an email via the contact form in your OpenCart website.

Email Testing

To learn how to setup your OpenCart mailing system, view this tutorial:

Using OpenCart Mail Function and the Difference Between Mail & SMTP

Now, scroll down to the footer of your website and click on Contact Us. Your contact page will be displayed.

Here, customers will be able to send you questions via your contact your form or use your phone number to call you.

Fill out the fields and use a different email address than the one you used to create your store.

What will follow is a confirmation that your enquiry has been successfully sent to the store owner email address.

This is how the enquiry will look like in your inbox. If you receive this message, this means that things are working just fine.

Checkout Testing

To learn how to create a new order from your admin panel, view this tutorial:

How to Manually Add or Modify an OpenCart Order

To test if your checkout is working fine, you should simply make a test order and see if you receive an email confirmation message. Let’s make one together.

Go to your storefront and open a product like we have with the demo iPhone. Add it to the cart. After that, click on Checkout to begin the order confirmation process.

The screenshot below is the beginning of the standard OpenCart checkout process. We will choose Guest Checkout to make this a bit easier.

Step 2 is where you fill out your personal details. Make sure to include a valid email address so you can test if you receive the confirmation message.

When you are done filling out everything, passing through the shipping and payment methods, it’s time to confirm your order.

At this time, you should receive an email that confirms that your order has been placed.

Here is the email I received by my test order. It contains all of the information I have placed, the product I have ordered and the total.

At the bottom, you will see a line saying that you can reply to this email if you have any questions. This means that even though the email is automatic, your response will be seen by the store owner.

How to Update your Contact Details in OpenCart 2.x

One of the first steps when setting up your brand new OpenCart store is to input your contact details. This post will teach you how to do that and show you why it’s so important to list all of the contact details you have before you even launch your store.

There are a few things you need to know about the benefits of contact details.

The easiest way to learn more about the products in an E-Commerce store is to contact the store owner or customer service team for a couple of questions.

The most popular way to do that is either via email, phone or a contact form.

You will probably be missing on a lot of sales if you don’t make it as easy as possible for customers to contact you. Follow the steps below to avoid confusion among customers who want to contact you fast and easy.

Here’s how to add your contact details in OpenCart.

First, go to your admin panel and click on System > Settings.

The next menu you’ll see is the Store list. Click on the edit button on the right to enter the store settings.

This is how the store settings look like. To input your contact details, click the Store tab.

This is where you input general information such as your store name, the owner name, address, geocode, email telephone, fax, logo, opening times and other comments.

The contact details are included in Address, E-Mail, and Telephone. Also, don’t forget to list your opening and closing hours if your business does not offer 24/7 availability.

If you want customers to connect with you over social media, check this tutorial to see how to add your social profiles to OpenCart.

Finally, this is where your contact details are located in the store front by default.

How to Automatically Generate Invoice Numbers in OpenCart 2.x

Generating order invoices is a major part of the management of an online store. Luckily, OpenCart enables you, as a store admin, to generate order invoices with just a few clicks.

However, as you may be aware of, order invoice numbers are not automatically added to the invoice, but they have to be pre-generated.

Currently, this is done in the following way:

As you can see, this process is rather cumbersome and in this tutorial we will demonstrate how you can automate it. So keep on reading if you would like to know how you can save time by adding a simple modification, which will automatically generate invoice number at the moment of order placing.

Step 1:

Start off by opening your favorite text editor (DreamWeaver, Sublime, Notepad, etc.) and pasting the following code:

Generate invoice number automatically









       if (empty($order_info['invoice_no']) || $order_info['invoice_no'] 0) {==

$query = $this->db->query(“SELECT MAX AS invoice_no FROM `” . DB_PREFIX . “order` WHERE invoice_prefix = ‘” . $this->db->escape($order_info[‘invoice_prefix’]) . “’”);

if ($query->row[‘invoice_no’]) {

$invoice_no = (int)$query->row[‘invoice_no’] + 1;

} else {

$invoice_no = 1;


} else {

$invoice_no = $order_info[‘invoice_no’];






db->query(“UPDATE `” . DB_PREFIX . “order` SET order_status_id = ‘” . (int)$order_status_id . “’, date_modified = NOW WHERE order_id = ‘” . (int)$order_id . “’”);]]>


$this->db->query(“UPDATE `” . DB_PREFIX . “order` SET invoice_no = ‘” . (int)$invoice_no . “’, invoice_prefix = ‘” . $this->db->escape($order_info[‘invoice_prefix’]) . “’, order_status_id = ‘” . (int)$order_status_id . “’, date_modified = NOW WHERE order_id = ‘” . (int)$order_id . “’”);






      $data[‘text_invoice_no’] = $language->get(‘text_new_invoice_no’);






      $data[‘invoice_no’] = $invoice_no;



Step 2:

Save the file with the extension .ocmod.xml (e.g. invoice_num_generation.ocmod.xml) and upload it through the extension installer (Admin Panel > Extensions > Extension Installer).

Step 3:

Refresh the modifications and test the feature by first making a test order and then going to your Admin Panel > Sale > Orders > Your test order. Select the order and click on Print Invoice. If the modifications have been applied correctly, you should get the following result without having the need to pre-generate invoice number:

*Please, note that this modification will work only for orders placed after the modification has been applied.

How to Add Character Count to Just About Any OpenCart 2.x Comments Box

This article will show you how to add a character counter to any text area on your OpenCart website. Without further ado let’s see what steps you need to take to implement this.

For demonstration purposes, we will be adding the character counter to the review form text area on the product page.

The implementation of this functionality will require a little HTML5 and JavaScript knowledge.

Let’s begin.

Step #1

The first step of this process is to implement logic which will count the characters at the time of their input. There are numerous ways to do that and below is our implementation:

function countCharacters(textarea, charCounter){

var count = $(‘#‘textarea’‘).val().length;



window.messageLength = $(‘#‘textarea’‘).val().length;

$(‘#‘textarea’‘).keyup(function(e) {

      count = $(this).val().length;

      window.messageLength = $(this).val().length;




This is a simple JavaScript function which takes two values as parameters. The first one “text area” would hold a string value representing the specific text area you want to count characters from. It is recommended to use the “id” HTML attribute of the text field since it’s an unique identifier. The second parameter will represent the field holding the number of typed characters.Here is the sample HTML code we would use in our example.

Characters : 0

Step #2

Now that we have all that we need let’s see how to use it.

To be able to use our JavaScript function across the entire website I would suggest to include it in the common.js file which is loaded in the header of each OpenCart page. Please open your favorite FTP client, connect to your OpenCart site and navigate to catalog->view->javascript. Find the file called common.js and open it with a text editor of your choice.

Scroll down to the bottom of the file and paste the JavaScript snippet.

Save the changes. Now we can access this function from the page templates in the front end of the website.

Step #3

The next step in our example is to open the product page template file. Navigate to catalog->view->theme->yourtheme->template->product->product.tpl. The default review form does not have HTML markup which we can use to output the number of counted characters. Let’s create it. For this purpose, you would need to find where the text area is located in your template file.

Here is a trick.

Open your browser (in this tutorial we are using Google Chrome) and navigate to a product page on your website. Hit F12 on your keyboard. Chrome Dev Tools console will open. Scroll down to your review form and right click on it. The review form will be highlighted as well as the specific line where its markup is.

Find the id attribute and copy it. Once you do that, you can return to your text editor and use its search tool to find the form by pasting the value of the form id. Take note of this value since we will be using it later as the first parameter of our JavaScript function.

Now take the HTML snippet we have provided and paste it below the review form text area.

Note the id attribute of the span element we have just pasted. We will use that as the second parameter of our JavaScript function. After saving the template file this is how your product page will look like.

Great! We have a place to output the number of entered characters.

The last step is to initialize the JavaScript function we created earlier. To do so, you would need to insert one last line of code in your product page template. Navigate to the bottom of the product.tpl file and paste this line of code:

countCharacters(‘input-review’,‘character-counter’); right before the last closing tag.

To avoid any complications, I will elaborate a bit more on the last step.

The function we defined earlier was called countCharacters(). By pasting the last line of code we initialize it and pass the two parameters it needs so it can output the number of entered characters. During the definition, we specified two parameters text area and charCount. When we initialize this function, we pass two string values to it ‘input-review’ and ‘‘character-counter’ which represent the text area we are targeting and the character counter element.

Let’s see what are the results of our efforts. Save the file and open a product page. Scroll down to the review from and start typing.


How to Enable and Disable Multiple Products – OpenCart 2.x DIY Coding Tutorial

The work of an administrator in an Ecommerce store is pretty time consuming. Nobody knows that better than us. And since iSenseLabs is all about making the life of OpenCart users easier, we decided to create a quick coding tutorial that will add an extra feature to your store. It’s free, it’s easy to implement, and it can save tons of time when editing multiple products.

Do you need to enable or disable products in your store? Doing that separately for each product can be a huge time investment. However, by implementing this piece of code in OpenCart, you will notice an immediate change – two wild Enable & Disable buttons will suddenly appear in your admin panel’s product management field.

Let’s see how this feature is implemented.

If you have a favorite text editor (Brackets, Notepad, Notepad ++, etc.), feel free to open it and paste the code sample.

Since the code sample is more than 200 lines, we decided to turn it into a file and share it with a link.

Click here to get the code:


When you’re done, remember to save the file with its name ending in .ocmod.xml.

After that, upload it in your OpenCart store using the Extension Installer (Admin Panel > Extensions > Extension Installer).

Once you refresh the modifications, the brand new feature will be ready for testing – go to Catalog > Products in your admin panel.

The two buttons should be waiting for you there.

You are ready to test them out. Select a few products you want to disable and hide from the front end. After that, click the Disable button.

Works like a charm.

Repeat the same process and enable them again to bring them back to the front end.

Important note: This feature has been tested and working on OpenCart versions 2.1.x, 2.2.x and 2.3.x.

How to Add Social Media Icons to OpenCart

Today, we will be focusing on a cool Social Media feature, which is social media buttons. Social media buttons make your site easier to explore, provide an unfiltered mirror of what your users think about your brand and how you are interacting with them. If all done right social media will bring your Ecommerce store ahead.

It all starts with a button.

In this tutorial, we will show you how to integrate icons and buttons for easy social sharing in your OpenCart website.

In this tutorial, we will show you how to integrate icons and buttons for easy social sharing in your OpenCart website.

  1. Step: Choose Your Icons

The first thing you have to do is pick the icons that you like the most and think that will fit your site’s design best. Make a simple Google search for social media icons and browse around. We found these and will use them for the examples in this post.

Once you pick the icons you favor the most, it’s time to upload them to your server.

We chose to download the icons for Facebook and Twitter. After that, we created a new folder called social_icons on the server in the main image directory. We uploaded the images there.

This means that the proper route to the images is:

www.YourDomain.com/image/social_icons/facebook.png &


  1. Step: Adding a Module to OpenCart

This step will not require you to buy or download any modules. You can do it all manually, with some samples of code that we will show you below.

Go to the admin panel in your OpenCart store. Go to Extensions > Modules and find HTML Content. Install it and click Edit.

This is how the field looks like.

Use the code sample below. Note that we chose to put our icons in the center and edit their dimensions with width and height. You can adjust those options however you want later. We also used padding to separate the icons from the slider.

<!—– Twitter Code End –→

Important: The function should contain a link to the social media profile you want to integrate in the button.

This is how the code will look in the editor:

When you are finished editing the HTML Content Module, Enable it and click Save.

To show the HTML Content Module on the front of your OpenCart shop, you have to assign it to a layout.

Let’s see an example. Go to Design > Layouts. Choose your layout and click Edit.

We will enable our social media icons on the Home and Product layouts.

Once you are here, add a new module and find your HTML Content. Select it, choose its position and give it a sort order. The sort order will determine where the social media icons will be placed on your site.

This is how the final result looks like.

Voila. The icons are now in place and visible. Of course, you might want to position them elsewhere on the site which you can do with a bit of CSS.

  1. Step: Consistency Across Platforms is a Must

Social icons are a great opportunity to extend your visual branding consistency. We say consistency because even the smallest design flaws can cause interruption. Flaws like the colors of the social icons not matching the colors in your website or the way you have personalized your social media profile.

Important Note: Please check with the Branding Assets of each social media platform. These are guidelines for how to and how not to use their logos in the social icons. For example – https://about.twitter.com/company/brand-assets.

How to Work with the OpenCart Image Manager

Uploading images in OpenCart is very easy and accessible from multiple places. You can find and open the image manager on every admin panel section where images can be added.

We’ll give an example with the category images.

Let’s access the admin panel and open Catalog > Categories > Any Category.

Click the Data tab.

You’ll find the Image section below the SEO URL field.

Click on it and click the Edit button to open the Image Manager.

The Delete button removes the selected image (if present).

This is how the OpenCart Image Manager looks like. It’s pretty straightforward to use. Let’s explain the buttons.

Parent – go back to previous folder.

Refresh – refresh images.

Upload – select image/s to upload from your device.

New folder – create new image folder.

Delete – delete selected image/s.

The search field lets you find images by their names. It’s really helpful if your image manager is cluttered.

Let’s upload an image for our Cameras category.

When your image is uploaded in the Image Manager, simply click to select it.

After your image is selected, click the Save button.

We have uploaded a test image so you can see how the manager works.

Let’s go to the storefront and see the results.

The image has been assigned as a main category image.

You might immediately ask “How do I change the image dimensions?” Let’s explain this as well, since you will need to know when uploading images in various sections in your OpenCart store.

Can I Change the Image Sizes in OpenCart?

You can modify the default image sizes in OpenCart by accessing your Theme Settings. Go to Extensions > Extensions > Themes.

Click the Edit button on your theme.

You will access your theme settings. Scroll a bit down to find the Image settings where you can configure the default image size for:

Category Image

Product Image Thumb

Product Image Popup

Product Image List

Additional Product

Related Product

Compare Image

Wish List Image

Cart Image

Store Image

It’s important to remember that these image dimensions are different for all themes. What you see in the screenshot here are the image dimensions (in pixels) of the default OpenCart theme.

Can I Upload Multiple Images?

For uploading more than one or two images, it’s better to do that via FTP. Not that you can’t do it with the image manager, it’s just simpler and faster to do it via your server. And it’s easier to organize them too.

For our example, we’ll use FileZilla. Open the public_html and find the image folder.

Open the folder and you can upload all of the images you want here. You can sort them in separate folders and arrange them in any way that is suitable for you.

When you are done, the images will still be present in the Image Manager so you can simply select the ones you want to assign to your OpenCart categories, products, etc.

Can I upload all types of files?

Actually, you can set that by yourself. It’s in the store settings. Go to System > Settings > Edit and choose the Server tab.

Scroll down and you’ll find the Uploads field.

You can set the Maximum size of the uploaded files in bytes, the allowed file extensions and the mime types.

Click Save after you make your changes and you’re all done.

How to Create Successful Marketing Campaigns in OpenCart

If you are reading this tutorial, you have probably already setup your OpenCart site. Now it’s time to start making some sales, right? Let’s see what the platform has to offer with the built-in marketing campaigns.

You can create and manage marketing campaigns from your admin panel in OpenCart.

This is possible since OpenCart 2.0.x introduced the Marketing Tracking section, which we will review in this post.

What’s a Marketing Campaign?

A marketing campaign is an organized effort to promote and sell a product or service.

In other words – advertising your products via different media channels to acquire more customers. In our case, we’ll focus on creating an image advertisement on your OpenCart store’s home page.

We’ll give a simple example, but you can use any marketing banners and materials you can come up with.

Q: What’s the difference with any other ordinary banner?

A: With the marketing campaigns in OpenCart, you can track the traffic, views and orders that came from clicking on the banner you have set.

How to Create a Marketing Campaign

Open your OpenCart admin panel and click on the Marketing menu. You will see a Marketing sub-menu, which leads you to the Marketing Tracking section.

Hit the Add New button to create your first campaign.

After entering a name and description for the campaign, you will see the auto-generated Tracking Code and examples how you should apply it to your links.

After you click Save, your tracking code is ready to be put to work. You will see the campaign appearing in the Marketing Tracking List where you will be able to follow the number of clicks and orders each campaign is generating.

But to get those numbers going, you need to show something on the storefront. Let’s explain how to do that.

Displaying the Campaign on the Storefront

First of all, you need to create a new HTML Content module. This is where you will add the image and links to the products you want to promote.

Find the HTML Content module in the Extensions > Extensions > Modules. Click on Add New to create and modify it.

The creation process of a custom HTML content module is fairly straightforward. Give it a Module Name and Heading Title (the one that will appear in the storefront) and enable its Status.

Our example campaign will be called Summer Sale!

In the description, open the code view and use the template below for the product and image you have selected for your campaign.

Pay attention to the highlighted part where you need to paste the tracking code from the marketing campaign you just created.

When your HTML content module is created, it’s time to assign it to the layout you want to display the banner.

In our case, we’ll show it on the homepage. Go to Design > Layouts > Choose layout and assign the module to your preferred position.

Here’s how it looks on our end:

Don’t forget to click Save again and go to your storefront to view how things look.

Our example looks fairly simple, but you can imagine how beautiful the banner you create for your campaign will look.

Now, whenever a customer clicks or purchases the iPhone from this banner, you will notice it in the Marketing Tracking section.

Marketing Campaign Statistics

Here is how our current campaign is performing.

When you create multiple campaigns and assign them to different layouts, you can track and compare their effectiveness.

This will help you optimize the banners and the way you run your campaigns.

14 E-Commerce Websites Showing The Beauty of OpenCart

The last post we did on captivating OpenCart websites had the interest of a lot of our readers. Since the platform you choose for your E-Commerce store determines the costs, flexibility and capabilities of your online business, we thought it would be nice to make another collection that depicts the strong sides of OpenCart.

OpenCart is becoming a popular choice for entrepreneurs that want to launch their startup or run a heavy-duty online business with thousands of products and customers worldwide. The advantages that the E-Commerce platform has are the open-source code and the fact that is completely free to download and install.

We’ll get out of the way now, so you can enjoy the awesomeness that the free E-Commerce platform offers…

1 Wooden Posters

2 The Baby Boutique

3 Venamar

4 Spiruella

5 Divadolly

6 Cat and the Fiddle


8 Echo Deco

9 Choco Concept

10 Simply Pretty Weddings

11 HD Frequency

12 Tricobino

13 Car Covers Universe


20 OpenCart Fashion & Clothing Stores and Their Unique Style

The clothing and fashion sector is one of the most competitive industries on the E-Commerce scene worldwide. FashionUnited have some interesting statistics on the worldwide volumes that the fashion industry generates:

The global apparel market is valued at 3 trillion dollars, 3,000 billion, and accounts for 2 percent of the world’s Gross Domestic Product (GDP).

  • Womenswear industry value: $621 billion
  • Menswear industry value: $402 billion
  • Luxury goods market value: $339.4 billion
  • Childrenswear industry value: $186 billion
  • Sports footwear market value: $90.4 billion
  • Bridalwear industry value: $57 billion

These numbers are staggering, but it’s not that strange when you think of it. Clothing is something that literally everybody needs, so demand is naturally high. And it always will be.

OpenCart is free and costs less in terms of resources and development to run smoothly. Both new entrepreneurs and experienced online merchants will know how much this affects the bottom line of a business. Especially when you are trading in an industry with heavy competition.

In this blog post, we will show you why OpenCart is a smart choice to go with if you’re looking for an E-Commerce platform to kickstart your clothing store.

You will see 20 awesome examples of fashion stores that are running on the open-source shopping cart.

1 T-Shit Store

2 Soffia B

3 TyTrika



6 Tweejoy

7 Rubirosa

8 T-Shirt Box

9 Chirsy

10 Kick Game

11 David Filip

12 Tuga Force

13 Hive Swimwear

14 Memories Boutique

15 My Dress Line

16 The Jacket Maker

17 Paul Byron Shoes

18 Twinkie Print

19 6 Dollar Shirts

20 Make Your Shoes


Top 15 Most Alluring Slideshows We Found in OpenCart Websites

What’s the quickest and most attractive way to promote your products to your store visitors the second they open your E-Commerce website? You guessed it – the slider on your home page. You can showcase your greatest products without making the customer scroll or click anywhere else.

The slider in your store is quite a significant design element. It lets you showcase your most popular products or shout out about what’s new with you. Featuring a CTA button leading to the product page is a nice finishing touch so customers who are interested in what you are offering can instantly take action.

In this post, we will show you 15 OpenCart shops that know how to create a captivating slideshow and entice viewers to dig deeper into their website.

There are a few different ways you can use the slider in your OpenCart store. Depending on your design and theme, you can go with a full width slider or one with predefined sizes. You will see examples with both types of slideshows in the websites below.

Without further ado, here is our compilation…

1 Langdon Hall

This store has three different images on their slideshow, each leading to a different product or page in their website. High-res images, a simple CTA and a brief intro to their products. Just right.

2 Treasure Garden

This store presents their products in 5 large and beautiful images accompanied by a short marketing message and a CTA button. What’s interesting is they are showcasing their products in beautiful real life scenarios.

3 Ciaté London

A cosmetics store surely needs an alluring slider and this website does not disappoint. Their high quality graphics lead to the different makeup collections and products throughout the site.

4 Bijoux Beads

Bijoux Beads rely on a simple slider showcasing a few of their products that are themed for the Autumn season. As you see, this is not a full-width slider unlike the previous examples.

5 Phoenix V

The slideshow in this fashion store only has two images of a model showcasing two of their products. High-res, full width images – clean and simple. The slides change automatically and there are no arrows to change them yourself.

6 Louie

The slideshow here is comprised of 5 beautiful images of the owners, their products and their canine friend who adds to the unique image of the business. This is another example of using a fixed-width slideshow where the images do not go end to end.

7 Memories Boutique

The slider in this boutique is made of animated graphics with models presenting the dress collections in the store. An elegant CTA button leads you to the products from each image. The important part here is that this slider has a 3D appearance, which stands out right away.

8 Rosa Living

Rosa Living use their slideshow to announce their sales and promotions. They have designed 5 separate images showing different items from new collections or featured products.


This store has bet on three large images of male models showcasing some of the items on their clothing line. This focuses the viewer on the products themselves and sparks curiosity for checking out more information around their site. There’s no CTA button and the accent is on the images, which are almost full web page size.

10 180 Nutrition

High-quality, full width images with a motivational and informational message, as well as a CTA button to their products is what the guys over at 180 Nutrition are using to entice customers to start shopping.

11 Venamar

Venamar have taken a slightly different approach for their slider. It’s a custom slideshow with 4 separate images that provide links to some of their collections. They also use them to announce discounts. Quality work.

12 Crafty Divas

This store has a slideshow that does not take the whole screen, but one that is rather short and sweet. Two beautiful images with an inspirational message and a categories section inviting you to browse their products.

13 Craftman

This store has put a lot of work in customizing their slideshow and making it unique. Three separate sections, videos upon hovering, product details and marketing messages slide up and down to supplement each section, a class act, through and through.

14 Rococo Online

This online store does not use their slider for promotional purposes or linking to their products and collections. It just serves as a beautiful welcome to their site, so you are not distracted too much from browsing around.

15 Ročne Ure

Another store with quite a distinctive slideshow, where each image has its own colored filter. They have picked the perfect fonts, colors and sizes for their marketing messages and a smooth presentation for each collection.

Final words

We hope you liked the stores we have picked out and found them inspirational. We always encourage OpenCart store owners to keep working on their websites and turn their weak spots into selling points. The slider in your store is one of the design elements that can have a serious impact on your sales, so learn from these examples and take notes for your site.

OpenCart Tips and Tricks Vol 3

OpenCart Tips and Tricks is a series of books that help you get started with the OpenCart E-Commerce platform. The book features basic set up tutorials, tweaks with samples of code, security and developer oriented guides. - 13 beginner OpenCart 2.0.x tutorials on how to get you started with the system - Step-by-step do it yourself guides that will teach you how to implement changes to your own OpenCart store - DIY troubleshooting of common OpenCart problems - E-Commerce inspiration with creative examples to help you get ahead of the competition

  • Author: iSenseLabs
  • Published: 2017-05-31 12:20:15
  • Words: 8610
OpenCart Tips and Tricks Vol 3 OpenCart Tips and Tricks Vol 3