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


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. Sep 28 '15 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 Sep 29 '15 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 Sep 29 '15 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. Sep 30 '15 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? Sep 30 '15 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? Sep 27 '15 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. Sep 27 '15 at 14:55
  • How you want exactly
    – Magento 2
    Sep 27 '15 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. Sep 27 '15 at 19:41
  • ..I've updated the post with an image of the desired layout. Sep 27 '15 at 19:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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