In this example, we shall change the display of the product's name on a product detail page from a heading to normal text.
- Turn on Template Path Hints. The heading that we'll use in this example is a product title on the product details page. In a default Magento installation, the product title will look as follows:
We will now display the text "Nokia 2610 Phone" as normal text instead of as a heading.
To achieve that, we have to find the file in the
templatefolder of our theme that retrieves product titles and displays them.Which file to open is easiest to determine when you turn on the so-called Template Path Hints that Magento has. You will find these in the Magento admin in System | Configuration | Developer. Before you get the option to turn on Template Path Hints, you have to choose a website in the store drop-down menu in the top-left of the configuration section:
Enable the template path hints and head back to the product detail page.
- Find Magento's hint for the location of the PHTML file.
You will now see rectangles made by red lines, which indicate several sections within your product page. In the top-left corner of the rectangles are designations such as catalogproductview.phtml, as shown in the following screenshot. These designations are the template files you should look in to make changes:
Note
Don't do this in a live store! You can specify some allowed IP addresses in System | Configuration | Developer, so only people who have one of those IP addresses can view the red rectangles. That way you can ensure that only you can see the template path hints, but a mistake is quickly made and to avoid the risk of all your visitors getting the path hints it's better to have a safe testing environment for this kind of thing.
- Follow Magento's hint. Now open the
templatefolder at locationapp/design/frontend/beginner/guide/.
This will result in a list of folders that matches the different components of Magento. For example, the
checkoutfolder, which contains all PHTML files that are connected to the shopping cart and checkout process, and thecustomerfolder, which contains the PHTML files that arrange for the display of customer accounts. In our example, we need thecatalogfolder, which contains files relating to the display of categories and products. Open theapp/design/frontend/beginner/guide/template/catalog/folder.
The file we need is not present yet. We do see a folder called
product. Open that. This makes our current locationapp/design/frontend/beginner/guide/template/catalog/product/:
The
view.phtmlfile is, as we saw earlier, the file in which we need to make the desired change. - Open the PHTML file with a text editor:
- Change the code. The file contains a lot of HTML and some programming (PHP code). The relevant part for us is as shown in the following code snippet:
<h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1>
The
<h1>and</h1>pieces (called tags) cause the product title to be displayed as a heading. If we remove these and do nothing else, the line will become as follows:<?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?>
Do not change anything between the
<?phpand?>bits unless you know exactly what you are doing. After changing theH1tags your product detail page will look as follows (we turned Template Path Hints off before taking this screenshot.) By making this change, we're telling browsers and search engines that the product's name is not a heading for our product detail pages. It should be clear that this is an example only as your product's name is usually a fine heading for product detail pages! Making the change outlined would be logical if you would be adding theH1tag back somewhere else on the page: