Magento 2.0.18 is the final 2.0.x release. After March 2018, Magento 2.0.x will no longer receive security patches, quality fixes, or documentation updates.
To maintain your site's performance, security, and PCI compliance, upgrade to the latest version of Magento.

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:

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 <Magento_Checkout_module_dir>/view/frontend/web/template/minicart/content.html. Here is the part of the code OrangeCo worked with:

code

They created a new Orange theme and copied the content.phtml to the theme directory: app/design/frontend/OrangeCo/orange/Magento_Checkout/web/template/minicart/content.html In their copy of the templates, they changed the order of the blocks as follows:

code

When the Orange theme was applied, the mini shopping cart with products looked like following:

In the minishopping cart products are listed before the Go to Checkout button