Site icon MonstersPost

How to Create an OpenCart Store

Alex Tkachenko

Update:

Hey, what's happening, guys? This article is a few months old and guess what? Since the last time I edited this one, we've lowered our prices for the premium OpenCart themes! As of today, you can buy any OpenCart template for almost half the price - at just $45 each! If you think that this is awesome, keep on reading. A larger portion of the PrestaShop themes available at TemplateMonster marketplace can now be accessed via subscription through the ONE. After paying a single fee of $229/year you can try all these themes one by one! Isn't that awesome? But that's not all. All members of ONE can save 30-50% buying digital products from TemplateMonster marketplace that are not included into ONE.

Join ONE

I’ve got a confession for you. I love dollar pizza and I’m not ashamed to say it! Yes, in most cases it’s a pretty bad pizza and sometimes I feel like it’s going to kill me, but for some reason, I still visit dollar pizza once in awhile and enjoy a slice of a blatantly crappy pizza.

My tradition, if I may call it so, to visit the dollar pizza place goes back to my college days when I didn’t have enough money, yet wanted to eat something fast food-ish. I used to hang out there for an hour or so and talk to the regular visitors. It was great to discuss life’s ins and outs while eating pizza and looking at the streets full of people running somewhere so fast.

Back in those days, I used to talk a lot about how I wanted to start my own business, but frankly speaking, I did not have enough skills to start anything profitable enough.

While helping my friend with his OpenCart store I decided to compile a useful manual for those who want to start their own shop. OpenCart is a very good choice in this situation, so if you believe that you are not experienced enough to create something like that, there is no problem with all these tools available on the internet right now.

As a company with a pretty big catalog of the e-Commerce template, we strive to show and explain our customers why creating your very own store is easy as a pie.

For instance, take a quick look at the best OpenCart templates we have in our portfolio.

Fooder - Pizza Restaurant With Online Ordering System OpenCart Template

Live Preview | Purchase

Car Audio Responsive OpenCart Template

Live Preview | Purchase

Modern Furniture - Interior & Home Decor Responsive OpenCart Template

Live Preview | Purchase

Fresh Food - Healthy & Organic Food Store OpenCart Template

Live Preview | Purchase

I guess now you understand why I brought up the pizza, right? That Pizza Place template looks awesome and tasty as hell! I have already ordered myself a pepperoni delivery, so let me walk you through the OpenCart template customization basics while I wait for my pizza to be delivered.

How to install the OpenCart CMS

Open any browser and enter the OpenCart directory path in the browser address bar (for example http://your_domain_name/opencart ). You will see the OpenCart installation page:

  1. Installation license
  2. Preliminary stage
  3. Configuration
  4. Ready!

Installation license

Check an OpenCart license agreement and click the Continue button if you agree.

Preliminary stage

At the second step, OpenCart is going to check if your hosting settings match the required ones and if the files and folders permissions are correct.

Configuration

At the Configuration step, you need to input your database details. The MySQL database was created in the preparation step, now you need to enter the details you have used:

If there are any issues with the database details, contact your hosting provider.

You need to create the administrator user for your store. Enter the name, password and administrators e-mail address. The details you enter will be used to log into your store backend.

Ready!

This is the last OpenCart installation step. You will see 2 options: you can be redirected to your OpenCart website or to the OpenCart admin panel.

Important: Remove the "install" folder from your server. You will not be able to enter the store until the folder remains on the server.

The installation is complete. In order to open the store page, enter the domain name in the browser address bar. In order to access the OpenCart admin panel, enter domain_name/admin.

How to install an OpenCart template

In case you already have a ready OpenCart store and you just need to change its appearance with the help of the theme, use the following installation method.

  1. In order to install an OpenCart template, you need to upload the files to the server. You can find the "themeXXX(update).zip" archive in the OpenCart folder, it should be unzipped to your computer.
  2. After that, upload the unzipped files to the root directory of the OpenCart installation. You can check the detailed video instructions on how to upload files to the server.
  3. Open your website with any browser and add /install at the end of your site URL in the browser address bar (for example, http://your_domain_name/opencart/install).
  4. Click the Continue button. It may take some time.
  5. Enter the administration panel, navigate to Extensions > Extension Installer and upload the themeXXX(extensions) archive files. When all the files have been uploaded, navigate to Extensions > Modifications and press refresh in the top right side of the screen.
  6. On the next step navigate to System > Settings, go to the Store tab and select themeXXX template in the Template field.

How to install OpenCart modules

Module installation process includes several steps. Navigate to your administration panel (by adding /admin to your website url in the browser address bar — www.yoursite.com/admin).

Navigate to Extensions > Extensions.

Choose Modules in the Extension type dropdown.

You will see the list of installed and ready-to-install modules. If you see the Uninstall button next to any module, it means that the module is already installed.

You can modify module settings by clicking Edit.

By clicking the Install button you will start module installation process.

In order to remove the module, you have to click the Uninstall button, so the module will be deleted.

When the installation is finished, you need to configure the module. The settings can differ depending on the specific module, but the Status field is the same for all — the field allows you to turn the module on/off.

In order to add the module to a certain page, you need to go to the list of pages.

Navigate to Design > Layout in the side menu.

In the page list select the page where you want to place the module and click Edit.

You can see a list of the modules and module positions that are already added to the page.

The following module positions are available (respectively to the display order):

  1. Header Top (after the Header section);
  2. Column-left (left side panel);
  3. Column-right (right side panel);
  4. Content-top;
  5. Content-bottom;

The Sort Order field shows the display order of the modules assigned to the same position. In order to add a module to a page, click Add Module. Select the required module and module position and click Save. The module installation is completed.

Available settings:

How to enable a Megamenu

The TM Megamenu module allows you to create complex menus. It provides the ability to display a single item (without submenus), an item with a submenu and an item with the multi-row and multi-column submenu block. This module can be displayed in the various positions, but with the same content.

In order to enable megamenu you should navigate to the Extensions > Modules > TM Megamenu page, press the Edit button next to the appropriate item and choose the Enabled option in the new window.

How to configure the Megamenu

Megamenu items. Main items in the menu root.

Megamenu editing starts here. In order to edit megamenu parameters, open your website admin panel and navigate to the Extensions > Modules > TM Megamenu > TM Megamenu page, as on screenshot below. On the next page, you will be able to create, remove and edit menu items.

Click on one of the menu items to start editing. Fill in the following fields:

Menu Item type — type of the menu (regular/megamenu);

For 'Custom' option:

If the "Show megamenu"(3) option is set to "Yes", the following additional fields appear. Fill in these fields:

After filling in the "Columns count" field, the following options become available: "Column N". Fill in the tabs:

For 'Category' option:

After selecting the "Megamenu" type in the "Menu Item type" field, the following additional megamenu settings become available:

After filling in the "Columns count" field, the following options become available: "Column N". Fill in the tabs:

How to change the logo in the OpenCart template

Navigate to Extensions > Extensions.

Choose Modules in the Extension type dropdown.

Find the Logo module. Press an edit button to configure the module.

You will be brought to the settings window:

Available settings:

How to manage and build layouts

Navigate to Extensions > Extensions.

Choose Modules in the Extension type dropdown.

Find the TemplateMonster Layout Builder section. Press the edit button to configure the existing module.

You will be brought to the settings window:

Module basic settings:

To create a new layout, press the New Layout View button.

The module has several buttons available that make editing process much easier. Let’s take a closer look on them:

  1. Press Add Column. After clicking this button you will be able to add rows. This option has several sections available:
    1. After adding a column, insert a row. To add rows, press the Add Row button. The number of columns in the row is unlimited, and you can add as many columns as you need. The width of the columns can be set right after adding them with the help of the Drag & Drop function by dragging the right border of the column.
    2. Delete button allows you to remove unnecessary columns.
    3. After clicking the Edit button you'll see a popup window with a great customization tool which allows you to change column/row style. It can help you setting the background and changing margin values for your blocks.
    4. After adding the columns, you should fill them in with some content (modules). To add a module, press the Add Widget button and select the needed one among the dropdown. You can get the module settings interface via Layout Builder by pressing the "edit " button in module block.
  2. Use the Delete button to remove column you don’t need.
  3. Edit button allows you to adjust column style. We have mentioned it above.
  4. Duplicate is a great tool that allows you to duplicate columns without having to copy them manually.
  5. Sort option allows you to change columns order.

After setting up all the rows, columns and modules, save the Builder module and display it in one of the positions on the store main page.

How to setup a shopping cart

Cart Module is the extension that allows you to display the shopping cart on your website.

Navigate to Extensions > Extensions.

Choose Modules in the Extension type dropdown.

Find the TemplateMonster Cart module. Press the edit button to configure the module.

You will be brought to the settings window:

Select Disable at the Status option dropdown to turn off the module.

How to manage the links in the footer

  1. Navigate to Extensions > Extensions.
  2. Choose Modules in the Extension type dropdown.
  3. Find the TM Footer Link section. Press the edit button to configure the existing module.
  4. You will be brought to the settings window:
Frontend:

Wrapping things up

Everyone wants to start making money online. What are you waiting for then? OpenCart is one of those great platforms that give you a chance to create your own store and build a successful business without writing a single line of code.

If you are successful enough to live without your own shop, make sure you check out our catalog of premium templates and you’ll definitely find something fitting your business.

Related Posts