Adding Tabbed-View to Magento Default Theme

This is a repost from my other blog which doesn't exist any longer. I am retaining it here for reference.

I received a question from the forum the past week asking how to bring tabbed view into Default Theme. As tabbed view doesn't exist in the Default Theme, bringing it into the theme means changing some code in the template, layout and skin files. Before we start and do any changes, please backup those related files (template, layout and skin) so we can refer back when something goes wrong and the files have been overwritten.

Here are the steps:

  1. Paste the following block of template code into Default Theme's product view.phtml, located in "app/design/frontend/default/default/template/catalog/product/view.phtml", right before the closing div:

    and remove the following template logic block within the same file:
  2. Remove folders and files under "app/design/frontend/default/default/template/catalog/product/view" then copy back from "app/design/frontend/default/modern/template/catalog/product/view" into the former folder.
  3. Paste the following block of layout tags into Default Theme's catalog.xml, located in "app/design/frontend/default/default/layout/catalog.xml"

    within <catalog_product_view>, right below "<block type="catalog/product_view" name="product.info.addtocart" as="addtocart" template="catalog/product/view/addtocart.phtml"/>"
  4. Paste the following block of layout tags into Default Theme's tag.xml, located in app/design/frontend/default/default/layout/tag.xml

    within <catalog_product_view>, right below the following tags:
  5. Now put some basic styling for the tabs, paste the following CSS to the end of boxes.css file located at "skin/frontend/default/default/css/boxes.css"
  6. The last part is to copy the background image from "skin/frontend/default/modern/images/tabs_bg.gif" to "skin/frontend/default/default/images"

Finally, here's the screengrab of the tab view in Default Theme:

Tab-in-default-theme

Manual Installation of Magento Modern Theme

This is a repost from my other blog which doesn't exist any longer. I am retaining here for reference.

Browsing Magento forum today, I found a few users were asking how to download the Modern Theme manually. Since Modern Theme is an official theme and only available through Magento Connect as an extension, it has to be installed through Connect Manager using its extension key. Installing the theme through Connect manager is quite straightforward but some users were reporting issues such as: short script execution time (a limitation on their webhost) and garbled error messages in the extension installer.

So here's the manual way to get pass this show-stopper: download and upload the theme into its folder. Here are the steps:

  1. Do an svn checkout from stable branch "http://svn.magentocommerce.com/source/branches/1.1/" to your local folder.
  2. Copy "app/design/frontend/default/modern" into "app/design/frontend/default" folder.
  3. Copy "skin/frontend/default/modern" into your "skin/frontend/default" folder.
  4. Enable the new theme through admin page : System -> Configuration -> Design and under theme section, put "modern" for template, skin, layout and default.
  5. Clear both store and browser cache and refresh your storefront.

You should now see the Modern theme working.