In this topic, we are going to explore quickly how to customize some of the main sections of the theme. Then you will be able to apply this information to personalize any blocks of your awesome theme!
1. The products grid
To customize the default products grid, duplicate the list.phtml file in to your theme. The path of the file is /app/design/frontend/base/default/template/ catalog/product.
You can use the same structure we used for list-home.phtml to make it look like the grid in the home page.
The products category page is managed by two different handles:
- Layout handle for the default category: <catalog_category_default>
- Layout handle for the layered category: <catalog_category_layered>
In order to use the <catalog_category_layered> handle, the category must have the setting Is Anchor set on Yes. This option is available on the admin area, under the Display Settings tab of the Manage Categories section of the category, as shown in the following screenshot:
Let’s suppose that we want to set the main template for the default category view to one column; in this case, we have to insert the action setTemplate into the catalog_category_default handle in the following manner:
<catalog_category_default>
<reference name=”root”>
<action method=”setTemplate”>
<template>page/1column.phtml</template>
</action>
</reference>
</catalog_category_default>
If we want to set a different template, for example, two columns with the right-hand side sidebar for the layered categories, we will have to set the action in the other handle as follows:
<catalog_category_layered>
<reference name=”root”>
<action method=”setTemplate”>
<template>page/2columns-right.phtml</template>
</action>
</reference>
</catalog_category_layered>
In this specific case, we need to move the layered navigation to the right column, because by default it is shown on the left sidebar, and in the 2columns-right layout, we don’t have the left sidebar. To do this, add the following code inside the catalog_category_layered handle, inside the reference name right:
<reference name=”right”>
<block type=”catalog/layer_view” name=”catalog.leftnav” after= “currency” template=”catalog/layer/view.phtml” before=”-“/>
</reference>
2. The product page
The file that manages the product view page is view.phtml. It’s located at /app/ design/frontend/base/default/template/catalog/product, and its layout handle is <catalog_product_view>.
The product page default setting is 2 columns with the sidebar to the right. For this theme, you can leave this structure or set the template to 1 column without sidebars.
If you decide to set to 1 column, change the root template to the 1column template as given in the following code:
<catalog_product_view>
<reference name=”root”>
<action method=”setTemplate”>
<template>page/1column.phtml</template></action>
</reference>
</catalog_product_view>
3. File paths and handles for the other sections of the theme
In order to customize other theme sections, you will always need to follow the same steps, which includes finding the file path in the base theme and finding the layout handle to set a layout update.
The following table will help you find some useful paths and handles for the main sections that you would like to personalize:
Source: Sacca Andrea (2014), Mastering Magento theme design, Packt Publishing; Illustrated edition.