Adding Design Changes in the Magento Admin Panel

Posted by Ryan Street

May 2, 2013 | 11:00 AM

Share this blog on:     

Applying Global Design Changes

Magento allows you to make minor changes to your theme, or changes that are only temporary (holiday, etc.).  Magento allows you to make design changes to your site or individual parts of it without having to override everything about it on a system level.

Go to System->Design. 

system design menu

On the design page, click the “Add Design Change” button.

add design change

You will be presented with a new screen.  In here, you need to select a store view from the store dropdown.

select store view

Now select the new theme you wish to apply to your Store.

select new theme

Now select a start and end date for your design change.  This will automatically turn the design change on and off.

select start and end date

Click the “Save” button at the top right of the screen.

select save button

Now your theme will show up at the dates you specify.  It will automatically disable as well at the time you specify.

 Applying Category Design Changes

You can make changes to the categories of your site.  It will only change the categories, but leave the other areas of Magento alone.

Go to Catalog->Manage Categories.

catalog category menu

Select your category you want to add the design change.

select category

When it is loaded, select the Custom Design tab.

select custom design tab

From here, you have a wide range of settings available for custom designs.

  • You can inherit the design changes of a parent category, (especially useful if you are using custom category design changes with multiple children).
  • You can apply the design change to products of that category.
  • You can change the page layout if desired, (one column, two column, or three column).
  • If can even apply custom layout xml to this particular category.

custom design tab

To select a custom design, select your theme from the dropdown.

select category custom theme

You can also set and active and expiration date for your design change, but this is optional.

Once you are finished with your design change, click the “Save Category” button.

select save category

Applying Product Design Changes

You can take it a step further and create product specific design changes to each individual product.

Go to Catalog->Manage Products.

select catalog manage products

Select your product you want to change.

Select the Design tab on the left.

select product design tab

On this tab, things should start to look familiar. You can select your custom design, active dates, add custom layout updates, and page layout.  You can also display product options, (from the Custom Options tab) as well from here.

product design options

When applying these changes, remember the order of importance and hierarchy of the fallback system.

It goes:

Product->Catalog->Global Theme->System Theme->System Defined Default->Package ‘default’->Base default.

Exercises

Now it’s time to put this knowledge to the test.  Let’s see if you can apply these changes.

  1. Add a snowflake background during Christmas time.
  2. Add a 20% off sale notification to the top of all products and categories of only one area of your site.
  3. Change the logo of your site on three products.

If you can do all of these, then consider yourself versed in the wonderful world of design changes in admin!

Download Our Magento Platform Checklist To Find Out If You Should Be On Open Source or  Commerce

Topics: Magento

About Ryan Street

Search

Subscribe to Email Updates

magento-platform-checklist
New Call-to-Action

Contact Us

B2B-2.0

Recent Posts