{"id":387,"date":"2019-04-22T04:34:35","date_gmt":"2019-04-22T04:34:35","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2019\/04\/22\/enable-template-path-hints-in-magento-2\/"},"modified":"2025-05-22T16:57:25","modified_gmt":"2025-05-22T11:27:25","slug":"enable-template-path-hints-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/enable-template-path-hints-in-magento-2\/","title":{"rendered":"How to Enable Template Path Hints in Magento 2"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The life of a developer ain&#8217;t easy!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Any tutorials or methods that can ease their tasks are always welcomed! Hence, here&#8217;s one of them, to <i><strong>enable template path hints in Magento 2<\/strong><\/i>. It makes it easier to locate a particular .phtml file.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Template path hints in Magento 2 are the tiny tags shown in the frontend to locate the code within the Magento file structure. Content on storefront pages is displayed using the .phtml files. To make the changes in the content,&nbsp;.phtml files require to be edited. And to edit or update .phtml files, the very first step is to locate them.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, in the complex file structure, the below methods make it easy to trace specific .phtml files by <strong>enabling template path hints in Magento 2<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Methods to Enable Template Path Hints in Magento 2:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Follow any of the below methods to enable template path hints in Magento 2:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"adminpanel\">Enable Template Path Hints via Admin Panel:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Log in<\/strong> to Admin Panel<\/li>\n\n\n\n<li>Navigate to <strong>Stores &gt; Configuration &gt; Advanced &gt; Developer<\/strong><\/li>\n\n\n\n<li>Expand &#8220;<strong>Debug<\/strong>&#8221;&nbsp; and set YES to &#8220;<strong>Enable Template Path Hints for StoreFront<\/strong>&#8220;<\/li>\n\n\n\n<li>Also, under &#8220;<strong>Developer Client Restrictions<\/strong>, enter the IP address in the field &#8220;<strong>Allowed IPs<\/strong>&#8221; for which you want to enable the template path hints.<\/li>\n\n\n\n<li><strong>Save<\/strong> the configuration.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2019\/04\/1_Backend-enable-template-path-hint-in-Magento-2.png\" alt=\"Backend - enable template path hint in Magento 2\" class=\"wp-image-4926\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Once you follow the below steps, you can see the frontend as shown below where the template path hints are enabled for you to easily trace the .phtml files and edit it!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2019\/04\/2_Frontend-template-path-hints-enabled-in-Magento-2.png\" alt=\"Frontend - template path hints enabled in Magento 2\" class=\"wp-image-4927\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"commandline\">Enable Template Path Hints via Command Line:<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Connect to your store with SSH terminal, and go to the root directory of your Magento 2 store.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Enable template path hints for frontend:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>php&nbsp;bin\/magento&nbsp;dev:template-hints:enable<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Disable template path hints for frontend:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>bin\/magento&nbsp;dev:template-hints:disable<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Clean and flush cache:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>bin\/magento&nbsp;cache:clean<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>bin\/magento&nbsp;cache:flush<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Note:&nbsp;<\/strong>You can\u2019t enable or disable template path hints for the admin using this method.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can also refer to the video tutorial to Enable Template Path Hints in Magento 2 from our <a tabindex=\"-1\" title=\"https:\/\/www.youtube.com\/playlist?list=plbtoxsajzwejm5milmeqj98ib80tkbu7r\" href=\"https:\/\/www.youtube.com\/playlist?list=PLBTOxSAJzwEjM5MilmEqj98Ib80tKBu7r\" target=\"_blank\" rel=\"noreferrer noopener\">Magento 2 video tutorial<\/a>&nbsp;series:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to Enable Template Path Hints in Magento 2\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/uzq5LkXuqX4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><br>That was all about template path hints in Magento 2 to make the life of developers a bit easier  <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thank you.<script> (function() { var v = document.getElementsByClassName(\"youtube-player\"); for (var n = 0; n < v.length; n++) { v[n].onclick = function () { var iframe = document.createElement(\"iframe\"); iframe.setAttribute(\"src\", \"\/\/www.youtube.com\/embed\/\" + this.dataset.id + \"?autoplay=1&#038;autohide=2&#038;border=0&#038;wmode=opaque&#038;enablejsapi=1&#038;rel=\"+ this.dataset.related +\"&#038;controls=\"+this.dataset.control+\"&#038;showinfo=\" + this.dataset.info); iframe.setAttribute(\"frameborder\", \"0\"); iframe.setAttribute(\"id\", \"youtube-iframe\"); iframe.setAttribute(\"style\", \"width: 100%; height: 100%; position: absolute; top: 0; left: 0;\"); if (this.dataset.fullscreen == 1){ iframe.setAttribute(\"allowfullscreen\", \"\"); } while (this.firstChild) { this.removeChild(this.firstChild); } this.appendChild(iframe); }; } })(); <\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The life of a developer ain&#8217;t easy! Any tutorials or methods that can ease their tasks are always welcomed! Hence, here&#8217;s one of them, to&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-387","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=387"}],"version-history":[{"count":2,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/387\/revisions"}],"predecessor-version":[{"id":15461,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/387\/revisions\/15461"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}