ECommerce Insights Blog

Stay on top of it all and get ahead with useful articles, how-tos, tips and tricks on e-commerce.

How to Install A Magento Template?

In this Magento template tutorial we will explain you how to install Magento template and enable it on your store’s frontend.

Being the very first step towards building your online Magento store, installing Magento template is not that difficult after all. In fact there are 2 ways in which you can accomplish this one simple task.

Also it entirely depends upon the availability and quality of the particular template. If the template is available in Magento Connect (explained down below) then you can install it without absolutely zero technical knowledge.

So what are those 2 methods? Let’s take a look at each of the two installation methods:

Step 1: Install Magento template with Magento Connect/ Install Magento template with extension key:

Let us understand this method to Install Magento template one step at a time.

Before we do that let us understand what exactly is Magento Connect?

Magento Connect a.k.a the Magento extension market is a marketplace that allows Magento community members and partners to share their open source or commercial contributions for Magento with the community.

Now that we have brief on what Mageto Connect is let us move on.

Select the template by browsing the huge Magento template archive. OR, If you know the direct URL of your favorite template just open its Magento connect URL. All you need to do is get the template’s extension key and then use it for the installation through Magento Connect.

Now what is this key? How do you get it? To get the template’s extension key, go to the Magento Classic Template page, register a new account or log in with an existing one and click “Get Extension Key”.

The extension key will be visualized, so you can select and copy it. Once you have the extension key for the new template,

  1. Log in to your Magento admin panel and go to System
  2. Then Magento Connect
  3. Then traverse to Magento Connect Manager
  4. Log in to Magento Connect, paste the template’s extension key in the field next to Paste extension key to install Magento template.
  5. Finally click Install.

Step 2: How to Install Magento template manually/ How to install a Magento template from a file/ How To Install A Downloaded Magento Template:

Sooner or later, you will probably want to install a Magento theme other than the default. The good news is, Magento theme installation is quick and easy. This will be accomplished in just 3 simple steps.

  1. Download your theme
  2. Upload your theme
  3. Activate your theme

Follow the steps mentioned below to install a downloaded Magento template manually:

  1. Uncompress the zip file containing template templates (tools like winrar or winzip will help you decompress files on windows machine or use unzip to uncompress files on Linux server)
  2. Copy entire app folder of your new template under Your_Magento_Installation/app/design/frontend/default/
  3. Copy entire skin folder of your new template under Your_Magento_Installation /skin/frontend/default/
  4. After adding the newly downloaded template in your Magento store you need to login to your Magento store admin to tell Magento which template to use as the layout.
  5. Then go to System
  6. Then configuration and select the Design Tab
  7. Type the name of your new template which you have copied in your Magento installation in front of skin (Images/CSS) input box and click “Save Config”.

This is it. You can view your store in any browser of your choice now.

Default Magento responsive template:

With Magento versions CE 1.9 and EE 1.14 out now, Apart from installing a new template altogether, Magento itself provides a free template which is indeed responsive and can be used to build comprehensive yet beautiful online stores. So how do we install this default Magento template or this free Magento template?

To view the default template:

  1. On the Admin menu, select System > Configuration.
  2. In the panel on the left, under General, select Design.
  3. Click to expand the Package section. The new responsive template is enabled by default. The default package name is “rwd.”
  4. Click to expand the Templates section. The Default template name is “default” (although the field may appear blank).
  5. When complete, click the Save Config button.

The new responsive template code is contained in the following directories (relative to your Magento installation directory): (app/design/frontend/rwd , skin/frontend/rwd)

Wait there is more! With Magento CE 1.9 and EE 1.14 out now, you can now create and copy files to create your custom responsive template.

Step 1: Creating a Directory Structure for Your Responsive Template

This section discusses how to create new top-level directories for your template and to copy files to those directories. The rwd/default template falls back directly to the base/default template, so templates in the default package will never be included as a part of the fallback chain.

The top-level directories you’ll need are:
[your Magento install dir]/app/design/frontend/custompackage/customtemplate
[your Magento install dir]/skin/frontend/custompackage/customtemplate

To create those directories and to add your template configuration:

Using a command shell, log in to your Magento host as a user with privileges to write to the web server docroot.

Enter the following commands in the order shown:

  1. cd [your Magento install dir]
  2. mkdir -p app/design/frontend/custompackage/customtemplate
  3. mkdir -p skin/frontend/custompackage/customtemplateCreate another directory for your template configuration and change to that directory:
  4. mkdir app/design/frontend/custompackage/customtemplate/etc
  5. cd app/design/frontend/custompackage/customtemplate/etc
  6. Use vim or another text editor to create your template configuration file named template.xml which must have different contents for Magento CE or Magento EE:

Step 2: Copying Files for Your Template

Use the following commands to copy files for your custom template:
a. cd [your Magento install dir]
b. cp -R skin/frontend/rwd/default/images skin/frontend/custompackage/customtemplate
c. cp -R skin/frontend/rwd/default/scss skin/frontend/custompackage/customtemplate

Step 3: Configuring a Compass Watcher

Step 4: Configuring Magento to Load Your Template

a. Log in to the Magento Admin Panel as an administrator.
b. Click System > Configuration > GENERAL > Design.
c. In the right pane, click Package to expand it.
d. In the Current Package Name field, enter custompackage
e. In the right pane, expand Templates.
f. In the Default field, enter custom template

In the top right corner of the page, click Save Config.

Step 5: Verifying Your Custom Template and Troubleshooting Template Configuration

Verify Website with the help of any browser and Troubleshoot if template fails to load properly.

We hope that this precise yet comprehensive guide to Install Magento template should resolve all your queries and help you get started.