Illustration of customizing templates
What's in this topic
This topic contains a step-by-step illustration of solving a typical design customization task using templates.
Sample template customization: changing a layout of the mini shopping cart
In the Magento basic Blank theme, in the mini shopping cart, products are listed under the Go to Checkout button, like following:
<img src=”/common/images/inherit_mini1.png” alt=”An image of a mini shopping cart where products are listed under the Go to Checkout button”>
OrangeCo decided they want to change this and display the product list before the Go to Checkout button.
The template responsible for displaying the mini-shopping cart items and controls is
Here is the part of the code OrangeCo worked with:
They created a new Orange theme and copied the
content.phtml to the theme directory:
In their copy of the templates, they changed the order of the blocks as follows:
When the Orange theme was applied, the mini shopping cart with products looked like following:
<img src=”/common/images/inherit_mini2.png” alt=”In the minishopping cart products are listed before the Go to Checkout button “>