There's multiple ways to do this and advantages and disadvantages of each but probably the easiest way (but not necessarily the best) to get started is to copy:

app/design/frontend/base/default/ -> app/design/frontend/default/<theme_name>/

Do the same for the skin folder:

skin/frontend/base/default/ -> skin/frontend/default/<theme_name>/

Now go into admin and System->Configuration->Design and:

  • Current Package Name: default
  • Default: <theme_name>
  • Make sure the others are all blank.

You should now see the blank theme showing up on the front of your site! Magento has a fall-back style templating system which basically says "look here, if it's not there, look here.. if it's not there look here" etc. What we've just done is put all the files that will relate to your design in your own folder so whatever you are seeing in your design is either coming from that XML layout files, PHTML template files or css in your <theme_name> folders.

I would HIGHLY Suggest installing this extension.

Remember when you install extensions always do 2 things afterwards. 1) Clear the cache 2) Logout and login again. Then go into Admin -> System -> Configuration -> Developer and enable the extension.

The main functionality you will use from this extension is a) Template Path Hints. b) Refresh Cache.

Your main changes you will ever make will be in:

  • app/design/frontend/default/<theme_name>/layout/page.xml (defines elements for ALL pages)
  • app/design/frontend/default/<theme_name>/layout/catalog.xml (defines elements for the catalog)
  • app/design/frontend/default/<theme_name>/template/catalog/product/list.phtml (grid view / list view are in here)
  • app/design/frontend/default/<theme_name>/template/catalog/product/view.phtml (when viewing the actual product)
  • skin/frontend/default/<theme_name>/css/styles.css

Then, you want to go and read this about static blocks. I tend to remove the "callouts" in and replace them with static blocks so they are easily editable by customers in the admin.

As an example, go and create a static block and give it an identifier: left-callout and enter some random text or an image.

  1. Now go and open up your catalog.xml
  2. Find the section that says

            <reference name="left">                                                                                                      
                <block type="core/template" name="left.permanent.callout" template="callouts/left_col.phtml">                    
                <action method="setImgSrc"><src>images/media/col_left_callout.jpg</src></action>                                     
                <action method="setImgAlt" translate="alt" module="catalog"><alt>Our customer service is available 24/7. Call us at (555) 555-0123.</alt></action>                                                                                                        
                <action method="setLinkUrl"><url>checkout/cart</url></action>                                                        

Replace it with this:

        <reference name="left">                                                                                                      
               <block type="cms/block" name="left.callout" before="-">
               <action method="setBlockId"><block_id>left-callout</block_id></action>

Refresh the cache and then refresh the frontpage.

Alternatively, you could:

open app/frontend/default/<theme_name>/template/page/html/footer.phtml

add this text somewhere:

    <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('left-callout')->toHtml() ?>

and now that same static block you created earlier should show up in your footer of your site somewhere.

If you're on Linux, grep -R is your friend. If you're on Windows / Mac. Find a good IDE that has project support so you can "search all files in project" - you will use it a lot in the beginning.