5 Simple Ways To Properly Customize A Magento Theme

All Magento themes are built keeping generic features in mind, but to make a brand name you have to customize your Magento store to match with your requirements and preferred look and feel. I am going to give you 5 simple ways to customize a Magento theme.

I am assuming that you are using fresh Magento copy on your server.

Magento Customization Tip 1:

To start you need to create two dirs. Basicly you can just copy the theme from Magento default theme folder
- copy /app/design/frontend/default/default to /app/design/frontend/default/your_theme (contain layout and html files)
- copy /skin/frontend/default/default to /skin/frontend/default/your_theme ( contain images, CSS, JS )

Magento Customization Tip 2:

To assign theme to a store

  1. Go to Admin > System -> Configuration -> Design tab
  2. choose website or store-view level
  3. in Current package name, enter the name of the interface in which your new theme resides ( i.e. default)
  4. in Default (under Themes heading), enter the name of the new theme ( i.e. your_theme )

Magento Customization Tip 3:

Edit your Magento store’s home page
To edit home page go to Admin > CMS -> Manage Pages -> Home page

Magento Customization Tip 4:

Chose your store’s skeleton (visual design)

Skeleton templates are located in app/design/frontend/your_interface/your_theme/template/page/. Basic skeletons are

  1. 1-column
  2. 3-column
  3. 2-column-right
  4. 2-column-left

Magento Customization Tip 5:

Increase your store’s sale by showing popular, most viewed or featured products on home page

How To Display Featured products on Magento Store’s Home Page

  1. Create a category to contain the featured products. Call it e.g. Featured & Set ‘Is Active’ to ‘No’. That way, it won’t display in the catalog menu.
  2. After saving the category, please note what ID it gets. You can see it in the last part of the URL. If the URL ends with catalog_category/edit/id/8/, the ID is 8.
  3. Add products for the home page to the new category.
  4. Edit the Home Page (CMS -> Manage Pages -> Home Page) and add the following content, where 8 should be replaced by your category ID:
    1
    
    {{block type="catalog/product_list" category_id="8" template="catalog/product/list.phtml"}}

How To Display Random products on Magento Store’s Home Page

Showing Random products is a good idea to showcase on your store’s home page. Sometimes these products are buried too deep that they hardly sell, showing them on home page will boost their sale.

To display random products on home page in Magento Theme you need to follow the below give steps:-
Step 1. Create a new file called random.phtml at app/design/frontend/default/Your_Theme/template/catalog/random.phtml with the following given code:-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<?php 
$chosen_category = Mage::getModel('catalog/category')->load($this->getCategoryId());
$_productCollection = $this->getLoadedProductCollection();
$number_of_products = $this->getNumProducts();
if (sizeof($_productCollection) < $number_of_products) {
	$number_of_products = sizeof($_productCollection);
}
$displayed_products = array();
foreach ($_productCollection as $_product) {
	$displayed_products[] = $_product;
}
$random_products = array();
if (sizeof($_productCollection) > 1) {
	$random_products = array_rand($displayed_products, $number_of_products);
} else {
	$random_products = array('0');
}
?>
<?php if(!$_productCollection->getSize()):?>
<div class="note-msg">
    <?=$this->__('There are no products matching the selection.')?>
</div>
<?php else:?>
 
<div class="main-binder">
  <div class="cms-box">
  <div class="category-title">
      <h2>Random Products</h2>
  </div>	
  <div class="category-products">
    <table id="products-grid-table" class="products-grid">
	<?php 
	$k=0;
	for ($i=0; $i < $number_of_products; $i++): ?>
	<?php if ($k == 0) { ?>
			<tr class="first odd">
		<?php } if($k==3)	{ $k=0;  ?> 
			</tr><tr class="first odd even">
		<?php } ?>
        	<td id="td_<?php echo ($k+1); ?>" <?php if($k==3){ ?>class="last"<? } ?> >
		<div class="cms-box">
              <div id="cont_<?php echo ($k+1); ?>">
			  <div class="product-name-block">                 
				  <?php
				  $pname=$this->htmlEscape($displayed_products[$random_products[$i]]->getName());
				  ?>
				  <h3 class="product-name">				  
				  <a href="<?php echo $displayed_products[$random_products[$i]]->getProductUrl()?>" title="<?php echo $pname; ?>">
                    <?php if(strlen($pname) > 28) {echo substr($pname,0,25)."...";}else {echo $pname;}?>
                    </a></h3>
                </div>
                <div class="image-box"> 				
				<a class="product-image" href="<?php echo $displayed_products[$random_products[$i]]->getProductUrl()?>"> <img src="<?php echo $this->helper('catalog/image')->init($displayed_products[$random_products[$i]], 'small_image')->resize(140);?>" alt="<?php echo $this->htmlEscape($displayed_products[$random_products[$i]]->getName())?>" title="<?php echo $this->htmlEscape($displayed_products[$random_products[$i]]->getName())?>"/> </a> 
				</div>
 
				<div class="cms-price-box" style=" text-align:center;">
					<span class="regular-price" id="product-price-37">						
						<span class="price" ><?php echo Mage::app()->getLocale()->currency(Mage::app()->getStore()->
     getCurrentCurrencyCode())->getSymbol().$displayed_products[$random_products[$i]]->getPrice(); ?></span>
					</span>                      
				</div>
				<div class="button-row" style="text-align:center;">
							<button onclick="setLocation('<?php echo $displayed_products[$random_products[$i]]->getProductUrl();?>')" class="button" type="button"><span><span><span>Details</span></span></span></button>																															
					<button onclick="setLocation('<?php echo $this->getUrl('')."/checkout/cart/add?product=".$displayed_products[$random_products[$i]]->getId()."&qty=1"  ?>')" class="button"><span><?php echo $this->__('Add to Cart') ?></span></button>
				</div>
              </div>
        </div></td>	
 
<?php $k++; ?>
<?php endfor;?>
</tr>
      </table>     
    </div>
  </div>
</div>		
<?php endif;?>

Step 2. Now put this line where you want to show the best selling products.

1
<p>{{block type="catalog/product_list" category_id="3" num_products="8" template="catalog/random.phtml"}}</p>

Note: Category Id will be specific to your Store

How To Display Most Viewed products on Magento Store’s Home Page

Showing most viewed products is also a good idea, this way you can showcase products which are viewed most but not sold too often.

Step 1. Create a file app/code/local/Mage/Catalog/Block/Product/Mostviewed.php and add the following code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class Mage_Catalog_Block_Product_Mostviewed extends Mage_Catalog_Block_Product_Abstract{
    public function __construct(){
        parent::__construct();
        $storeId    = Mage::app()->getStore()->getId();
        $products = Mage::getResourceModel('reports/product_collection')
            ->addOrderedQty()
            ->addAttributeToSelect('*')
            ->addAttributeToSelect(array('name', 'price', 'small_image'))
            ->setStoreId($storeId)
            ->addStoreFilter($storeId)
            ->addViewsCount();
        Mage::getSingleton('catalog/product_status')->addVisibleFilterToCollection($products);
        Mage::getSingleton('catalog/product_visibility')->addVisibleInCatalogFilterToCollection($products);
 
        $products->setPageSize(5)->setCurPage(1);
        $this->setProductCollection($products);
    }
}

Step 2. Create a file app/design/frontend/default/YourTheme/template/catalog/product/mostviewed.phtml and add the following code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<?php if (($_products = $this->getProductCollection()) && $_products->getSize()): ?>
<div class=" most_viewed">
<div class="mv_title"><?php echo $this->__('These Products Are Popular Right Now!') ?></div>
<?php $_collectionSize = 5;//count($_products->getItems()); echo $_collectionSize; ?>
<ul class="products-grid" id="products-grid-table">
<?php $i=1; foreach ($_products->getItems() as $_product): ?>
    <li id="td_<?php echo $i;?>" <?php if($i%5==0 or $i==$_collectionSize){echo 'class="last"';} ?> >
        <div id="cont_<?php echo $i;?>">        
            <a class="product-image" href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>">
                <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" />
            </a>
            <h3 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><?php echo $this->htmlEscape($_product->getName()) ?></a></h3>
            <div class="a-center">                        
                <?php if($_product->getRatingSummary()): ?>
                    <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
			    <?php endif; ?>
                <?php echo $this->getPriceHtml($_product, true) ?>
                <?php if($_product->isSaleable()): ?>
                    <button class="button" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><span><?php echo $this->__('Add to Cart') ?></span></span></span></button>
                    <div class="clear"></div>
                <?php else: ?>
                    <p class="availability"><span class="out-of-stock"><?php echo $this->__('Out of stock') ?></span></p>
                    <div class="clear"></div>
                <?php endif; ?>
                <ul class="add-to-links">
                    <?php if ($this->helper('wishlist')->isAllow()) : ?>
                    <li><a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>"><?php echo $this->__('Add to Wishlist') ?></a></li>
                    <?php endif; ?>
                    <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
                    <li class="last"><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>"><?php echo $this->__('Add to Compare') ?></a></li>
                    <?php endif; ?>
                </ul>
            </div>
        </div>
    </li>
<?php $i++; endforeach; $kol = $_collectionSize; ?>
</ul>
</div>
<?php endif; ?>

Step 3. now put this line where you want to display most viewed products.

1
{{block type="catalog/product_mostviewed" template="catalog/product/mostviewed.phtml"}}">

How To Display New Products on Magento Store’s Home Page

To display new products on your store’s home page just Go to Admin >CMS > Manage Pages > Home Page from the list of pages.
Now paste this code snippet to show products labeled as “new” on your front page:

1
{{block type="catalog/product_new" name="home.catalog.product.new" alias="product_homepage" template="catalog/product/new.phtml"}}

Note that you must have some new products in your catalog for anything to show when you do this. This doesn’t mean that you’ve recently added them; only products explicitly marked as new using “Set Product as New from Date” and “Set Product as New to Date” options in the “General” product information page in the admin tool will be shown here.

Note, to see the customized theme changes properly follow some useful tricks :

  1. Disable caching to see changes you made, to disable go to Admin > System -> Cache Management
  2. To make customization bit easier you could enable template path hints to see which modules you need to edit
    1. Admin > System -> Configuration
    2. scroll to the bottom and click on Advanced tab
    3. choose your store ( i.e. English ) and turn on path hints to yes

    This will show the path of the files page block is coming from. after customization you can set path hints to No.

There are lost of other Magento customizations as well which we will discuss later. Please leave me a comment and let me know your experiences of customizing a Magento Theme. Subscribe our RSS to receive latest Magento updates.

  • http://www.fmeextensions.com/ Magento Modules

    excellent tips! thanks

  • satyam

    i am not getting it ,whether we have to make a new folder under the under
    /app/design/frontend/default/ just like /app/design/frontend/default/myfolder

    and
    skin/frontend/default/default/ folder just like skin/frontend/default/default/ folder/myfolder

  • Christian

    Many thanks for your time to share these tips.