Google

Archive for 'Magento'

Fix Credit Card Payment Checkout Issue in Magento 1.4.1.x

The Magento team has changed the way credit card numbers are validated in Magento version 1.4.1.0. The new method requires an additional JS include in your page.xml.

The new file is located at /js/lib/ccard.js.

If you update to Magento 1.4.1.0 and your theme does not include this file, your checkout will not work for credit card payment methods. When a Credit Card payment method is selected, the one page checkout will not proceed past the payment section. The continue button will not be clickable, rendering your Credit Card payment method completely unusable.

The solution is to add this new JS include in two places in your /app/design/frontend/default/[YourThemeName]/layout/page.xml

The first is in the default layout section around line 37.

<block type="page/html_head" name="head" as="head">
<action  method="addJs"><script>prototype/prototype.js</script></action>
<action method="addJs"  ifconfig="dev/js/deprecation"><script>prototype/deprecation.js</script></action>
<action  method="addJs"><script>lib/ccard.js</script></action>
<action  method="addJs"><script>prototype/validation.js</script></action>
<action  method="addJs"><script>scriptaculous/builder.js</script></action>
<action  method="addJs"><script>scriptaculous/effects.js</script></action>
<action  method="addJs"><script>scriptaculous/dragdrop.js</script></action>
<action  method="addJs"><script>scriptaculous/controls.js</script></action>
<action  method="addJs"><script>scriptaculous/slider.js</script></action>
<action  method="addJs"><script>varien/js.js</script></action>
<action  method="addJs"><script>varien/form.js</script></action>
<action  method="addJs"><script>varien/menu.js</script></action>
<action  method="addJs"><script>mage/translate.js</script></action>
<action  method="addJs"><script>mage/cookies.js</script></action>
 
<action  method="addCss"><stylesheet>css/styles.css</stylesheet></action>
<action  method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt  IE 8</if></action>
<action  method="addCss"><stylesheet>css/widgets.css</stylesheet></action>
<action  method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>
 
<action  method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt  IE 7</if></action>
<action  method="addItem"><type>skin_js</type><name>js/ie6.js</name><params/><if>lt  IE 7</if></action>
</block>

The second place you need to add this JS file is in the print section around line 113.

<block type="page/html_head" name="head" as="head">
<action method="addJs"><script>prototype/prototype.js</script></action>
<action method="addJs"><script>mage/translate.js</script></action>
<action method="addJs"><script>lib/ccard.js</script></action>
<action method="addJs"><script>prototype/validation.js</script></action>
<action method="addJs"><script>varien/js.js</script></action>
 
<action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
<action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>
<action method="addCss"><stylesheet>css/widgets.css</stylesheet></action>
<action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>
 
<action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
<action method="addItem"><type>skin_js</type><name>js/ie6.js</name><params/><if>lt IE 7</if></action>
 
</block>

Adding the new JS include in these two places should fix the checkout problem.

How to: Create Static Block in Magento

In case you’re unfamiliar with CMS static blocks, they are powerful little buggers in Magento’s admin that allows the site’s administrator to add and control chunks of HTML that can be displayed throughout the site. They’re perfect for seasonal banners, sale blocks, return policies, size charts and anything that would make sense to modularize to make maintaining your site easier.

Here  i explained  about how  static block  will be add in magento .
1. Log into your Magento store’s admin
2. Navigate to CMS>Static Blocks
3. Click Add New Block in the top right corner
4. Give your block a recognizable Block Title such as Social Media Links or “Fall Sale Banner”.
5. Give your block an Identifier which will be used to call the block. Make sure the Identifier is all lowercase and separated by underscores to follow Magento’s nomenclature i.e. your_block_id
6. Choose what store view the block belongs to. Just leave as All Store Views unless you have a good reason not to
7. Set Status to Enabled
8. Click Save Block or Save and Continue Edit to save your settings.

You’ve set up your block,then now turn to how can show this block in the site.It depends on how you have to show the block.Actually,there is no of options to show the block.Here you can see these ptions.

1.XML

Adding a static block to a page template is a great way to control global elements of your site, such as footer links, custom callouts in the sidebar (ultimately replacing that damn dog) and more. You can embed this code in app > design > frontend > default > your_theme > layout. Open the appropriate the file, lets say catalog.xml and plunk the following code in the block for our category view:

<block type=”cms/block” name=”your_block_id” before=”-”>
<action method=”setBlockId”>your_block_id</action>
</block>

This code will place the block “your_block_id” that you have created in the admin above the content on the category pages (notice the before=”-” attribute, which makes sure your block gets displayed before the rest of the content). This is perfect for a seasonal banner that could advertise a current sale on all product listings.

Controlling static blocks with XML is geared for content that will remain in a consistent position in your theme.

Sometimes however you gotta get down and dirty and place your CMS static block inline in your template. That’s where the next method comes in.

2. PHP

Adding your static block inline with PHP is the quickest way to get your block in your template. Let’s say you want to add a quick blurb about your return policy right after the “Add to Cart” button. The client needs to be able to occassionaly update this blurb from time to keep it current. So you open your template file that contains the “Add to Cart” button app > design > frontend > default > your_theme > template > catalog > product > view > addtocart.phtml Find the <button> tag and right afterwards add the following code:

<?php echo $this->getLayout()->createBlock(‘cms/block’)->setBlockId(‘your_block_id’)->toHtml(); ?>

This code will add the block “your_block_id” right after the button. Jobs done. This method is perfect for getting into those nooks and crannies in Magento’s vast and awkward file structure.

3. Shortcode

This method is used when you need to pull in a static block while in Magento’s admin creating CMS pages or other static blocks. A possible example would be injecting contact information into multiple CMS pages. So you create a contact static block, and then can insert the contact info on the contact us page, your privacy policy page, customer service page, etc. If the contact info changes, you simply update the static block and the changes will be reflected across all your CMS pages.

{{block type=”cms/block” block_id=”your_block_id”}}

This code will place the block “your_block_id” inline in your CMS page.

Solving Magento Error “Call to a member function toHtml()”

For everyone stuck in the same solution:
in page.xml under app/design/frontend/base/default/layout (or your custome page.xml)

change the line

<block type="core/profiler" output="toHtml"/>

to

<block type="core/profiler" output="toHtml" name="core_profiler"/>

Looks like there were some changes in the way Magento handles this call!
This solution work so far for 1.4.0.1 to 1.4.1.0……

Change Magento Admin URL

It is very easy to change admin URL for magento. If you want to change URL from

http://www.example.com/admin

TO

http://www.example.com/customadmin

All you need is to properly set your custom admin url in the config file /app/etc/local.xml. In this file change this:

<frontName><![CDATA[admin]]></frontName>

to this:

<frontName><![CDATA[customadmin]]></frontName>

Now save the file and clear the cache (if you are using it). If you still don’t have access to the admin you may clear the cache by deleting the contentss of the /var/cache directory. This is it.

Magento check current page is Homepage

The following code is used to check if the current page is homepage.

<?php if(
Mage::getSingleton('cms/page')->getIdentifier() == 'home'  &&
Mage::app()->getFrontController()->getRequest()->getRouteName() == 'cms' 
) : ? >

The other way is to do the following way: works on 1.4.x

<?php
if($this->getUrl('') == $this->getUrl('*/*/*', array('_current'=>true, '_use_rewrite'=>true))):
	echo "Homepage";
else:
	echo "Not in Homepage";
endif;
?>

Note: You can use “Mage::getUrl()” function where “$this” reference is not valid.

Create Magento Store How to ?

There are numerous ways to setup multiple Magento stores that all share the same codebase and backend, but what method you use depends on your needs.

This article is written with cPanel in mind, though the methodologies listed below apply no matter what control panel you’re using.

Jump To Section

  1. URL Structure
  2. Shared Hosting Caveat
  3. Adding Another Store In Magento
  4. Parked Domain Method
  5. Addon Domain Method
  6. Subdomain Method
  7. Subdirectory Method
  8. Managing Multiple Stores
  9. Secure Checkout For Each Domain

URL Structure

The actual URL structure of your stores is a matter of personal preference. You can, for example, have two entirely different stores running on the same domain that share the same instance of Magento:

  • mall.com/shoes
  • mall.com/shirts

These stores could also be setup on their own domain and still share the same instance of Magento:

  • shoes.com
  • shirts.com

Another example would be a mall type setup, where your primary domain is the portal to access various stores:

  • mall.com
  • shoes.mall.com
  • shirts.mall.com

Regardless of the URL structure, the method for setting this up will pretty much be the same, and the result is what we’re really after, which is to have one codebase for all of your stores, and one backend to manage all of these stores from.

Shared Hosting Caveat

If you want each store to have it’s own SSL certificate and don’t want to share a single checkout, e.g. you don’t want visitors leaving domainA.com to checkout on domainB.com, then you will not be able to do this in a shared hosting environment.

The reason why you cannot do this is simple. In order for a website to have an SSL certificate, it requires a dedicated IP address.

There’s no way to allow an addon or parked domain in cPanel to have its own IP address. Instead, it shares the IP address of the primary domain.

You probably think you could sign up for two shared hosting accounts, so each one has its own dedicated IP address, but that won’t work either.

Since it’s shared hosting, there are security measures in place to prevent one user from reading the files of another user.

So for shared hosting clients, you’re limited to the following scenarios:

  1. All of your stores do not have a secure checkout, which is fine if you’re using PayPal, Google Checkout, or a similar third-party service that handles the processing of card data on their website. For example, visitors to any of your stores are redirected to a third-party website for card processing.
  2. All of your stores share a secure checkout point. For example, you own three domains: mall.com, shoes.com, and shirts.com You use mall.com as your primary domain and have an SSL certificate associated with it. The other two domains would be either addon or parked domains, and visitors to those sites would be redirected to mall.com to checkout.
  3. All of your stores are setup as subdomains, and you’ve purchased a wildcard SSL certificate, which is roughly $1000/year and is for legally registered businesses.

If you do need an SSL certificate for all of your domains, you will need to be in a dedicated hosting environment.

Adding Another Store In Magento

The first thing we need to do is setup our second store in Magento.

We’re going to do a hypothetical here for the naming conventions, and assume we ownshirts.com. Adjust the values accordingly for your own store.

  1. Login to the Magento admin.
  2. Go to the Catalog tab, and select Manage Categories.
  3. Click on the Add Root Category button on the left.
  4. On the right, for the Name, we’ll enter Shoes.com. Set the dropdown to Yes for both Is Active and Is Anchor.
  5. Click the Save Category button.
  6. Go to the System tab and select Manage Stores.
  7. Click on the Create Website button.
  8. For the Name, we’ll enter Shoes.com, and for the Code, we’ll enter shoes. We’ll use this value later, so don’t forget this!
  9. Click the Save Website button.
  10. Click on the Create Store button.
  11. For the Website, select Shoes.com from the dropdown. For the Name, we’ll enterMain Store. For the Root Category, select the Shoes.com from the dropdown.
  12. Click on the Save Store button.
  13. Click on the Create Store View button.
  14. For the Store, select Main Store from the dropdown, making sure it’s for theShoes.com website. For the Name, we’ll enter English. For the Code, we’ll entershoes_en. For the Status, select Enabled from the dropdown.
  15. Click the Save Store View button.
  16. Go to the System tab and select Configuration.
  17. For the Current Configuration Scope (located on the top left), change the dropdown menu from Default Config to Shoes.com.
  18. Select Web from the sidebar on the left under the General heading.
  19. For both the Unsecure and Secure sections, uncheck the Use default box next to theBase URL item, and enter the URL for your store, e.g. http://www.shoes.com/. Don’t forget the trailing slash!
  20. Click the Save Config button.

Now that we have our second store setup, you’ll need to choose one of the following methods for actually setting up the store on the server-side so visitors can access it.

If the URL structure you’ve chosen will have different domains for each store, the parked domain method is the fastest and easiest method.

Parked Domain Method

For this method, we’ll pretend we own shirts.com and shoes.com. The shirts.comdomain is our primary domain, and Magento is already installed on it. Here’s how we would set this up for the shoes.com domain:

  1. Login to cPanel for your domain and click on the Parked Domains icon.
  2. In the input field, enter the domain name that you’ll be setting up as a second store, e.g.shoes.com.
  3. Click on the Add Domain button.
  4. Open up the index.php file for Magento and replace the last line of code:
Mage::run();

…with the following code:

switch($_SERVER['HTTP_HOST']) {
	case 'shoes.com':
	case 'www.shoes.com':
		Mage::run('shoes', 'website');
	break;
	default:
		Mage::run();
	break;
}

If you have more than two stores, you will need to add additional cases to the above code block, e.g.:

switch($_SERVER['HTTP_HOST']) {

	// Shoes.com
	case 'shoes.com':
	case 'www.shoes.com':
		Mage::run('shoes', 'website');
	break;

	// Hats.com
	case 'hats.com':
	case 'www.hats.com':
		Mage::run('hats', 'website');
	break;

	// Shirts.com (default store)
	default:
		Mage::run();
	break;
}

Addon Domain Method

This is the same scenario as above, except it takes a little longer to setup. This method might be more useful to you if, for example, you wanted to have a blog on one domain, but not on the other. You couldn’t do that with a parked domain. Here’s how we would set this up for theshoes.com domain:

  1. Login to cPanel for your domain, and click on the Addon Domains icon.
  2. For the New Domain Name, we’ll enter shoes.com. cPanel will automatically fill in the next two fields, so remove public_html/ from the Document Root field, leaving us with just shoes.com. This step isn’t required, but for organizational purposes, it makes more sense.
  3. Set a password for this domain and click on the Add Domain button.
  4. Login to your site via SSH, and go to the directory that we previously set in theDocument Root field above when adding our domain. In our case, we would do the following:
    cd shoes.com/
  5. Copy the index.php and .htaccess file from the directory where Magento is installed, which would be in our root web directory:
    cp ../public_html/index.php ../public_html/.htaccess .
  6. Open up the index.php file that we just copied over and replace the following line of code:
    $mageFilename = 'app/Mage.php';

    …with the following:

    $mageFilename = '../public_html/app/Mage.php';
  7. With the index.php file still open, replace the following line of code:
    Mage::run();

    …with the following:

    Mage::run('shoes', 'website');
  8. Lastly, we need to create symbolic links to point to a few directories:
    ln -s ../public_html/404/ ./404
    ln -s ../public_html/app/ ./app
    ln -s ../public_html/includes/ ./includes
    ln -s ../public_html/js/ ./js
    ln -s ../public_html/media/ ./media
    ln -s ../public_html/report/ ./report
    ln -s ../public_html/skin/ ./skin
    ln -s ../public_html/var/ ./var

Subdomain Method

For this method, we’ll pretend we own mall.com, and it’s setup as a portal that links to the various shops within the mall. Magento will be installed on the mall.com domain, and all of the shops will be in subdomains, e.g.:

  • shoes.mall.com
  • shirts.mall.com

Here’s how we would set this up for the shoes subdomain:

  1. Login to cPanel for your domain, and click on the Subdomains icon.
  2. For the Subdomain, we’ll enter shoes. cPanel will automatically fill in the next field, so remove public_html/ from the Document Root field, leaving us with just shoes. This step isn’t required, but for organizational purposes, it makes more sense.
  3. Click the Create button.
  4. Login to your site via SSH, and go to the directory that we previously set in theDocument Root field above when creating our subdomain. In our case, we would do the following:
    cd shoes/
  5. Copy the index.php and .htaccess file from the directory where Magento is installed, which would be in our root web directory:
    cp ../public_html/index.php ../public_html/.htaccess .
  6. Open up the index.php file that we just copied over and replace the following line of code:
    $mageFilename = 'app/Mage.php';

    …with the following:

    $mageFilename = '../public_html/app/Mage.php';
  7. With the index.php file still open, replace the following line of code:
    Mage::run();

    …with the following:

    Mage::run('shoes', 'website');
  8. Lastly, we need to create symbolic links to point to a few directories:
    ln -s ../public_html/404/ ./404
    ln -s ../public_html/app/ ./app
    ln -s ../public_html/includes/ ./includes
    ln -s ../public_html/js/ ./js
    ln -s ../public_html/media/ ./media
    ln -s ../public_html/report/ ./report
    ln -s ../public_html/skin/ ./skin
    ln -s ../public_html/var/ ./var

Subdirectory Method

This is the same scenario as above, except all of the shops will be in subdirectories, e.g.:

  • mall.com/shoes
  • mall.com/shirts

Here’s how we would set this up for the shoes subdirectory:

  1. Login to your site via SSH, and create a subdirectory where your second store will be:
    cd public_html
    mkdir shoes/
    cd shoes/
  2. Copy the index.php and .htaccess file from the directory where Magento is installed, which would be in our root web directory:
    cp ../public_html/index.php ../public_html/.htaccess .
  3. Open up the index.php file that we just copied over and replace the following line of code:
    $mageFilename = 'app/Mage.php';

    …with the following:

    $mageFilename = '../public_html/app/Mage.php';
  4. With the index.php file still open, replace the following line of code:
    Mage::run();

    …with the following:

    Mage::run('shoes', 'website');

Managing Multiple Stores

It’s very important to remember that now that you have multiple stores to manage from one admin panel, that you make sure you’re changing the configuration for the appropriate store.

In the System → Configuration section, if you leave the dropdown menu for Current Configuration Scope set to Default Config, it will globally change the values for all of your stores, assuming you haven’t removed the checkmark next to Use default throughout the configuration sections.

You can change the configuration values globally, for each website, and for individual store views.

Secure Checkout For Each Store

For those of you in dedicated hosting environments, you can follow either the addon or parked domain method from above, and edit the httpd.conf file to give the addon or parked domain a dedicated IP address.

However, this is not advised. Your changes will most likely be overwritten with a control panel upgrade, Apache or PHP rebuild, or even simple maintenance.

Magento Layout / Structural Block How to?

1. Layout your Structural Blocks
When you begin the implementation process, first ask yourself this question: What are the layout needs of my store?
What this simply means is: “Will my store always have a left column? Or will some pages have a left, main and a right column? Or perhaps some of the pages will just one column?”. These questions are imperative because the variations of page structure will directly determine the number of skeleton templates you will need to create – For instance, if you have a one column and a 3 column layout, you will need to create two skeleton template accordingly. But before we go further, let’s first look at what a skeleton template looks like.

<div class="header">getChildHtml('header')?&gt;</div>
<div class="middle">
<div class="col-left">getChildHtml('left')?&gt;</div>
<div class="col-main">getChildHtml('content')?&gt;</div>
</div>
<div class="footer">getChildHtml('footer')?&gt;</div>

Pretty straight forward. This type of templates are what we call “skeleton templates” because it exists for the purpose of positioning structural blocks within a page. Such templates are located in app/design/frontend/default/default/template/page/, and you can name it anything you want – mycolumns.phtml, 2columns-left.phtml, whatever suits your fancy. “Wait a minute!!! What is all this getChildHtml(”)?> business?” you say. Ok, let’s move along.

If you examine the method getChildHtml(‘header’)?>, you will see that there’s an identifier called “header” being assigned to the area encased by the XHTML

. What getChildHtml does, is it grabs all the content blocks(see step 2 below) that is assigned to “header” via something called a layout (see step 3 below), and places it inside
2. Distribute your Content Blocks (aka Let’s cut up some real meat of the page)

Content blocks are the ones that actually parse your store’s data into visually appealing format using XHTML. Unlike other eCommerce solutions you may be used to, Magento supplies separate content blocks per separate functionalities. What this means is, your col_left.tpl (or whatever else you may be used to working with), no longer contains ALL the XHTML to be shown in the left column but rather, the functionality used in the left column will recruit its own template for use. Let’s take the demo Magento as an example. If you open a category page on your browser, you will see in the right column the following functionalities: mini-cart, compare products, newsletter and community poll. Each of these content blocks comes with its own template file. Because mini-cart is a separate functionality, as is the compare products, newsletter…etc, mini-cart has it’s own template file, compare products has its own template file, and newsletter has its own template file. The XHTMLyou create should be cut up accordingly on per functionality basis.

3. Let’s recap and comprehend
In this step, let’s take a breather and do a quick recap.
When working in the visual aspect of a store running on Magento, there’re three things you will use to visually parse your store data.

Structural Blocks
Structural blocks are the visual skeleton of a store page. These blocks exist for the sole reason of creating visual structure. Example structural blocks are header, left column, main column, footer…etc.

Content Blocks
Content blocks are the blocks that constructs the makeup of a structural block. Each content block represents distinct functionalities such as Mini-cart, mini-wishlist, compare products, newsletter signup…etc, and they comes with it’s own template.

Layouts
Located in app/design/frontend/your_package/your_theme/layout, layout is the one that puts all the pieces together. When a page loads in your store, the following things happen:
a. The layout first grabs the base skeleton template of the site.
b. It grabs all the content blocks that are assigned to the structural blocks of a page, and loads them.
Basically the layout says “Grab these content blocks and nest them inside these structural blocks.” The layout can be updated on a per page basis, so you can conveniently change the functionalities being loaded into each page of you store with just one file.

This is the absolute quick idea of how the templates work in Magento. We’re working on a full documentation and it will be released with the stable version of Magento. In the mean time, the best thing to do is read through the threads of the forum, stay active in the community and ask a lot of questions! I hope this reply gave you some understanding of how things work in Magento.

jQuery Implementation in Magento

Below are the steps to implement jQuery in Magento. There is a lot to like about it, which we’ll probably talk about another time, but it uses Prototype for a JavaScript library. Now I’m sure Prototype is wonderful and all that, but I don’t know a lick of it. I’d rather just use the library I’ve known to come and love, jQuery. But Prototype and jQuery notoriously don’t get along. This is how to deal with that.

  1. The latest version of Magento comes with a somewhat outdated version of the script.aculo.us effects file, which is part of the problem. Go get the latest version (1.8.2 right now). You may want to rename it with the version number at the end, like
    effects-1.8.1.js
  2. Upload the file to [Magento]/js/scriptaculous
  3. Open the file page.xml at [Magento]/app/design/frontend/default/default/layout/page.xml
  4. On about line 41, there will be a line like this:
    <action method="addJs"><script>scriptaculous/effects.js</script></action>

    Change the file name to your new file

  5. The layout files are normally cached, so you’ll need to clear that cache to see the effect take place. Log into the backend and go to System > Cache Management
  6. Select “refresh” from the All Cache menu and save (which should clear your cache)
  7. Reload a store page and view source to make sure your new file is the one that is loading
  8. Now you need to include jQuery on your page. You could add a new line to the page.xml file, or you could open the common head.phtml file at [Magneto]/app/design/frontend/default/default/template/page/html/head.phtml – and add your <script> for jQuery there
  9. The final step is making sure that jQuery is in .noConflict(); mode. This is the final step to making sure it plays nice with Prototype
  10. Now you need to set noConflict and write code in that mode. Basically you replace the normal “$” with a new shorthand ($j, in this case).
    var $j = jQuery.noConflict(); 
     
    $j(document).ready(function(){
        $j("#test").css("padding","10px");
    });

How to insert Url in the CMS pages?

{{store url=''}} will give base|store url

Include a Javascript file into Magento templates

Customising your magento store can be a good way to set your store apart from the competition so adding features that require javascript files is a common task when building a project.  Learn how to include a javscript file into your magento page templates with this quick how to.The default layout template load is made primarily through the page.xml file located at the following url for custom themed installs /app/design/frontend/your-instance-name/your-theme-name/layout/page.xml , or for the default theme at /app/design/frontend/default/default/layout/page.xml.

Find the following block encapsulator <block type=”page/html_head” name=”head” as=”head”> and simply add the following command inside the block

<action method=”addJs”><script>yourscriptname.js</script></action>

Then upload you updated page.xml file.

With that done, you need to now upload your javascript file to /skin/frontend/your-instance-name/your-theme-name/js/yourscriptname.js, or for the default theme /skin/frontend/default/default/js/yourscriptname.js

Get the current category name in Magento

A key part of the request execution has information stored into the Mage registry and accessing this information is a simple call requesting the needed data.  Learn how to access the registry to find the current category title.

The registry object we are interested in is ‘current_category’ and we will utilise the registry call getName() to create call to retrieve the needed information thusly;

Mage::registry('current_category')->getName();

src: http://www.magento-tutorial.com/

Creating new theme and apply it to a magento store

After finishing Magento installation its time to look at how you want your store to look, what theme will it have , and will the same theme feature across all your stores if you have more then one ?  Our tutorial shows you how to duplicate the default theme and begin to modify it to give you greater flexibility on the look and feel of your new e-commerce store.

Magentos’ file structure is divided into two key locations , one containing the files which our end user will have access to such as css and JavaScript and one containing the block, containers and actual code that will build up any given page.  For the default installations these paths are as follows when magento was installed to the root of your site:

For the building blocks of page construction – app/design/frontend/default/default/
For the accessible browser assets – skins/frontend/default/default/

In the installation above you can see that the file structure represent the hierarchy of the design aspects, in this case app/design/frontend/instance/theme/

When building a site it is a good idea to have a separate name for your instance and your theme , for example you may decide to call your instance e-commerce, and your theme standard-blue.  Giving your structures and assets a strong naming convention will help you to organise and navigate your files with ease.

So the first stage to building a new theme is to copy the two above folders and rename them as you see fit.  This will give you two new sets of files to upload to your server via FTP.

Magento will now be able to access your new instance and theme and that means we can apply our new files as standard to our store.  To do so log into your Magento admin area and choose ‘System’, from the drop down menu choose ‘Configuration’.  Once the configuration screen loads choose the ‘Design’ option from the menu on the left hand side.  If you have followed our tutorial ‘Setup a new store’ you can choose the store you wish to configure the design for by selecting it form the drop down menu in the configuration scope.

Within the design configuration panel there are two key elements we want to change, the value next to the label ‘Current Package Name’, change this to your new instance name, for example e-commerce’.  The value next to the ‘Default’ label under the themes section needs to be changed to your theme name, for example ’standard-blue’.

With these changes made choose ‘Save Config’ to have magento start to use your new files.

src: http://www.magento-tutorial.com/