In RWD I have a 3 column layout for category pages - I want the category 'banner image' and title to show above the columns below - sitting below the breadcrumbs. How can I go about this? Here's an illustration of the current set up...

Breadcrumbs here...

Nav sidebar here | Banner and cat title Here & Products Below

Any advice please on how to get to the following....

Breadcrumbs here...

Banner and cat title here...

Nav sidebar here | Products here

Page Layout

2 Answers 2


For this you need to create a structural block only for category pages. Steps to do this is given below.

1. Define your structural block

File : app\design\frontend\{package}\{theme}\layout\local.xml

        <reference name="root">
            <block type="core/template" name="category.top.banner" as="category_top_banner" template="custom/category/top_banner.phtml"></block>

Here <catalog_category_view /> is a specific layout update handle node for category pages. ie Magento process this layout handle only when it renders a category page. Our structural block is category.top.banner and it is added to root block.

2. Call Our Block in Root Template

File : app\design\frontend\{package}\{theme}\template\page\3columns.phtml

<div class="main">
            <?php echo $this->getChildHtml('breadcrumbs') ?>
            <?php echo $this->getChildHtml('category_top_banner') ?>

As you can see, we are calling our block just below breadcrumbs block. Follow the same step in every page layout template files (ie files inside page\ directory) in order to obtain the same result in every page layout.

  • Hi Rajeev, I've updated as you said above but the position of the image hasn't moved unfortunately, it's still contained within the wrapper. Commented Sep 28, 2015 at 18:35
  • @user2046646 I didn't get what you are mentioning as wrapper. but putting that line of code in different section of 3columns.phtml will yield you different results. Try to put that just below after_body_start section Commented Sep 29, 2015 at 1:01
  • Hi Rajeev, thanks, but again this didn't have any effect, I don't think the code is actually showing the banner - the only banner that exists is the original which as far as I can see is part of the 'content' getChildHtml call in the category/view.phtml Commented Sep 29, 2015 at 18:34
  • @user2046646 if you done the above steps properly and cleared your cache, I am sure you are going to see the block in 100% width at top. Commented Sep 30, 2015 at 1:31
  • Do I need to disable (/*comment out*/) the existing call to the category banner image in the .view.phtml' file for this to work? Commented Sep 30, 2015 at 7:46

Goto theme folder Catalog->category->view.phtml

use this code Before

    $_helper    = $this->helper('catalog/output');
    $_category  = $this->getCurrentCategory();
    $_imgHtml   = '';
    if ($_imgUrl = $_category->getImageUrl()) {
        $_imgHtml = '<p class="category-image"><img src="'.$_imgUrl.'" alt="'.$this->escapeHtml($_category->getName()).'" title="'.$this->escapeHtml($_category->getName()).'" /></p>';
        $_imgHtml = $_helper->categoryAttribute($_category, $_imgHtml, 'image');

<?php if($_imgUrl): ?>
    <?php echo $_imgHtml ?>
<?php endif; ?>

<div class="page-title category-title">
    <?php if($this->IsRssCatalogEnable() && $this->IsTopCategory()): ?>
        <a href="<?php echo $this->getRssLink() ?>" class="link-rss"><?php echo $this->__('Subscribe to RSS Feed') ?></a>
    <?php endif; ?>
    <h1><?php echo $_helper->categoryAttribute($_category, $_category->getName(), 'name') ?></h1>

<?php echo $this->getMessagesBlock()->getGroupedHtml() ?>

<?php if($_description=$this->getCurrentCategory()->getDescription()): ?>
    <div class="category-description std">
        <?php echo $_helper->categoryAttribute($_category, $_description, 'description') ?>
    <?php endif; ?>

<?php if($this->isContentMode()): ?>
    <?php echo $this->getCmsBlockHtml() ?>

<?php elseif($this->isMixedMode()): ?>
    <?php echo $this->getCmsBlockHtml() ?>
    <?php echo $this->getProductListHtml() ?>

<?php else: ?>
    <?php echo $this->getProductListHtml() ?>
<?php endif; ?>
  • Thanks Learning Magento - use this code before what please? Commented Sep 27, 2015 at 14:48
  • I've moved the image call to the top of the page (after the if statement) however it's still within the main column container and as such still sits to the right of the left hand navigation. Commented Sep 27, 2015 at 14:55
  • How you want exactly
    – Magento 2
    Commented Sep 27, 2015 at 17:59
  • Hi, I want the banner to be 100% width, as such it needs to sit outside the wrapper that contains the other elements. So you'd end up with banner on top, then the left sidebar and central column below it. Commented Sep 27, 2015 at 19:41
  • ..I've updated the post with an image of the desired layout. Commented Sep 27, 2015 at 19:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.