(734)545-8017

The Human Element Blog

Magento Tips – Changing templates on the fly

Posted Apr 01, 2011 by

There are so many ways to change the look of a page on your Magento store.  I’ll show you how to do it by simply overriding  the template file on the fly.  This is a simple and maintainable way to swap one look for another.  If you need to come up to speed on Magento’s terminology or techniques, I’ve included links on the major terms over to the Magento Wiki so you can read up as needed.

What gets displayed on a Magento store page is controlled by the layout files in the store’s theme package. Magento’s layout hierarchy starts with a base layout defined in the theme’s page.xml file. Updates to the base layout are then layered on for specific sections of the site using the layout definitions in your store’s theme files. This results in the customized look and feel for your site.  (Did I use layout enough times in that sentence or what?)

Layouts define the blocks that are shown on each page and the template files that are used to render those blocks. All the content that is displayed in the block is generated by the php and html in the template file.

The theme/layout/template settings are then used on all the pages of your site.  All categories use the same category layout, all the products use the same product layout, all CMS pages use the same CMS layout.  Now what do you do if you want  the page for one category to look or act differently?

One common choice is to create a different theme and to have the category override the site’s theme with the new one. This is pretty easy to do, all you have to do is to copy the category layout and theme files from the site’s theme to a new set of theme directories. You can then modify these files and set the category’s Custom Design to use the alternate theme.

The drawback to this method is that you have a portion of your theme duplicated and any changes to you base theme will have to be duplicated in these files too. Plus, with the complexity of the Magento directory system, it’s easy to forget that you’ve created an alternate theme for this one page.

Another, easier way to update the look of the page, is to change the template file that is used to render the page’s content. Again this is done on the category’s Magento admin page under the Custom Design tab.  This time we’re going to apply a custom layout. Usually the custom layout field is used to add or remove block referenced from the layout for this page, however, we can also update existing blocks as well.

The first step is to create the custom template. In this case we will just copy the catalog category view template to catalog category view_alt1.  The view template is located in the Magento directory –

app/design/frontend/<your package>/<your theme>/template/catalog/category/view.phtml

Just duplicate this file and name it as view_alt1.phtml.  Make sure to keep it in the same directory or Magento will not be able to find it and it will render a blank page.

Make the html and/or php code changes you need for this category and save the file.

Now go into Magento’s admin and edit the category you want to change.  Under the custom design tab paste the following code in to the Custom Layout Update field –

<reference name="category.products">
<action method="setTemplate">
<template>catalog/category/view_alt1.phtml</template>
</action>
</reference>

When you reload the category page in the store, it will be using the view_alt1.phtml template instead of the view.phtml template the rest of the categories use.

Cool huh?

You can find more about layouts in the Magento Designer’s Guide on Magento.com

That’s all for now – look for more Magento tips coming up soon.

 

 

Tags: Magento

Posted By

Chief Technology Officer

Comments (1)

Abraham posted

Amazing article. This is exactly the solution I was looking for.

Post a comment