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:
- 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: - 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.
- 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"/>" - 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: - 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"
- 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:
