How to Create OpenCart Website?

OpenCart platform is one of the best ways to create a website for e-commerce business. It is completely open-source and free to use, so you will be able to fully customize your online store.

OpenCart installation can be a bit tricky if you are not experienced in setting up open-source software, and website builders. In order to help you overcome this obstacle, we’ve decided to share our knowledge with you, and write the OpenCart tutorial for beginners.

In this article, we’re going to explain what OpenCart is, and to teach you how to create and re-design a website on the OpenCart platform.

About OpenCart Platform

OpenCart is a completely free website building platform, that is made mainly by using MySQL, as well as PHP. It’s best suited for creating an online shop. Apart from just being free, OpenCart is also open source, which allows you to completely customize your website to fit your own needs.

You can add various useful extensions, customize the appearance of the website, and even create your own OpenCart themes.

Setting Up OpenCart

Before we talk about how to make a website on OpenCart, you’ll have to download and set up OpenCart first, so let’s take a look at how you are able to do that step by step.

1. OpenCart Download

First of all, in order to set up OpenCart, you will need to download its source files from the official OpenCart website.

The first one is to go through one of the OpenCart partners and use their hosting services, while the other option will let you host your own OpenCart marketplace.

For the sake of this OpenCart tutorial, we’re going to explain the option number two and teach you how to host your own OpenCart website.

2. XAMPP Installation

In order to set up OpenCart, you will have to have XAMPP installed first, which you can download from here.

Depending on whether you use Windows, Linux, or Mac operating systems, you can find different installers, so be careful not to download the wrong one.  Also, make sure to only download the latest version of XAMPP, no matter what OS you have, in order not to miss new features and bug fixes.

3. Creating OpenCart Database

Once you have OpenCart source files and XAMPP downloaded, it’s time to create your very first OpenCart database. To do that, you’ll have to use zip software to unzip the files you had downloaded. We recommend using 7zip or WinRAR, depending on your preference.

After you unzip the files, go to the place where you unpacked the OpenCart files, and copy everything from the folder called ‘Upload’.

Then, go to where you installed XAMPP, enter htdocs, and create a folder where you will paste previously copied files. Now you can get to creating a database. Open Localhost, and go to the phpMyAdmin panel. Once there, you should see the menu that looks like this photo below.

To create a new OpenCart database, press ‘New’, and in the ‘Database’ tab, click on the ‘Create database’. Then, simply enter the name of your new database, and press ‘Create’.

If you are using Linux, in order to see the phpMyAdmin page, you will need to click on it through the Cpanel page, while everything else will be the same.

4. OpenCart Installation

Now that the OpenCart database is set, let’s move on with the OpenCart installation process, by going to the link where you had already set up files for OpenCart. If we use the example from the screenshot above, it would be localhost/opencart3. After you do that, the installation should automatically begin.

Once you’ve read and accepted Terms of Service, you’ll have to review whether your server files are prepared correctly.

If there is a green checkmark next to every line, then everything is fine, and you can continue with the installation process.

However, if that is not the case, you will have to go back to your files and fix the problem. For instance, there are two errors in the example above, which has to be fixed in order to move on.

To fix the error that is labeled as ‘Missing’, all you need to do is to go to the root folder and rename ‘config-dist.php’ to ‘config.php’. If you get the error labeled as ‘Unwritable’, simply do the same thing with the config files in the Admin folder. Once that is done, the process will lead you to the configuration page, where you need to set up a couple of basic details regarding your database.

After you do it, the OpenCart installation process will be completed, and you’ll see the message to delete the folder you used for installation, so it wouldn’t cause any problems.

How to Create a Website with OpenCart

Now that your OpenCart is all set up and ready to go, let’s discuss where to go from here, and how to create a functional website on the OpenCart platform. First of all, in order to customize your online store, you need to login to the OpenCart admin panel, by using your login details.

Once you log in, you will gain access to the OpenCart Dashboard, from where you can edit the pages, add extensions, check the website data, and more.

OpenCart Dashboard is pretty straightforward to use, even if you don’t have any previous experience in web design. When you want to check how your webpage should look, you can simply go to your profile, and click the ‘Your Store’ button.

That way, you will open a homepage of your new online shop, where are some fake items shown, just so you would be able to see how the real website would look like.

But, before that is going to happen, we want to talk about the core features of every successful OpenCart marketplace, which are, of course, extensions and OpenCart themes.

Using Extensions

To customize your online shop via the OpenCart platform, you will definitely need to add extensions, which will, not just make your website look better, but also improve its general functionality.

There are a lot of extensions available on the OpenCart website, amongst which some of them are completely free to use. In order to be able to use extensions, however, you should set up an Extension Installer that is available as a feature embedded into the platform.

But first, to enable it, you have to set up your private FTP settings, which can be done from the menu on the left side of the screen, by going to System/Settings/Store Settings.

From there, navigate yourself to the FTP tab, where you need to insert your FTP options. Once you’ve done this, check the Enable FTP on the bottom part. To save the changes you’ve made, simply press ‘Save’ in the top right part of the panel.

Now that your FTP settings are properly set, you can add any extension you want. They usually come in packages as XML or zip files. To add downloaded extensions to your online shop, press ‘Extensions’ on the left, to bring down the drop menu, and then click on ‘Extension Installer’.

You should be able to see the panel in the middle of the screen. Press ‘Upload’, and browse for the downloaded extension file.

If there is already a file under the same name, you will be given a message about overwriting the existing files. Just to be sure that no main files are affected by this, make sure to inspect the message before you approve it to overwrite your files.

Redesigning a Website with OpenCart

One of the best ways to make your OpenCart website look more personal is to create or use some of the cool-looking, yet highly-functional themes. The thing with this platform is that there are several OpenCart free themes, which are great for people on a budget, who simply want to start their small online shop.

Apart from that, there are a lot of paid OpenCart themes, for various branches and types of products, from furniture to groceries, as well as some themes specifically optimized for mobile phones.

Also, this works quite well if you need to transfer your existing website to the OpenCart platform. You can simply load your saved database and settings, and check whether all the features are compatible with OpenCart.

OpenCart for Developers

If you are experienced in coding, we have some great news for you! OpenCart allows web developers to create their own themes, which they can either use for their own websites or sell to other people. Apart from that, it is possible to use the third-party software, such as TemplateToaster, to build OpenCart themes from the very beginning.

Let’s find out about both of these methods. Keep in mind that we will mostly focus on talking about using TemplateToaster for this purpose, while we’ll briefly explain the coding part. Otherwise, it would probably be boring to most of you.

Making OpenCart Themes by Using Software

In order to easily make your own OpenCart theme, you will need to have TemplateToaster downloaded and installed on your PC. Once you set up TemplateToaster, open it, and choose OpenCart from the list of the available CMS platforms.

Next, you can choose whether you want to edit an OpenCart theme that already exists, or you want to make a completely new theme.

For the sake of this guide, we’ve selected the option to start making my own theme from the very beginning.

After that, you simply need to follow the instructions and select some basic options, such as the font type, size, and color.

Once that is done, and all the basic options are selected, the main interface will become available, from where you can completely customize how your webpage will look like.

As you can see, from this interface, you can easily edit almost everything you can think of, starting with optimizing a website layout.

Once you are satisfied with the layout, you should think about customizing a header. If you can’t think of any interesting logos for your website, you can select one of the logos from the logo tab.

However, if you are a true artistic soul, and you’ve already managed to make your business logo, you can press ‘Browse’ and add it to your website’s header.

Even though you can edit almost anything you want, the most important page you should think about is the one where your commodities are shown. After all, you’re making an online shop.

To access this part of the editor, find the ‘Content’ tab, and, voila, you will be able to customize it the way you want it to be.

Once you are satisfied with all other parts of your website, it’s time to edit the footer. Usually, this part is empty by default, so you could add certain content, such as social media icons if you own a page dedicated to your products on any of the social media.

When you finish making your OpenCart theme via TemplateToaster, you can easily export it to OpenCart, by clicking ‘File’, and then ‘Export’, just like it is shown in the screenshot.

Now your custom theme is saved. To use it for your OpenCart website, go back to Dashboard, navigate to ‘Extension Installer’, and upload the theme you’ve made.

Once the theme has been uploaded, go back to the ‘Extensions’, click the drop-down menu to select the type of extension you want to use. Make sure to insert ‘Themes’, or the name of your file, then press the blue ‘Edit’ button in the bottom right corner.

This will lead you to the directory where your themes are stored. Select the one you’ve made from the Theme Directory drop-down menu.

For the effect to make changes, you will have to go the ‘Modifications’ tab, which can be found under the ‘Extensions’, and then tap the refresh in the upper right corner. After that, simply go to your homepage preview, and check your new theme.

Using Coding to Make an OpenCart Theme

We’ve mentioned that we’re going to give brief information about using your coding knowledge to build the OpenCart theme. However, to do that, you need to be able to use PHP, CSS, as well as HTML, and JavaScript, since these four skills are crucial.

To be fair, if you decided to use this method, you would probably already know how to code anyway. So, let’s see what are the main steps you should consider when doing this.

  • Setting up the theme folder – create a folder by going into the OpenCart installation directory. In the Catalo folder, go to view, then theme, and this is where your custom theme should be put.
  • Setting up a directory for images and stylesheet – in the previous folder you’ve created, make 4 more folders: Images, Template, Stylesheet, and JavaScript.
  • Structuring template folder – whenever you change something on your theme, it will be saved in the template folder, and it has to be well-organized, so you will need to make sub-folders, in order to avoid errors from happening.
  • Creating a home page layout – you can use the home template file, under the name of home.tpl to write code, and format your homepage.
  • Making navigational input for the menu – next, make the main menu and input all navigational codes.
  • Building footer – write the code to create a footer, and save it under the name ‘footer’ and file type ‘tpl’, resulting in a file being footer.tpl.
  • Adding stylesheet – to customize your theme even further, you can make different types of custom styles, or use stylesheet.css file to find the ones that you can use.

Conclusion

Ah, we’ve finally come to the end of this OpenCart tutorial, where we learned what is OpenCart, how does it work, and how to create a website with OpenCart.

We’re sure these tips will help you with your own projects and business ideas. If you have anything to add, to ask, or you simply liked the article, let us know.