Free & Custom Magento Themes
Free Magento Themes Premium Magento Themes Resources

Magento Resources - Articles & Advice

Download free custom themes for Magento based stores.

Magento is a revolution in Open Source Ecommerce! We will be posting templates and themes that you can use to enhance the look of your Magento store. Changing templates is a snap!

Please check back soon as we post new information to this site!

Here are a couple quick Magento Tips that I have learned:

How to get the current theme folder

<?php echo $this->getSkinUrl('') ?>

This will return something similar to: http://www.yoursite.com/skin/frontend/default/default/

Why it's useful:
If you are adding a new CSS style with a background image, put the image in your theme images folder and reference it like so:

.className {
background-image: url(<?php echo $this->getSkinUrl('images/') ?>imageName.gif);
}

You could also include a js file like this:
<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/Script.js')?>"></script>

 

Tutorial: Setup a new Website/Store/Store View and apply a custom theme to your new Magento store

  1. Duplicate and rename these folders:
    /skin/frontend/default/
    /app/design/frontend/default/
    Now upload your new folders:

    /skin/frontend/newTheme/
    /app/design/frontend/newTheme/

    Our new package name is "NewTheme" and our theme will be called "default"

  2. First, disable the Cache. System > Cache Management, select "Disable" fromthe All Cache dropdown and save.

    Then go to System > Manage Stores

  3. Click Create Website

    Enter a name for your store. I recommend using your domain name. (NewMagentoStore.com)
    Enter a code for your store. I use the domain name without the .com (newmagentostore)
    Click Save Website.

  4. Click Create Store

    Select your new Website from the dropdown (NewMagentoStore.com)
    Enter a name for your store. (NewMagentoStore.com Main Store)
    Select your Root Category

  5. Click Create Store View

    Store: select our new Store Name (NewMagentoStore.com Default View)
    Name: enter a unique name. (NewMagentoStore Default)
    Code: This unique code is what we reference in our index.php file. example: newmagentostoredefault
    Status: Enable

    Ok, our new store is setup! Now we need to apply our custom theme that we uploaded in Step 1.

  6. Go to System > Configuration

    In the top left you will see dropdown labeled "Current Configuration Scope". We need to select our Website Name (NewMagentoStore.com)

  7. Under General, click Design

    Under Package, uncheck "Use default" and type the name of your package into the text field. The package name in our case is NewTheme (See Step 1)
    Under Themes, uncheck all "Use default" and type your theme name into the text field. The theme name in our case is just "default"

    At this step, you could also customize your HTML Head, Header and Footer text.

    Ok the new package and theme has been applied to our store. Now we need to tell index.php to use the new store we have setup.

  8. Open index.php and edit this line (usually the very last line in the file):

    Mage::run('default');
    ...to use the Code of your new Store View. In our case, we used the code "newmagentostoredefault" (See Step 5). Our index.php file then contains this:

    Mage::run('newmagentostoredefault');>

All Done! Just refresh your home page and you should see the new theme.

Need help getting a good Magento Theme design? We will have free and paid themes available very soon!