Magento 1.9 – How to Add Layout to Homepage

Just follow my answer on this recent thread.

Basically you need to create a structural block that should come just below the content section, but just above the footer section. This way structural block will appear after the content section, which is in 2 column right bar section.

Please note, instead of 2-column-left.phtml that I have used in that answer, you need to call the structural block inside 2-column-right.phtml.

Hope that helps

Edit

It seems that the provided link is not working now. So I am now responsible to add a full solution here. Thanks for my friend @DavidManners to notify me. :-)

Basically we need to add a structural block in between content section and footer section. For this create a local.xml file and add this layout update.

File : app/design/frotend/<package>/<theme>/layout/local.xml

<layout>
    <default>
        <reference name="root">
             <block type="core/text_list" name="block.after.content" as="after_content" translate="label">
                <label>Sub Content Area</label>
            </block>
        </reference>
    </default>
</layout>

By putting this content, we just added a new structural block inside root block. Here root block is what page layout block. It determines which layout a page holds. So the template file corresponding to root block vary depend upon the layout we need. Suppose if we need a 2 column right layout, then what we need to do is set the correpsponding template to this block. It would be done like this.

   <reference name="root">
        <action method="setTemplate"><template>page/2columns-right.phtml</template></action>
    </reference>

Now I assume your page is 2 column right layout, then in that case, you need to add this content by manually editing the file.

File : app/design/frontend/<package>/<theme>/template/page/2columns-right.phtml

   <div class="main-container col2-right-layout">
        <div class="main">
            <?php echo $this->getChildHtml('breadcrumbs') ?>
            <div class="col-main">
                <?php echo $this->getChildHtml('global_messages') ?>
                <?php echo $this->getChildHtml('content') ?>
            </div>
            <div class="col-right sidebar"><?php echo $this->getChildHtml('right') ?></div>
        </div>
    </div>

    <!-- here comes our custom content -->
    <div><?php echo $this->getChildHtml('after_content') ?> </div>

Here we are calling our block after_content manually. The position at which the block is calling is very important here. It should be in between the (content, right) blocks and footer block. This way our block will get a full-page-width access.

However the manual addition I have shown above should do in a custom theme. Dont do this in base/default theme. Always use a package theme other than base/default for better extendability. Additionally, if you need to include this block in every page layout, then you need to repeat the second operation in every other page layout template files. ie phtml files that comes inside app/design/frontend/<package>/<theme>/template/page/ directory.

A quick fix is to set the CSS property clear: right for the upsell products block.

I still would like to understand why the upsell products block shrinks to half screen when details tabs product.info.details are moved to the product.info.main block.