Magento 2 – How to enable Template Path Hints for Storefront in Magento

If you’re a Magento 2 developer or store owner, you may need to debug your store’s templates at some point. The easiest way to do this is to enable template path hints, which show you the file path and name of each template used on a specific page. In this tutorial, we’ll show you how to enable template path hints for the storefront in Magento 2.

Step 1: Log in to your Magento 2 Admin Panel

To get started, log in to your Magento 2 admin panel.

Step 2: Enable Developer Mode

In order to enable template path hints, you need to be in developer mode. To enable developer mode, run the following command in your Magento 2 root directory:

php bin/magento deploy:mode:set developer

Step 3: Enable Template Path Hints

Once you’re in developer mode, go to Stores > Configuration > Advanced > Developer in the admin panel. In the Debug section, change the “Enabled Template Path Hints for Storefront” option to “Yes.” Then, click “Save Config.”

After enabling the path, append “templatehints=magento” in URL like “http://www.example.com?templatehints=magento” and it will show template path hints.
Now that you’ve enabled template path hints, go to the storefront and refresh the page you want to debug. You should see the template path hints displayed on the page.

Step 4: Clear the Cache

After enabling template path hints, clear your Magento 2 cache through backend or by running the following command:

php bin/magento cache: clean

Alternative solution through Code:

I strongly discourage this method. Use it at your own risk. Only to be used on local system.
Open vendor/magento/module-developer/Model/TemplateEngine/Plugin/DebugHints.php
(tested in 2.4.4)
write this code inside afterCreate function: (at the start, above the storecode line)

if(isset($_GET['mtPathHints']) && $_GET['mtPathHints'] == 'on'){
    return $this->debugHintsFactory->create([
        'subject' => $invocationResult,
        'showBlockHints' => 1,
    ]);
}

Now, you can open any Magento page and append ?mtPathHints=on to the URL. No need to run any commands.

Conclusion

Enabling template path hints is a simple way to debug your Magento 2 storefront templates. By following the steps outlined in this tutorial, you can quickly enable template path hints and start debugging your storefront templates. Remember to disable template path hints when you’re done debugging to ensure that your storefront is not displaying unnecessary information.