{"_id":"560b5fa83616ac17004f1c9d","__v":12,"category":{"_id":"560b5cbec341310d00de2a01","pages":["560b5d0b3616ac17004f1c99","560b5d405148ba0d009bd0c9","560b5d62af40a70d003df332","560b5d953bcbd80d0077d0fd","560b5fa83616ac17004f1c9d","569c8c15d326c80d0068f7b7","56d37d35d3f4650b007495ea","56d4ed5f8001e30b0089700c"],"__v":8,"project":"55a6e72e8cc73e0d00096635","version":"55a6e72f8cc73e0d00096638","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-30T03:53:34.449Z","from_sync":false,"order":14,"slug":"templates-required-directory","title":"Templates Reference"},"version":{"_id":"55a6e72f8cc73e0d00096638","project":"55a6e72e8cc73e0d00096635","hasReference":false,"__v":29,"hasDoc":true,"createdAt":"2015-07-15T23:05:19.125Z","releaseDate":"2015-07-15T23:05:19.125Z","categories":["55a6e7308cc73e0d00096639","55b7ed07aea7c8190058badb","5604567c0c78b00d0039b191","5605e6f23a93940d002b3e4a","5605f2bba4574a0d00811365","5605f309a4574a0d00811366","5608e3b98aedf50d0004cf8f","5608e4318aedf50d0004cf90","5608e6b5a7cc2f0d00d9754d","5608e6d331beb60d001b6560","5608f879a7cc2f0d00d97580","560b097887b71d0d000d3bd9","560b13cbafa0990d00979545","560b5cbec341310d00de2a01","560b5cd0c341310d00de2a02","566a35b81e08750d00a0c49b","566a3e8503b4b20d00d02a4a","567889d307bf6a0d0083edc8","569c8b7c15bb390d00db6f9d","56b254dc65ddf50d0076ba8f","57a8ebc4cdeea20e001d2a63","57e48a4000c8680e00fae6e7","5808216773557d0f00a1e428","58105ad54a8aa50f00aa4cba","58105bf298aea40f00afa3ba","58105f548a4aed0f00d67536","581061b898aea40f00afa3be","584b3de7e5f3a42300df6ef7","596839a75965d400155bb750"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"user":"55a6caa022cfa321008e01d6","project":"55a6e72e8cc73e0d00096635","parentDoc":null,"updates":["59b6e5fd0338340010d6f53b"],"next":{"pages":[],"description":""},"createdAt":"2015-09-30T04:06:00.545Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"This page covers:\n* [Templates Directory Structure](#Templates-Req-Dir)\n* [Templates Documentation](#Templates-Dox)\n* [Video Demo](#TemplatesVideo)\n* [Restrictions and Requirements](#Restrix)\n\n[block:html]\n{\n  \"html\": \"<h2> <A NAME=\\\"Templates-Req-Dir\\\"></a> Templates Directory Structure </h2>\\n\\nEach Stencil theme installs with a <span class=\\\"inline-code\\\">.../templates/</span> directory, whose contents provide structure for storefront pages. This directory has three subdirectories:<br>\\n\\n<p></p><pre>&lt;theme-name&gt;\\n          /templates/\\n                      /components/\\n                      /layout/\\n                      /pages/</pre>\\n\\n\\n<h2> <A NAME=\\\"Templates-Dox\\\"></a> Templates Documentation </h2>\\n\\nThese three subdirectories, and how they interact, are discussed on the next few pages:\\n\\n<ul>\\n<li> <a href=\\\"/docs/components-subdirectory\\\">Components Subdirectory</a></li>\\n\\n<li> <a href=\\\"/docs/layout-subdirectory\\\">Layout Subdirectory</a></li>\\n\\n<li> <a href=\\\"/docs/pages-subdirectory\\\">Pages Subdirectory</a></li>\\n\\n<li> <a href=\\\"/docs/components-and-compilation\\\">Components and Compilation</a></li>\\n</ul>\\n\\nThis section's later subsections cover customization techniques:\\n\\n<ul>\\n\\t<li> <a href=\\\"/docs/custom-layout-templates\\\">Custom Templates</a>\\n  </li>\\n\\t<li> <a href=\\\"/docs/checkout-header-customization\\\">Checkout, Order-Confirmation, and Related Customizations</a>\\n  </li>\\n</ul>\\n\\n<h2> <a name=\\\"TemplatesVideo\\\"></a> Video Demo </h2>\\n\\nWatch a video demonstration of how your edits to templates and partials change visual characteristics of your theme: <br><p></p>\\n\\n<iframe src=\\\"https://www.youtube.com/embed/Q29ZGH0Ea1I?ecver=2\\\" width=\\\"560\\\" height=\\\"315\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\"\n}\n[/block]\n<a name=\"Restrix\"></a>\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"* The contents of most <span class=\\\"inline-code\\\">.../templates/</span> subdirectories are arbitrary. However, you will find details about certain naming restrictions and requirements. \\n* Be sure to set permission `755` (`drwxr-xr-x`) on any new subdirectories that you add. Also, be sure to set permission `644` (`rw-r--r--`) on any new files that you add. Without these permissions, running your theme locally will fail with multiple error messages. Bundling your theme will also fail, blocking its upload to a store.\\n* You can use <a href=\\\"/docs/using-yaml-front-matter\\\">front matter</a> to specify resources <i>only</i> on pages in the <span class=\\\"inline-code\\\">.../templates/pages/</span> subdirectory, not on pages in the <span class=\\\"inline-code\\\">.../templates/components/</span> subdirectory.\",\n  \"title\": \"Restrictions and Requirements\"\n}\n[/block]","excerpt":"","slug":"about-the-templates-directory","type":"basic","title":"Navigating the Templates Directory"}

Navigating the Templates Directory


This page covers: * [Templates Directory Structure](#Templates-Req-Dir) * [Templates Documentation](#Templates-Dox) * [Video Demo](#TemplatesVideo) * [Restrictions and Requirements](#Restrix) [block:html] { "html": "<h2> <A NAME=\"Templates-Req-Dir\"></a> Templates Directory Structure </h2>\n\nEach Stencil theme installs with a <span class=\"inline-code\">.../templates/</span> directory, whose contents provide structure for storefront pages. This directory has three subdirectories:<br>\n\n<p></p><pre>&lt;theme-name&gt;\n /templates/\n /components/\n /layout/\n /pages/</pre>\n\n\n<h2> <A NAME=\"Templates-Dox\"></a> Templates Documentation </h2>\n\nThese three subdirectories, and how they interact, are discussed on the next few pages:\n\n<ul>\n<li> <a href=\"/docs/components-subdirectory\">Components Subdirectory</a></li>\n\n<li> <a href=\"/docs/layout-subdirectory\">Layout Subdirectory</a></li>\n\n<li> <a href=\"/docs/pages-subdirectory\">Pages Subdirectory</a></li>\n\n<li> <a href=\"/docs/components-and-compilation\">Components and Compilation</a></li>\n</ul>\n\nThis section's later subsections cover customization techniques:\n\n<ul>\n\t<li> <a href=\"/docs/custom-layout-templates\">Custom Templates</a>\n </li>\n\t<li> <a href=\"/docs/checkout-header-customization\">Checkout, Order-Confirmation, and Related Customizations</a>\n </li>\n</ul>\n\n<h2> <a name=\"TemplatesVideo\"></a> Video Demo </h2>\n\nWatch a video demonstration of how your edits to templates and partials change visual characteristics of your theme: <br><p></p>\n\n<iframe src=\"https://www.youtube.com/embed/Q29ZGH0Ea1I?ecver=2\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen></iframe>" } [/block] <a name="Restrix"></a> [block:callout] { "type": "warning", "body": "* The contents of most <span class=\"inline-code\">.../templates/</span> subdirectories are arbitrary. However, you will find details about certain naming restrictions and requirements. \n* Be sure to set permission `755` (`drwxr-xr-x`) on any new subdirectories that you add. Also, be sure to set permission `644` (`rw-r--r--`) on any new files that you add. Without these permissions, running your theme locally will fail with multiple error messages. Bundling your theme will also fail, blocking its upload to a store.\n* You can use <a href=\"/docs/using-yaml-front-matter\">front matter</a> to specify resources <i>only</i> on pages in the <span class=\"inline-code\">.../templates/pages/</span> subdirectory, not on pages in the <span class=\"inline-code\">.../templates/components/</span> subdirectory.", "title": "Restrictions and Requirements" } [/block]