Search Google

Saturday 27 December 2014

how to add new theme in magento

After you install the theme, go to System -> Configuration -> Design.
For the Themes section, set everything to modern, since that’s the name of the theme.
The theme will now be applied.
If you’re running the default install, you can make the front page look how the demo store on here does. For that you’ll need to update the CMS blocks, so go to CMS -> Manage Pages. Click on the Home Page.
You’ll be in the General Information section. Under Content, put the following:
{{block type="core/template" template="sample/home.phtml"}}
You can either comment out what’s already there, or just remove it completely.
Then you need to go to Custom Design and set the Layout to 1 column.
That’s it! Hope It will help you.

-------------------------------\

There are two ways to install a Magento theme

  1. Install via Magento Connect
  2. Install via placing appropriate theme template folders in your Magento Installation.
It entirely depends upon the theme availability and theme quality but if the theme is available in Magento Connect (it has a good collection of free & premium themes) then you can install it very easily without any technical knowledge. Following is a breakdown of how to install a Magento theme via Magento Connect and via inserting new theme template in your existing or new Magento installation.

How To Install a Magento Theme Via Magento Connect

To install a theme from Magento Connect you need to follow certain steps which are explained below (Advance users may skip few steps):
1. Select the theme by browsing the huge Magento theme archive. OR, If you know the direct URL of your favourite theme just open it’s Magento connect URL
2. Now, you will see a button right under the theme image called “Get Extension Key”. You need to click “Get Extension Key” and agree to extension license agreement.
magento-connect-themes
3. After you select agree checkbox and click “Get Extension Key” you will see the Magento extension key right there itself (displayed in the box). You need to paste this extension key in your store’s Magento connect tab. Keep it safe.
4. Copy this Magento extension key. E.g. It will look like “magento-community/Magik_Autocomplete”
5. In order to install this theme into your Magento store you need to login to your store admin panel and go to System->Magento Connect->Magento Connect Manager. Magento connect manager will ask you to login again. You need to use your store admin login credentials to get past the login screen.
magento-connect-manager
You need to paste the theme extension key copied from the Magentocommerce.com’s Magento connect here.
Magento connect checks for the extension key validity and downloads the theme on your system. Depending upon your internet connection speed (bandwidth) and theme size it will take time to install. These extension keys are specifically created with a unique combination so that there is no confusion over which extension to download. If you have correct extension key and there are no errors in theme or your internet bandwidth you will not see any error messages. In case there are any error messages try downloading and installing again. If you do not succed at all then you can contact the theme owner or ask questions in the theme documentation tab.
6. Soon after you see “Theme successfully installed” message go to System->Configuration->Design->Themes and provide the theme name in Default field (which will change your default theme to this new theme) and click “Save Config” button at the top right corner of your screen.
magento-system-design-configuration
7. A Magento theme revolves around different columns in your theme layout. In case your store home page doesn’t load properly and shows weird design then go to CMS->Manage Pages. You will notice that there are two different layouts for the home page (may be more depending upon how many themes you have tried in the past). Based on your new theme layout disable all the other home page layouts. You can easily disable/enable the layouts by clicking “Enabled” or “Disabled” links provided in the status field.
magento-cms-manage-pages
8. Check your home page if the store is looking just like your new theme, you are done. If you still see problems chances are that you haven’t disabled the correct home page layout. Repeat step 7 until you see a correct store home page (not required if you have only two home page layouts showing in your “Manage Pages” section.
This was the easiest and fastest way of installing a Magento theme using Magento Connect manager.
Many Magento theme sites don’t publish their theme template in Magento connect (sometimes their themes do not pass through Magento connect guidelines). These themes are provided directly by the theme owner sites. If you are interested in downloading a Magento theme from such sites then following are the steps required to install a Magento theme within your existing Magento installation.

How To Install A Downloaded Magento Theme

Unlike single template themes (WordPress) Magento themes are quite different as its layout depends on four elements i.e.
  1. Layout – Present is (app/design/frontend/your_interface/new_theme/layout/)
  2. Templates – Present in (app/design/frontend/your_interface/new_theme/template/)
  3. Skins – Present in (skin/frontend/your_interface/new_theme/)
  4. Locale – Present in (app/design/frontend/your_interface/new_theme/locale/)
In order to install and integrate a new theme you need to follow few steps more than what you are accustomed to follow in case of wordpress themes.
If you have already downloaded your preferred Magento theme then here is how you can install and integrate this new theme into your existing Magento installation.

  1. Uncompress the zip file containing theme templates (you can use winrar or winzip to uncompress files on windows machine or use unzip zipfilename.zip to uncompress files on Linux server)
  2. Copy entire app folder of your new theme under Your_Magento_Installation/app/design/frontend/default/ so it becomes like Your_Magento_Installation/app/design/frontend/default/new_theme
  3. Copy entire skin folder of your new theme under Your_Magento_Installation /skin/frontend/default/ so it becomes like Your_Magento_Installation/ skin/frontend/default/ new_theme
  4. Now, as you have added your newly downloaded theme in your Magento store you need to login to your Magento store admin to tell Magento which theme to use as layout.
  5. Sometimes Magento Cache doesn’t let you see your changes instantly. In order to test your new theme it would be wise to disable cache for the time being. Go to System > Cache Management and select “Disable” then click “Save Cache”. Once you are done with all the steps Enable the cache again.
  6. Now go to System -> Configuration and select the Design Tab
  7. Type the name of your new theme which you have copied in your Magento installation in front of skin (Images/CSS) input box and click “Save Config”.
  8. Optional – If you have downloaded a widget ready Magento template then you need to install the widget provided with the theme. In order to install Magento theme widget you have to go to CMS -> Static Blocks and click on “Add New Block”. Based on your widget installation instructions you have to add your new widget and activate that using this new widget block. Finally select “Enabled” and click “Save Block”. Go and select “Custom Design” Tab and in Layout select “Homepage” otherwise your widget won’t show on home page.
  9. Optional – Home page of default Magento store is a CMS block so you have to provide custom code there in order to display something on home page. To do so you have to go to CMS- > Manage Pages and select “Home page” and in the content area type the home page content code which comes up with your new theme. You can change this area anytime you want.
  10. All set. Open up a new page on your browser and type in your store name to see the new theme. Your new Magento theme is ready to be used.
I have installed a New Magento Theme but i can’t see any products showing up, why?
Well, It can only happen in case of a new store. You need to follow few steps to fix this problem

  1. Go to Catalog -> Manage Categories
  2. Select the category you want to show on your Homepage and look for its ID.
  3. Go back to CMS -> Manage Pages and select Homepage
  4. Paste the code for showing Products on home page with the selected category ID.
I hope this is quite comprehensive tutorial for installing Magento themes. I would love to hear your thoughts, views and experiences. Please leave me a comment and let me know.
=======================================
When you click Refresh, the Magento Classic Free Theme will show up at the bottom of the list with your existing extensions.

Now let's activate the theme so that it can show on your store's frontend. To do this, click Return to Admin (located at the top of your Magento Connect Manager) to go back to your Magento admin panel and then go to System > Design. To add the new theme, click Add Design Change:
Add Design Change

Now select the new theme from the Custom Design drop-down menu. In our case we will select f002 since this is the code for the Magento Classic Theme:
Custom Design

Click Save to save the new design change. You will see a confirmation and the design change will show up on the Design page:
Design Change Saved

Now you can go to your store's frontend and enjoy your new Magento theme. You may have to flush the Magento cache in order to see the new theme:
Magento Classic Theme
=============================================
After the admin back-end loads completely navigate to the System > Configuration tab and on the left menu panel select Design:



If the template exact name is not provided browse to the System > Design > Add New Design tab. Here you will see list of the templates available for installation. Note that new design name and navigate back to the above mentioned menu. The new theme name should be filled in all the fields except the translation one. Click “Save Config” and the new design should be loading now for your front-page.
==================================
From there, select the global configuration scope (labeled Default Config in the following screenshot) you want to apply your new theme to, from the Current Configuration Scope dropdown in the top left of your screen:
Once this has loaded, navigate to the Design tab under GENERAL in the left-hand column and expand the Themes block in the right-hand column, as shown in the following screenshot:
From here, you can tell Magento to use your new theme. The values given here correspond to the name you gave to the directories when creating your theme. The example uses responsive as the value here, as shown in the following screenshot:
Click on the Save Config button at the top right of your screen to save the changes.
Next, check that your new theme has been activated. Remember the styles.css file you added in the skin/frontend/default/responsive/css directory? The presence of that file is telling Magento to load your new theme's CSS file instead of the default styles.css file for Magento from the default package, so your store now has none of the original CSS styling it. As such, you should see the following screenshot when you attempt to view the frontend of your Magento store:

Overwriting the default Magento templates

Noticed the name of your Magento theme appearing next to the logo in the header of your store? You can overwrite the default header.phtml that's causing it by copying the contents of app/design/frontend/base/default/template/page/html/header.phtml into app/design/frontend/default/responsive/template/ page/html/header.phtml. Open the file and find the following lines:
<?php if ($this->getIsHomePage()):?> <h1 class="logo"><strong><?php echo $this->getLogoAlt() ?></strong><a href="<?php echo $this->getUrl('') ?>" title= "<?php echo $this->getLogoAlt() ?>" class="logo"><img src = "<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a></h1> <?php else:?> <a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo"><strong><?php echo $this->getLogoAlt() ?></strong><img src = "<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a> <?php endif?> <!--?php endif?-->
Replace them with these lines:
<a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this- >getLogoAlt() ?>" class="logo"><img src = "<?php echo $this-> getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a>
Now if you save that file (and upload it to your server, if needed), you can see that the logo now looks tidier, as shown in the following screenshot:
That's it! Your basic responsive Magento theme is up and running.

Summary

Hopefully after reading this article you will get a better understanding of how to enable your new theme in Magento.

Resources for Article:


Further resources on this subject:

Books to Consider

Instant E-Commerce with Magento: Build a Shop
₨ 92.40
Magento: Beginner's Guide
₨ 147.80
Mastering Magento
₨ 184.80
Getting Started with Magento [Video]
₨ 246.40

No comments:

Post a Comment