In this example, we shall change the display of the product's name on a product detail page from a heading to normal text.
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 template
folder 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.
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:
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.
template
folder at location app/design/frontend/beginner/guide/
.This will result in a list of folders that matches the different components of Magento. For example, the checkout
folder, which contains all PHTML files that are connected to the shopping cart and checkout process, and the customer
folder, which contains the PHTML files that arrange for the display of customer accounts. In our example, we need the catalog
folder, which contains files relating to the display of categories and products. Open the app/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 location app/design/frontend/beginner/guide/template/catalog/product/
:
The view.phtml
file is, as we saw earlier, the file in which we need to make the desired change.
<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 <?php
and ?>
bits unless you know exactly what you are doing. After changing the H1
tags 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 the H1
tag back somewhere else on the page: