Set your Magento 2 application to the developer mode. The application mode influences the way static files are cached by Magento. The recommendations about Magento2 theme development we provide in this chapter are developer/default-mode specific.

Magento 2 Template customization walkthrough

To customize a template:

  1. Locate the template which is associated with the page/block you want to change using template hints.
  2. Copy the template to your theme folder according to the template storing convention.
  3. Make the required changes.

To add a new template in a theme:

  1. Add a template in your theme directory according to the template storing convention.
  2. Assign your template to a block in the corresponding layout file.

If you add a new .html template, and then edit it, the changes will not apply until you do the following: delete all files in the pub/static/frontend and var/view_preprocessing directories, then reload the pages. You can delete the files manually or run the grunt clean:<theme_name> command in CLI. For details about using Grunt in Magento see Installing and configuring Grunt.

Walkthrough illustration: adding a message to the customer review form

A small customization to illustrate the walkthrough: in the wd_magento2 theme, the WebDux company wants to add a short text to the product review form to encourage customers to write reviews.

The following image illustrates how the default review form looks like:

Magento 2 Templates customization walkthrough

To add the text, WebDux needs to override the default review form template in the Wd_Magento2 theme.

First, they copy the form.phtml template from <Magento_Review_module_dir>/view/frontend/templates to the corresponding subdirectory in the Wd_magento2 theme directory: app/design/frontend/WebDux/wd_magento2/Magento_Review/templates.

In the theme form.phtml file they add the HTML snippet with the message before the <form>:

Magento 2 Templates customization walkthrough

Here’s how the form will look when the Wd_magento theme is applied in a store:

Magento 2 Templates customization walkthrough


You may also like

Leave A Comment

Please enter your name. Please enter an valid email address. Please enter message.