This is a beta release of documentation for Magento 2.4, published for previewing soon-to-be-released functionality. Content in this version is subject to change. Links to the v2.4 code base may not properly resolve until the code is officially released.

Templates customization sample

Edit on GitHub
Log an Issue

This topic contains a step-by-step guide to 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:

code1

They created a new Orange theme and copied the content.html 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:

code2

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

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

© 2020 Magento. All rights reserved.