ADMIN: System → Configuration → Design Tab

Last modified by kara on Sat, July 31, 2010 21:08
Source|Old Revisions  


This is the key page to set your design template. Please note that the approach to theme design has altered slightly with version 1.4. A quick summary of the new approach can be found on the forums here.

While the new approach appeared to be planned from the outset it was only fully implemented in 1.4, hence the confusing references to multiple interfaces in the older designers guide documentation and other resources.

Admin Panel Fields Reference

Package Field Descriptions

  • Current Package Name - Design package (prior to CE v1.3 called “interface”) to use for this website. For any theme, the design package file paths are of the form:

Where <package> is the value you put in this field.

Prior to version 1.4 For most simple websites this could be set to “default”, incorrectly changing this option to your theme name is a common source of errors!

From version 1.4 The terminology has changed slightly, but the basic idea is the same. Where before the term <interface> was used, now the term <package> is used. In addition there is now a base folder provided by Magento that holds the underlying basic theme files - if ever the store looks for a file and you haven’t provided it in your custom theme it will fall back to the base folder.

The preferred approach now when creating any custom theme is to make a new package folder named after your theme. Then make a subdirectory called “default” where you put the majority of your files. You can then create additional subdirectories for any theme variants you need within your design package, e.g. you may want different color schemes for some areas, multiple stores or other languages. As a minimum you should always create a “default” folder inside of your package folder, so the directory structure for a custom theme for 1.4 with a default theme and a green theme variant would look like:


Most of your custom files will live in default, only the changes required to make it ‘green’ would live in green.

Themes Field Descriptions

  • Translations
  • Templates
  • Skin (Images / CSS)
  • Layout
  • Default

In most cases, if the <package> is set in the Current Package field above, all these fields can remain blank. Magento will go to the default directory in the <package> directory to find the customized files.

If you want a theme variant of your <package> to be the default theme, the easiest way to change your theme is to enter your theme variant name in the “Default” field in this section, leaving all other options in this section blank. For example, if you want your “green” theme to be the default theme for the website, enter “green” in the default field here.

Magento looks for files like this: Current package’s green theme > Current package’s default theme > Magento Base folder.

You can also mix and match components from various themes using the other fields in this section. For example, if you want to use the CSS from the “blue” theme with your custom theme, enter “blue” in the “Skin (images/css)” option box and leave the default box set to “green”.

Common Problems

1. Entering the wrong thing in the Current Package Name field. For most people this can remain “default”. If you do really need to change this you probably know all this anyway.

2. Forgetting to turn off the caching. Remember to go to System > Cache Management and turn off caching before doing any theme work.

HTML Head Field Descriptions

  • Default Title
  • Title Prefix
  • Title Suffix
  • Default Description
  • Default Keywords
  • Default Robots
  • Miscellaneous Scripts - This will be included before head closing tag in page HTML.
  • Display Demo Store Notice

Header Field Descriptions

  • Logo Image Src
  • Logo Image Alt
  • Welcome Text

Footer Field Descriptions

  • Copyright
  • Miscellaneous HTML

Product Image Watermarks Field Descriptions

  • Base Image Watermark Default Size - Example format: 200×300.
  • Base Image Watermark Opacity, Percent
  • Base Image Watermark - Allowed file types: jpeg, gif, png.
  • Base Image Watermark Position
  • Small Image Watermark Default Size - Example format: 200×300.
  • Small Image Watermark Opacity, Percent
  • Small Image Watermark - Allowed file types: jpeg, gif, png.
  • Small Image Watermark Position
  • Thumbnail Watermark Default Size - Example format: 200×300.
  • Thumbnail Watermark Opacity, Percent
  • Thumbnail Watermark - Allowed file types: jpeg, gif, png.
  • Thumbnail Watermark Position

Pagination Field Descriptions

  • Pagination Frame - How many links to display at once.
  • Pagination Frame Skip - If the current frame position does not cover utmost pages, will render link to current position plus/minus this value.
  • Anchor Text for Previous - Alternative text for previous link in pagination menu. If empty, default arrow image will used.
  • Anchor Text for Next - Alternative text for next link in pagination menu. If empty, default arrow image will used.