Out of the box, Magento is chocked-full of amazing functionality and capabilities, and can be customized for just about every type of store possible. No matter how large or small, complex or simple, multi-store or single entity, Magento can accommodate any number of stores, languages, products, attributes, categories, payments, shipping options, customers, transactions and admins. Because of this complexity, Magento is built with a huge number of files and templates to achieve its extreme flexibility.
First Favorite Development Tool – Template Path Hints
Customizing a store for Magento can be a daunting task. Sometimes just finding the right template to edit can be a huge untangling of a vast number of files. My first favorite tool is the Template Path Hints. If you have ever asked yourself, “in what template does the so-and-so that I need to edit exist?”, then you need Template Path Hints. For example, the pricing area on a product page that contains the price and the Add to Cart button might be in the Magento core templates, or the custom theme templates you are using, or in an extension’s templates that you have installed for greater functionality. In this example, say we want to add the word “yard” to the price template after the pricing box because our client sells fabric by the yard as a measurement. To easily figure out what template to edit, you will turn on Template Path Hints.
This does require admin access to the backend of Magento. Go to System/Configuration. First, you will have to put your website into another mode under Current Configuration Scope. Change Default Config to Main Website. The admin area will automatically reload.
Next, click on Developer under Advanced on the bottom-left. Then, under the Debug tab, set Template Path Hints to Yes. Click Save Config.
If you do not see Template Path Hints, you are not in the correct Current Configuration Mode, see above.
Go out the frontend of your website, and you will see the Template Path Hints active. Each section is highlighted by a red boundary, and the name of the template shows in a red box. In our product page scenario where we need to find the block with the pricing code, we see the price box is located in: frontend/[my-theme]/[my-child-template]/template/ajaxcart/catalog/product/view/addtocart.phtml
You are not the only one that can see the red hints! This is best done in a development site and not on your live site, because everyone viewing your site will see the hints. If you do not have a development site, it is best to do this when your traffic is at its lowest, as it is very disruptive to the customer who may be shopping on your site. You should always have a development site to test things in rather than test directly on your live site, but if you don’t have a dev site, put your site into temporary maintenance mode while you figure out what you need to access.
Once you have identified where in the Magento template structure you need to access, be sure to go back in and turn the Template Path Hints off, and change your Current Configuration Scope back to Default Config.
Second Favorite Development Tool
Magento comes with a SUPER easy way to change default wording on your site, no matter where it is. It might be core Magento templates, it might be in your theme templates, or in the extension templates. Rather than mucking around in the templates looking for the correct place to change wording, it may just be easier to turn on Translate Inline, and make your changes directly on the frontend of Magento. For example, our client wanted to personalize the wording on the Account Sign In page. The Magento default is:
By creating an account with our store, you will be able to move through the checkout process faster, store multiple shipping addresses, view and track your orders in your account and more.
And they wanted it changed to:
By creating an account with [OurCompany.com], you will be able to move through the checkout process faster, store multiple shipping addresses, view and track your orders in your account and more.
By turning on Translate Inline for the frontend, I was able to easily access and save the new wording without searching through any templates. Not every item everywhere will be editable, but most are that are not contained within the navigation, CMS static blocks or pages.
In the backend of Magento, go to System/Config. Scroll down to Advanced at the bottom, and click on Developer.
In the Translate Inline tab, change Enabled for Frontend to Yes. Click Save Config.
Now go out to the frontend, you will see the text has thin red boxes around the areas that can be changed. Hover over the area you want to change, and you will see a small edit icon, click on it.
A box will pop up with the original text, and a place to change the text to whatever you need. Click in the Custom box, and make your changes. Click Submit.
Refresh the page. If your changes do not show, you will likely need to flush your cache. Go to System/Cache Management, and click on the Flush Magento Cache button.
Refresh again, and you should see your changes.
The ability to change wording on the site using Translate Inline is available to anyone viewing your site! You do not need to be an admin to make the changes. Be sure to make changes when your traffic is lowest, or take your site offline and put up a maintenance page if you have extensive items you want to edit. Be sure to work efficiently, and turn Translate Inline off as quickly as possible.
You can also use Translate Inline for the admin area as well. In Translate Inline, change Enabled for Admin to Yes and click Save Config. You will see the same thin red boxes around items in the backend of Magento that you can change. Hovering over them will give you the same option for editing as outlined above.
I hope these two tools will make it easier for you to find and edit the areas in Magento you need to. If you have any questions about where to find things, please leave it in the comments below.