Tweaking OpenCart 1.5 Layouts

The first thing most of us do after installing OpenCart is modify the store design to meet the requirements of our ecommerce project. If you’re like me, you look for a theme design that is close to what you want the store to be. This is usually based on the type of products sold, such as apparel, electronics, or books.

Yet, despite even the best looking themes, I end up modifying certain design elements to make the site uniquely relevant to the store I’m building. I’ve even taken themes for other platforms and melded them into OpenCart because the theme was the most appropriate I could find. But I still made a few alterations to match the design to the branding style of the client.

The OpenCart Series

This article is the second installment in a series, where I explore the new features and customization techniques of OpenCart 1.5, the latest version. The first installment — “Meet OpenCart 1.5″ — we published last month.

In this month’s article, I will (a) create a new, revised theme instance, and (b) alter the footer area of the site. In upcoming installments, I will do more to change the new store’s look and feel.

For this article, I installed a clean, new copy of OpenCart 1.5.0.5 on my company’s website. I will tweak this clean design to produce the changes that I’ll describe.

Locate the Themes

First, let’s find the files we will likely alter when we tweak the design. Using your FTP client program, navigate from your server root folder to catalog/view/theme. Here, you will see one folder: “default.” This contains all the files of the default theme.

If you want to keep this theme as is — which may be a good idea if you want to return to the original theme — make a copy of this theme. In this example, I named it “MyTheme.”

Create custom themes in the catalog/view/theme/ folder.

To see the changes as I modify this new theme, log into your OpenCart Admin (e.g., www.storedomain.com/admin) and navigate to System > Settings. Click the Edit link under the Action column on the right.

Click the Store tab and change the Template choice to “MyTheme.” (One of the incongruities of OpenCart is that themes are called “templates” in the backend. For our purposes, we will use “theme” to describe a complete design.) Click “Save” to commit your change.

Change the selected theme in the Store tab.

You probably noticed that when you switched themes, the theme snapshot disappeared. This image of the theme is, for some reason, not kept with the theme itself, but in the /images/ folder of your installation. It is a .png file with the same name as the theme.

Once we finish altering our design in this series, we will create a new snapshot of our changes, to have a nice snapshot of the design.

Explore the Theme File Structure

Let’s return to our folders and files underneath MyTheme/. There are three top-level folders.

Image. This folder contains, as you expect, images for the theme design. It does not contain images of products or other common site images.
Stylesheet. All CSS stylesheets for the theme are kept in this folder.
Template. The files in this folder are the PHP files that are called and combined by OpenCart to create the final rendered pages.

Changing the Footer

One of the first things I do to with a new site is to change the footer to include our branding elements. After all, as the site-engineering firm, we want to spread the word, as most developers will do.

To change the footer content, navigate to /catalog/view/theme/MyTheme/template/common/.

Find footer.tpl in /catalog/view/theme/MyTheme/template/common/.

Open the footer.tpl file in your favorite text editor. I prefer the free TextWrangler or the inexpensive Coda — I’m a Mac user. Now, here’s where it gets interesting. If you look at this file, you’ll see that the default footer is laid out in four columns, using div tags, followed by:

<div id=”powered”><?php echo $powered; ?></div>

<div id=”powered”><?php echo $powered; ?></div>

This is the final section of your pages that shows the Powered by OpenCart notice.

The default "Powered by OpenCart" notice.

As stated in the comments of this file, OpenCart requests a small donation if you remove the OpenCart reference. It’s not required, but it wouldn’t hurt to help support further development of OpenCart. You can, of course, simply hard-code your change here, replacing the PHP statement with whatever you wish, such as:

<div id=”powered”>
Powered by <a href=”http://www.novusweb.com” target=”_blank” title=”Powered by novusweb®”><strong>novusweb®</strong></a>
</div>

<div id=”powered”>
Powered by <a href=”http://www.novusweb.com” target=”_blank” title=”Powered by novusweb®”><strong>novusweb&reg;</strong></a>
</div>

However, to ensure your alterations exist regardless of which theme is selected, you can modify the actual site code. If you’re familiar with PHP, you’ll realize that the variable $powered represents the information that is shown when this part of the page is rendered. To change this information, we have to find where this variable is created among the files in the OpenCart installation. Allow me to show you.

In your FTP client, go to /catalog/controller/common. Find and open footer.php. On line 45 you’ll see the following code:

$this->data['powered'] = sprintf($this->language->get('text_powered'), $this->config->get('config_name'), date('Y', time()));

$this->data['powered'] = sprintf($this->language->get('text_powered'), $this->config->get('config_name'), date('Y', time()));

This code tells the system to generate the $powered variable by generating a formatted string combining the contents of a variable called text_powered, with another called config_name, and, finally, the current year.

If we want to change the text_powered portion, we need to go to /catalog/language/english/common and open the footer.php file located there. On line 18, the text_powered value is established:

$_['text_powered'] = 'Powered By <a href="http://www.opencart.com">OpenCart</a><br /> %s &copy; %s';

If you change the value here, you change it for any theme used in the future, as long as that theme contains the same PHP code we found in the default theme. In other words, you can use the $powered variable anywhere you want to show what is in this string (as well as the store name and copyright year). For our example, let’s change this to:

$_['text_powered'] = 'Powered By <a href="http://www.novusweb.com" target="_blank">novusweb&reg;</a><br /> %s &copy; %s';

The %s code tells PHP to insert the two strings values, config_name and date, at these locations.

To change the store name, go to your store admin > System > Settings and return to your Store edit screen. Click the first tab, General, and change the value of Store Name. In our example, we’re using “Novusweb Revised Store.”

Change the Store Name in the General tab.

Once you save these changes, you will see the footer content changed.

The new modified footer notice.

Summary

OpenCart is one of the easiest open source ecommerce platforms to alter. Compared to other leading platforms, the architecture of OpenCart is far less daunting.

Next month, I’ll discuss styling issues relating to design. To view the ongoing progress of our revised store, go to ecd.novusweb.com/revised. The changes we make in this article series will evolve there.

Read Bret Williams’ profile. >