A Magento theme is essentially a group of files that define the look, feel and overall layout of your store. Magento allows the use of multiple concurrent themes, and is not restricted to a single, active theme like WordPress. In this way, you can customize every aspect of your store while not having every page adhere to the same theme. This guideline will help you better understand the aspects and elements of a theme, as well as the basics of building your own.

NOTE: This tutorial does not cover theme installation. For instructions on how to install a theme please refer to this post.

Basic Model (In Hierarchal Order)

  1. Website Level – One or more store of the same customer/order information, shopping cart, etc.
  2. Store Level – A collection of store views. A container to group all related products.
  3. Store View Level – Essentially Store Level, but slightly different. Typically used to display Stores in different languages. (French, German, etc.)

*Multiple sites and stores can be run off of one single Magento installation.

Blocks

Magento uses “blocks” in order to represent different components and functionality. These blocks make it easier for developers and theme designers to customize the functionality/look and feel of their store. There are two types of blocks in Magento:

Structural Blocks – These are the containers for the Header, Footer, Right/Left Columns and Primary Area (or Main Content Area). Some examples of structural blocks have been highlighted below in red.

Pix 1

Content Blocks – These are blocks within structural blocks. Site navigation, callout, category listing, etc. These can be static images, widgets, etc. Some examples of content blocks have been highlighted below in green.

Pix 2

File Types

Skins – This file type contains your CSS/images/JavaScript files.

/skin/frontend/package-name/theme-name

Pix 3

Layouts – This file type defines structural blocks and can be edited via the .xml files it contains.

/app/design/frontend/package-name/theme-name/layout/

Pix 4

Templates – This file type defines content blocks and can be edited via the .phtml files it contains.

/app/design/frontend/package-name/theme-name/template/

Pix 5

Locales – This file type defines the language of your Magento store. For example a locale might translate store elements to Spanish. Locale files are stored as .csv.

/app/design/frontend/package-name/theme-name/locale/

Pix 6

Design Package/Themes

Base Theme – The bottom level theme and final place that Magento looks to.

/app/design/frontend/base/

Custom Theme – Your own custom theme. Magento looks here first.

/app/design/frontend/package-name/theme-name/

Package – A group of related themes. You can create your own or use the already available ‘default’ package.

/app/design/frontend/default/

Disabling the Cache

To prevent your store from being slow to load, Magento has a built-in caching system which reduces the number of files needed to be reloaded every time a page is requested. While this is useful while your store is live, it can prove to be an inconvenience when developing.

To disable this feature temporarily log in to the admin panel and go to System | Cache Management. Here you can select/deselect any cache types that you wish to disable. For our purposes you can disable them all by selecting each one and selecting ‘Disable’ from the Actions drop-down menu.

Setting a Theme

You can set the package and individual themes that you wish to display in the backend of Magento by going to System | Configuration and clicking Design in the left-hand sidebar. Under Package you have your current package. Under Themes you will see each file type and which theme it’s being generated from.

* Themes can be changed for each individual page as well. CMS > Pages and then click the page you want and select Design from the left-hand sidebar.

Customizing Your Theme

When you want to edit a particular file, simply copy it from the base theme, paste it in your current theme and edit it from there. Any files copied in this manner will override the base files. Be sure to copy any folders that contain the files as well. For example, if we wanted to edit the login.phtml page used for our check out (located in app/design/frontend/base/default/template/persistent/checkout/onepage/login.phtml) we would need to create or copy the folder persistent and paste it in our custom theme template file.

This is the preferred method for changing files in Magento. Editing the base files directly is not a good practice because it can cause conflict when trying to upgrade Magento. Plus, if you make a mistake that is beyond repair you won’t be able to revert back to any older files.

Template Path & Block Name Hints

Two useful tools that Magento provides for locating file paths are Template Path Hints and Block Name Hints.

Template Path Hints – Displays the relative path to each block within the theme directory structure.

Block Name Hints – Shows you how the block is classed within the framework.

To enable these hints simply navigate to System | Configuration | Advanced | Developer. Make sure ‘Main Website’ or ‘Default Config’ is selected from the Current Configuration Scope drop-down in the top-left corner as the option is unavailable in the Default Config scope. Open up the Debug section in the right-hand column. From here you can switch Template Path Hints and/or Block Name Hints to Yes or No. Click Save Config at the top-right of your screen, and refresh the frontend of your store to view the changes. The hints should appear in little red boxes surrounding the elements they lead to.

Theme

Conclusion

Editing a Magento theme can be done easily and effectively once you know where to go for files, how to disable the cache and how to enable the template and block hints. I recommend setting up a development installation and trying your hand at making changes to the store views in your theme. For more information on Magento Theming, please see the following resources:

Resources

LevelUpTuts

  • Good tutorials on Magento from the ground up. Specifically, #25 – #44.
  • Magento 1.4 Themes Design by Richard Carter.
  • This book covers a lot of material on theming in Magento. Specifically chapters two through six if you aren’t interested in reading the whole book.

See our CMS Web Development Page for more ways we can help you!