Looking to Increase Revenue From Your Website?

Schedule a FREE 30-minute power consultation now.

Magento - Show Category Thumbnails on CMS Page

One of the most common requests I get from clients regarding their Magento websites is to list the categories on a CMS page (ie Shop Our Products page). Turns out, it's a very simple process, only requiring 2 steps. This works on Magento 1.9+ and may even work on older versions.

See This Example at SolarScreenOutlet.com

Solar Screens

Step 1:

In your Magento admin, go into your CMS Page (CMS > Pages > click page name) and click the Design tab on the left side. Add the following code to the Layout Update XML box:

<reference name="content">
    <block type="catalog/navigation" name="catalog.categories" template="catalog/navigation/showCategories.phtml">
        <action method="setColumnCount"><count>3</count></action>
    </block>
</reference>

Step 2:

Next, create a .phtml file, add the following code and name it showCategories.phtml. Put it in the directory app/design/frontend/yourpackage/yourtheme/template/catalog/navigation/

<?php $_maincategorylisting=$this->getCurrentCategory();?>
<?php $_categories=$this->getCurrentChildCategories();?>
<div class="categoryGrid">
        <?php $_columnCount = $this->getColumnCount(); ?>
        <?php $i=0; foreach ($_categories as $_category): ?>
        <?php if($_category->getIsActive()): ?>
        <?php $cur_category=Mage::getModel('catalog/category')->load($_category->getId()); ?>
        <?php $layer = Mage::getSingleton('catalog/layer'); ?>
        <?php $layer->setCurrentCategory($cur_category); ?>
        <?php if ($i++%$_columnCount==0): ?>
            <ul class="products-grid">
        <?php endif; ?>
                <li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
                 <a href="<?php echo $this->getCategoryUrl($_category); ?>" title="<?php echo $this->htmlEscape($_category->getName()); ?>">
                     <img src="<?php echo Mage::getModel('catalog/category')->load($_category->getId())->getimageUrl(); ?>" alt="<?php echo $this->htmlEscape($_category->getName()); ?>" title="<?php echo $this->htmlEscape($_category->getName()); ?>">
                 </a>
                <h3><a href="<?php echo $this->getCategoryUrl($_category); ?>" title="<?php echo $this->htmlEscape($_category->getName()); ?>"><?php echo $this->htmlEscape($_category->getName()); ?></a></h3>
                <a href="<?php echo $this->getCategoryUrl($_category); ?>" title="<?php echo $this->htmlEscape($_category->getName()); ?></a>" class="button">View Products</a>
                </li>
        <?php if ($i%$_columnCount==0 || $i==count($_categories)): ?>
            </ul>
        <?php endif; ?>
<?php endif; ?>
        <?php endforeach; ?>
</div>

Be sure you have uploaded a photo for each category or they may not show up at all.

Looking to Increase Revenue From Your Website?

Schedule a FREE 30-minute power consultation now.