Why do we need to customize our Website theme?

OpenCart comes up with a default theme, and also there are a lot of free themes available for OpenCart. So, why do we need to customize our theme? We can use the ones that are freely available. But, the freely available themes do not match our designing style. Often, they lack modern designing techniques and [ [ ...]

Setting up our environment for OpenCart

We have discussed a lot, now let’s start working. Our first recipe is an environment setup. Without the proper environment, it is difficult to work. Let’s first know what the requirements are to work with OpenCart. 1.  Getting ready OpenCart works with at least PHP 5. So, we must ensure at least the support of [ [ ...]

Installing OpenCart

Let’s get our OpenCart package from the Web. We can find it on their website: http://www.opencart.com/index.php?route=download/download. Note: We will download the latest version. For this book, we will be using OpenCart version 1.4.8. How to do it…    We have downloaded our OpenCart package. Now, we will extract it and copy the downloaded folder of the [ [ ...]

Downloading and installing GIMP

GIMP is an open source graphics software editor. It stands for GNU Image Manipulation Program. It is primarily employed as an image retouching and editing tool. GIMP is becoming a high-end graphics application for the editing and creation of original images, icons, graphical elements of web pages, and art for user interface elements. GIMP was [ [ ...]

Creating logos in OpenCart

Now, we will create a logo for our store. Our logo will be an identity of our store. We will create a simple logo for our project ‘shops’. As this is our first time working with GIMP, we will see a step-by-step guide for creating a logo with GIMP. 1. How to do it… We [ [ ...]

Inspecting elements using Firebug

Get familiar with the Firebug tool by clicking the mouse pointer icon. Now, take the mouse on any HTML element on the browser. We will see the selected HTML element on the left side and corresponding style and layout on the right side. For example, let’s open our project on the browser. We will inspect [ [ ...]

Installing Web Developer

Another important add-on for Mozilla is Web Developer. We can edit CSS files using this tool and we can also inspect HTML elements with it. Web developer has a collection of features for developers. 1.  Getting ready Let’s install web developer first. We can add it from this website link: https://addons.mozilla.org/en-US/firefox/addon/60/. 2.  How to do [ [ ...]

Installing Colorzilla

Colorzilla is another important Firefox addon for site development. With Colorzilla, we can get a color reading from any point in our browser, quickly adjust this color, and paste it into another program. At times, we may not know the code of the colour. Here Colorzilla comes into play. Let’s first see its installation process. [ [ ...]

Store Decoration in OpenCart: Changing your shop’s general settings

Our first recipe for this chapter will be modifications of our shop’s general settings through the admin panel. Here, we will set the basic settings for our store. We will set the store’s name and address. Also, we will set the contact e-mail address in this section. We can modify this information at a later [ [ ...]

Store Decoration in OpenCart: Modifying the settings of your store

We have set the general information; now, we will set store-specific information. Let’s see this recipe now. 1. Getting started To change store settings, we need to log in to our admin panel. We will use our previously saved admin username and password for login. 2.  How to do it… We will click the Store [ [ ...]

Store Decoration in OpenCart: Basic localization settings

We will set our basic localization settings in this recipe. We will see a detailed level of localization later in this book. So, stay with us for that. But for now, we will stick with the basic localization settings only. 1.  Getting started We will go to our admin section with our stored admin username [ [ ...]

Store Decoration in OpenCart: Setting image properties

So far, we have modified lots of store properties. Now, we will set the image properties for our site. We can upload store logos and also, we can change the favicon for our store. We have already created our logo. Now, we will upload it and set it as our store logo. Here, we also [ [ ...]

Store Decoration in OpenCart: Changing administrator favorites icon

We have changed our store front favicon. OpenCart has an user interface for changing store front favicon. But, it does not have an interface in the admin panel for changing the admin favicon. We will change our admin favicon by modifying our code. We will use the following image as our favicon: First, we will [ [ ...]

Store Decoration in OpenCart: Setting up SMTP mail server

We will have to send emails to the customers of our store. So, we need to configure our mail server. For that purpose, we need to set an SMTP (Simple Mail Transfer Protocol) server. 1.  Getting started To set our SMTP information, we will create an email account for our store with Gmail. 2.  How [ [ ...]

Store Decoration in OpenCart: Modifying server options

Now, we will modify some server settings. When we go into production, we can log errors on a log file. Here, we can also set the output compression level. For setting a store, SSL-enabled service is pretty important. This will make our store secure. The transactions will be secure. We can enable SSL service for [ [ ...]

Store Decoration in OpenCart: Creating categories

We have set the configuration options for our store. Now, we will upload some products. But before that we will also create some categories for our products. 1. Getting started We will log in as admin with our admin username and password. Then, we will click the Catalog | Categories tab on the top navigation. [ [ ...]

Store Decoration in OpenCart: Adding products to a category

We have created a new category. Now, we will upload some products in that category. We will use the administration panel for this purpose. 1.  Getting started In this last recipe of this chapter, we need to log in as admin with our stored username and password. 2.  How to do it We will go [ [ ...]

Layout Structure in OpenCart: Creating a new theme

In this recipe, we will see the steps to create a new theme for OpenCart. There are some rules to create OpenCart themes. 1. Getting started Let’s get started with the steps to create a new theme with OpenCart. 2.  How to do it Following are the steps for creating a new theme for OpenCart: [ [ ...]

Layout Structure in OpenCart: Resetting layout styles

Before beginning our theme styling work, we must first reset all the styles. This will help us with cross-browser problems. 1. Getting started We need to modify the stylesheet.css file of our new theme first. We will go to catalog\ view\theme\shop\stylesheet. And open up stylesheet.css in our favourite editor. 2. How to do it Now, [ [ ...]

Layout Structure in OpenCart: Setting basic style properties

We have reset browser style properties. Now, we will apply our style to our site. There are some basic styling concerns. 1.  Getting started We are going to use the basic styling properties in this recipe. We need to modify the stylesheet.css file of our new theme first. We will go to catalog\view\theme\shop\ stylesheet and [ [ ...]