Magento Theme Design 101: Add a footer (or Header) static callout block for CMS page

Magento offer lots of flexibility for theme design, but it takes a bit of digging and exploring before one can learn to do a new simple trick.

In the Magento default template, it shows us how to place a permanent callout block in the left column by using the <reference name="left">. Example of the code is located in the "catalog.xml", right in the <default> section.

 <reference name="left">
 <block type="core/template" name="left.permanent.callout" template="callouts/left_col.phtml">
<action method="setImgSrc"><src>images/media/col_left_callout.jpg</src></action>
 <action method="setImgAlt" translate="alt" module="catalog"><alt>Our customer service is available 24/7. Call us at (800) DEMO-NUMBER.</alt></action>
 <action method="setLinkUrl"><url>checkout/cart</url></action>
 </block>
 </reference>

This is one way of doing it. Though it's nice, easy and straight-forward, but it lacks the flexibility and the method maybe a bit intimidating to people who know very little about web design and get nervous on touching the source code. So, to make it a bit more friendly for store owner, we can replace the above code to a static block with a block ID, so that store owner can add a new static block in the admin/CMS/Static Block, and can place as many images and content as he sees fit.

How do we do that?

To achieve this, we use the following code instead, and name the block ID as left_column_block. Note that because I wanted this callout block shows up in every page, so I have it placed in the <default> section just like the example Magento default theme shows.

  <reference name="left">
<block type="cms/block" name="left.permanent.callout">
  <action method="setBlockId"><block_id>left_column_block</block_id></action>
  </block>  
  </reference>

Then I go to admin/CMS/Static Block, add a new block, enter a block title, enter left_column_block as Identifier; enable it, and enter something in the content. In this example I am using a promotional teaser image file:


 <a href="http:/your-domain.com/destination-of-this-image"><img src="" width="206" class="callout" alt="25% off " /> </a>

Here comes the result after saving the block: example of Magento callout block

How about taking it to the next level?

With the same method, we can extend the static block to header, footer and the content area. In the following example, I am going to show you how to do it for the footer block.

To do this, we follow the same step as the left_column_block and reference it to footer; because it's most logical to have this footer static block shows up throughout the entire site, so I am going to place it in the <default> section in the "catalog.xml" and I named it footer_callout_block. 

 <reference name="footer">
<block type="cms/block" name="footer.permanent.callout" as="footer_callout">
<action method="setBlockId"><block_id>footer_callout_block</block_id></action>
 </block>            
</reference>
One more step before creating a new static block in the admin CMS.

In order for the footer callout block shows up, we need to add a "getChildHtml" to invoke the block in the CMS static block. So we go open up the footer.phtml which is located in the page/html. Note that to have the block shows up exactly where you want it be, requires a bit of CSS coding, but I will skip this part as this is a design decision that you should make, not me. In my example, I have a 2 columns floated layout in the footer, and I want this footer_callout_block placed on the right column, so I have it placed inside the col2 like so:

<div class="col2">
<?php echo $this->getChildHtml('footer_callout') ?>
 </div>

Then I proceed to the last step by creating a new static block in the admin CMS,and name the following:

  • Block Title*: Footer Callout Block
  • Identifier*: footer_callout_block
  • Content *: <a href=""> <img src="" width="377" alt="ship via USPS and UPS" /> </a>
example of Magento footer callout block
Get Creative and take it even further

With the same method and logic, we can extend it to have different static blocks (content/images) place in different area of the site or have them place on specific page. For example, if I want to show an image in the cart page or customer logged in area, I can have it calls in the customer.xml or cart.xml.