{"_id":"560b5d0b3616ac17004f1c99","project":"55a6e72e8cc73e0d00096635","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"},"__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"},"user":"55a6caa022cfa321008e01d6","parentDoc":null,"updates":["56f56427b9131917003ca861"],"next":{"pages":[],"description":""},"createdAt":"2015-09-30T03:54:51.336Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"[block:html]\n{\n  \"html\": \"<A NAME=\\\"Compon-Subdir\\\"></a>The <span class=\\\"inline-code\\\">.../templates/components/</span> subdirectory contains Handlebars and HTML components (provided as <span class=\\\"inline-code\\\">.html</span> files) to create page structure. You can reuse these code snippets and partials throughout your theme.<br>\\n\\n<p></p><pre>&lt;theme-name&gt;\\n└── templates\\n  ├── components\\n  │   ├── account\\n  │   ├── blog\\n  │   ├── brand\\n  │   ├── cart\\n  │   ├── category\\n  │   ├── common\\n  │   │   └── forms\\n  │   │   └── icons\\n  │   ├── faceted-search\\n  │   │   └── facets\\n  │   ├── gift-certificate\\n  │   ├── products\\n  │   │   ├── customizations\\n  │   │   ├── modals\\n  │   │   └── options\\n  │   ├── search\\n  │   └── social\\n  ├── layout\\n</pre>\\n\\n\\n <br>\\n\\nSubdirectories of <span class=\\\"inline-code\\\">.../templates/components/</span> group together pages that serve a particular storefront function. For example, here are the <span class=\\\"inline-code\\\">.../search/</span> subdirectory’s contained <span class=\\\"inline-code\\\">.html</span> files:<br>\\n\\n<p></p><pre>&lt;theme-name&gt;\\n└── templates\\n  ├── components\\n      │   ├── search\\n      │   │   ├── product-listing.html\\n      │   │   ├── quick-results.html\\n  │   │   └── sidebar.html\\n</pre>\\n\\n\\n <br>\\n\\nThe <span class=\\\"inline-code\\\">.../common/</span> subdirectory contains <span class=\\\"inline-code\\\">forms</span> and <span class=\\\"inline-code\\\">icons</span> resources, plus a collection of single-purpose files:<br>\\n\\n<p></p><pre>&lt;theme-name&gt;\\n└── templates\\n  ├── components\\n      │   ├── common\\n      │   │   ├── forms\\n      │   │   ├── icons\\n  │   │   └── alert-generic.html\\n      │   │   ├── alert-info.html\\n      │   │   ├── quick-results.html\\n  │   │   └── body.html\\n      │   │   ├── breadcrumbs.html\\n      │   │   ├── cart-preview.html\\n  │   │   └── [...]</pre>\\n\\n\\n<h2> <A NAME=\\\"Compon-Subdir-NamReq\\\"></a>Naming Requirements</h2>\\n\\n<b>Important:</b> Four children of the <span class=\\\"inline-code\\\">.../templates/components/</span> subdirectory each contain a set of templates whose <i>file</i> names must remain constant. However, you are free to move each set of template files to other path locations – as long as you keep each set together in one folder, and specify the new location:<br>\\n\\n<p></p><pre>&lt;theme-name&gt;\\n└── templates\\n  ├── components\\n \\n  │   ├── common\\n  │   │   ├── forms\\n \\n  │   ├── faceted-search\\n  │   │   └── facets\\n \\n  │   ├── products\\n  │   │   ├── customizations\\n \\n  │   ├── products\\n  │   │   ├── options</pre><br>\\n\\n\\nHere are the required file names installed (by default) in the <span class=\\\"inline-code\\\">&lt;theme‑name&gt;/templates/components/common/forms/</span> subdirectory:<br>\\n\\n<p></p><pre>&lt;theme-name&gt;\\n└── templates\\n  └── components\\n  │   ├── common\\n  │   │   └── forms\\n  │   │   │   ├── checkbox.html\\n  │   │   │   ├── date.html\\n  │   │   │   ├── multiline.html\\n  │   │   │   ├── number.html\\n  │   │   │   ├── password.html\\n  │   │   │   ├── radio.html\\n  │   │   │   ├── select.html\\n  │   │   │   ├── selectortext.html\\n  │   │   │   └── text.html</pre><br>\\n\\n\\nHere are the required file names installed (by default) in the<br>\\n\\n<span class=\\\"inline-code\\\">&lt;theme‑name&gt;/templates/components/faceted-search/facets/</span> subdirectory:<br>\\n\\n<p></p><pre>&lt;theme-name&gt;\\n└── templates\\n  └── components\\n  │   ├── faceted-search\\n  │   │   └── facets\\n  │   ├── faceted-search\\n  │   │   ├── facets\\n  │   │   │   ├── hierarchy.html\\n  │   │   │   ├── multi.html\\n  │   │   │   ├── range.html\\n  │   │   │   └── rating.html</pre>\\n\\n\\n <br>\\n\\nHere are the required file names installed (by default) in the<br>\\n\\n<span class=\\\"inline-code\\\">&lt;theme‑name&gt;/templates/components/products/customizations/</span> subdirectory:<br>\\n\\n<p></p><pre>&lt;theme-name&gt;\\n└── templates\\n  └── components\\n  │   ├── products\\n  │   │   ├── customizations\\n  │   │   │   ├── checkbox.html\\n  │   │   │   ├── file.html\\n  │   │   │   ├── select.html\\n  │   │   │   ├── text.html\\n  │   │   │   └── textarea.html</pre>\\n\\n\\n <br>\\n\\nHere are the required file names installed (by default) in the<br>\\n\\n<span class=\\\"inline-code\\\">&lt;theme‑name&gt;/templates/components/products/options/</span> subdirectory:<br>\\n\\n<p></p><pre>&lt;theme-name&gt;\\n└── templates\\n  └── components\\n  │   ├── products\\n  │   │   └── options\\n  │   │   │   ├── date.html\\n  │   │   │   ├── input-checkbox.html\\n  │   │   │   ├── input-file.html\\n  │   │   │   ├── input-numbers.html\\n  │   │   │   ├── input-text.html\\n  │   │   │   ├── set-radio.html\\n  │   │   │   ├── set-rectangle.html\\n  │   │   │   ├── set-select.html\\n  │   │   │   ├── swatch.html\\n  │   │   │   └── textarea.html</pre>\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"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\\\"><a href=\\\"/docs/pages-subdirectory\\\">.../templates/pages/</a></span> subdirectory, not on pages here in the <span class=\\\"inline-code\\\">.../templates/components/</span> subdirectory.\\n\\nPlease bear in mind that if a front-matter directive contains an invalid option, Stencil CLI will silently ignore that option.\",\n  \"title\": \"Front-Matter Restrictions\"\n}\n[/block]","excerpt":"(Handlebars/HTML Resources)","slug":"components-subdirectory","type":"basic","title":"Components Subdirectory"}

Components Subdirectory

(Handlebars/HTML Resources)

[block:html] { "html": "<A NAME=\"Compon-Subdir\"></a>The <span class=\"inline-code\">.../templates/components/</span> subdirectory contains Handlebars and HTML components (provided as <span class=\"inline-code\">.html</span> files) to create page structure. You can reuse these code snippets and partials throughout your theme.<br>\n\n<p></p><pre>&lt;theme-name&gt;\n└── templates\n ├── components\n │ ├── account\n │ ├── blog\n │ ├── brand\n │ ├── cart\n │ ├── category\n │ ├── common\n │ │ └── forms\n │ │ └── icons\n │ ├── faceted-search\n │ │ └── facets\n │ ├── gift-certificate\n │ ├── products\n │ │ ├── customizations\n │ │ ├── modals\n │ │ └── options\n │ ├── search\n │ └── social\n ├── layout\n</pre>\n\n\n <br>\n\nSubdirectories of <span class=\"inline-code\">.../templates/components/</span> group together pages that serve a particular storefront function. For example, here are the <span class=\"inline-code\">.../search/</span> subdirectory’s contained <span class=\"inline-code\">.html</span> files:<br>\n\n<p></p><pre>&lt;theme-name&gt;\n└── templates\n ├── components\n │ ├── search\n │ │ ├── product-listing.html\n │ │ ├── quick-results.html\n │ │ └── sidebar.html\n</pre>\n\n\n <br>\n\nThe <span class=\"inline-code\">.../common/</span> subdirectory contains <span class=\"inline-code\">forms</span> and <span class=\"inline-code\">icons</span> resources, plus a collection of single-purpose files:<br>\n\n<p></p><pre>&lt;theme-name&gt;\n└── templates\n ├── components\n │ ├── common\n │ │ ├── forms\n │ │ ├── icons\n │ │ └── alert-generic.html\n │ │ ├── alert-info.html\n │ │ ├── quick-results.html\n │ │ └── body.html\n │ │ ├── breadcrumbs.html\n │ │ ├── cart-preview.html\n │ │ └── [...]</pre>\n\n\n<h2> <A NAME=\"Compon-Subdir-NamReq\"></a>Naming Requirements</h2>\n\n<b>Important:</b> Four children of the <span class=\"inline-code\">.../templates/components/</span> subdirectory each contain a set of templates whose <i>file</i> names must remain constant. However, you are free to move each set of template files to other path locations – as long as you keep each set together in one folder, and specify the new location:<br>\n\n<p></p><pre>&lt;theme-name&gt;\n└── templates\n ├── components\n \n │ ├── common\n │ │ ├── forms\n \n │ ├── faceted-search\n │ │ └── facets\n \n │ ├── products\n │ │ ├── customizations\n \n │ ├── products\n │ │ ├── options</pre><br>\n\n\nHere are the required file names installed (by default) in the <span class=\"inline-code\">&lt;theme‑name&gt;/templates/components/common/forms/</span> subdirectory:<br>\n\n<p></p><pre>&lt;theme-name&gt;\n└── templates\n └── components\n │ ├── common\n │ │ └── forms\n │ │ │ ├── checkbox.html\n │ │ │ ├── date.html\n │ │ │ ├── multiline.html\n │ │ │ ├── number.html\n │ │ │ ├── password.html\n │ │ │ ├── radio.html\n │ │ │ ├── select.html\n │ │ │ ├── selectortext.html\n │ │ │ └── text.html</pre><br>\n\n\nHere are the required file names installed (by default) in the<br>\n\n<span class=\"inline-code\">&lt;theme‑name&gt;/templates/components/faceted-search/facets/</span> subdirectory:<br>\n\n<p></p><pre>&lt;theme-name&gt;\n└── templates\n └── components\n │ ├── faceted-search\n │ │ └── facets\n │ ├── faceted-search\n │ │ ├── facets\n │ │ │ ├── hierarchy.html\n │ │ │ ├── multi.html\n │ │ │ ├── range.html\n │ │ │ └── rating.html</pre>\n\n\n <br>\n\nHere are the required file names installed (by default) in the<br>\n\n<span class=\"inline-code\">&lt;theme‑name&gt;/templates/components/products/customizations/</span> subdirectory:<br>\n\n<p></p><pre>&lt;theme-name&gt;\n└── templates\n └── components\n │ ├── products\n │ │ ├── customizations\n │ │ │ ├── checkbox.html\n │ │ │ ├── file.html\n │ │ │ ├── select.html\n │ │ │ ├── text.html\n │ │ │ └── textarea.html</pre>\n\n\n <br>\n\nHere are the required file names installed (by default) in the<br>\n\n<span class=\"inline-code\">&lt;theme‑name&gt;/templates/components/products/options/</span> subdirectory:<br>\n\n<p></p><pre>&lt;theme-name&gt;\n└── templates\n └── components\n │ ├── products\n │ │ └── options\n │ │ │ ├── date.html\n │ │ │ ├── input-checkbox.html\n │ │ │ ├── input-file.html\n │ │ │ ├── input-numbers.html\n │ │ │ ├── input-text.html\n │ │ │ ├── set-radio.html\n │ │ │ ├── set-rectangle.html\n │ │ │ ├── set-select.html\n │ │ │ ├── swatch.html\n │ │ │ └── textarea.html</pre>" } [/block] [block:callout] { "type": "warning", "body": "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\"><a href=\"/docs/pages-subdirectory\">.../templates/pages/</a></span> subdirectory, not on pages here in the <span class=\"inline-code\">.../templates/components/</span> subdirectory.\n\nPlease bear in mind that if a front-matter directive contains an invalid option, Stencil CLI will silently ignore that option.", "title": "Front-Matter Restrictions" } [/block]