{"_id":"5608e52331beb60d001b6558","user":"55a6caa022cfa321008e01d6","category":{"_id":"5605f2bba4574a0d00811365","__v":26,"pages":["5608e4d6c5cff70d007d00d5","5608e4e7c5cff70d007d00d8","5608e4fbc5cff70d007d00da","5608e5096d8c440d000c79f3","5608e5156d8c440d000c79f6","5608e52331beb60d001b6558","5608e8248aedf50d0004cf98","5608e87e8aedf50d0004cf9b","5609bf4f9f85a70d00908530","562822dd5cfea90d00ddc5d7","562831c40653060d00a2f750","563d2732260dde0d00c5eab1","5660d2bee163310d006b19c1","567bb35b93919f0d00c97b1c","567bba643241c20d00b730de","567bbc14b56bac0d0019d933","567bc0473241c20d00b730e5","568b6bd8fe6fcc0d006dc8f7","56a427125fb2530d00421b67","56a42a5194ec0a0d00b3a012","56a42aaa545bc50d000e3ada","56ddff97bea78e20003a778f","56de00ab26744429006648ba","56de12a33168720e00c11b02","56e37f388b32a10e00f79755","56e73362e622c90e00dc55b3"],"project":"55a6e72e8cc73e0d00096635","version":"55a6e72f8cc73e0d00096638","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-26T01:19:55.795Z","from_sync":false,"order":2,"slug":"installation-and-launch","title":"Installation and Launch"},"project":"55a6e72e8cc73e0d00096635","__v":20,"parentDoc":null,"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"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-09-28T06:58:43.394Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":20,"body":"[block:html]\n{\n  \"html\": \"<A NAME=\\\"PathAnatomy\\\"></a>Stencil uses a default theme for all newly initialized local storefronts. This theme provides the standard file structure, base design pattern, and default file assets needed to start developing a custom storefront experience.<br><br>\\n\\nThe file structure consists of four main subdirectories. Within those subdirectories, you'll be directed to specific files in the <a href=\\\"/docs/developing-on-the-stencil-framework-quick-start/\\\">Development Quick Start</a> tutorial and in Stencil reference material:\\n<br>\\n\\n<ol>\\n  <li><span class=\\\"inline-code\\\">templates/pages</span> – This subdirectory contains all the base template pages used in a BigCommerce online store. The pages are grouped by page category. In order to prevent any rendering errors, please avoid changing page names. For details, please see <NOBR><a href=\\\"/docs/about-the-templates-directory\\\">Templates Required Directory</a></nobr> &gt; <NOBR><a href=\\\"/docs/pages-subdirectory\\\">Pages Subdirectory</a></nobr>.\\n\\t</li>\\n\\n\\t<li><span class=\\\"inline-code\\\">templates/components</span> – Components consist of code snippets and partials that can be reused throughout your theme. This directory is grouped by component type. For details, please see <NOBR><a href=\\\"/docs/about-the-templates-directory\\\">Templates Required Directory</a></nobr> &gt; <NOBR><a href=\\\"/docs/components-subdirectory\\\">Component Subdirectory</a></nobr>.\\n\\t</li>\\n\\n\\t<li><span class=\\\"inline-code\\\">templates/layout</span> – This is where you will define the overall structure (header, footer, etc.) for your site. You can implement multiple layouts here, for different use cases – to make it easy to switch between different look-and-feel variations for the same theme. For details, please see <NOBR><a href=\\\"/docs/about-the-templates-directory\\\">Templates Required Directory</a></nobr> &gt; <NOBR><a href=\\\"/docs/layout-subdirectory\\\">Layout Subdirectory</a></nobr>.\\n\\t</li>\\n\\n\\t<li><span class=\\\"inline-code\\\">assets</span> – Theme assets (images, CSS and JavaScript files) will be located in this directory. For details, please see <a href=\\\"/docs/css-resources\\\">CSS, JavaScript, and Design Resources</a>.\\n\\t</li>\\n\\n\\t<li><span class=\\\"inline-code\\\">lang</span> – Translation files, including the required <span class=\\\"inline-code\\\">en.json</span>. For details, please see <a href=\\\"/docs/i18n-l10n\\\">Internationalization/Localization</a>.\\n  </li>\\n</ol>\\n\\nWhen developing in your local environment, all files that you change in your Stencil theme directory (named&#160;<span class=\\\"inline-code\\\">/cornerstone/</span> in our <a href=\\\"/docs/installing-and-launching-stencil-1\\\">default installation</a>) will be reflected immediately when you load your site at <a href=\\\"http://localhost:3000\\\">http://localhost:3000</a>.\\n\\n\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Notes:\",\n  \"body\": \"Above, we continue to assume the default installation directory and port. Prior to March 2017, Stencil's default installation directory was `/stencil/`.\\n\\nUse the same substitutions for other examples on this page.\\n \\nYou can use <a href=\\\"/docs/using-yaml-front-matter\\\">front matter</a> to specify resources atop pages in the <span class=\\\"inline-code\\\">templates/pages</span> subdirectory. However, you cannot use front matter to do so on pages in the <span class=\\\"inline-code\\\">templates/components</span> or <span class=\\\"inline-code\\\">templates/layout</span> subdirectories.\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"Once you're acquainted with this path structure, please explore the <a href=\\\"/docs/developing-on-the-stencil-framework-quick-start/\\\">Development Quick Start</a> tutorial.\"\n}\n[/block]","excerpt":"","slug":"anatomy-of-the-stencil-theme","type":"basic","title":"Stencil Theme's Path Anatomy"}

Stencil Theme's Path Anatomy


[block:html] { "html": "<A NAME=\"PathAnatomy\"></a>Stencil uses a default theme for all newly initialized local storefronts. This theme provides the standard file structure, base design pattern, and default file assets needed to start developing a custom storefront experience.<br><br>\n\nThe file structure consists of four main subdirectories. Within those subdirectories, you'll be directed to specific files in the <a href=\"/docs/developing-on-the-stencil-framework-quick-start/\">Development Quick Start</a> tutorial and in Stencil reference material:\n<br>\n\n<ol>\n <li><span class=\"inline-code\">templates/pages</span> – This subdirectory contains all the base template pages used in a BigCommerce online store. The pages are grouped by page category. In order to prevent any rendering errors, please avoid changing page names. For details, please see <NOBR><a href=\"/docs/about-the-templates-directory\">Templates Required Directory</a></nobr> &gt; <NOBR><a href=\"/docs/pages-subdirectory\">Pages Subdirectory</a></nobr>.\n\t</li>\n\n\t<li><span class=\"inline-code\">templates/components</span> – Components consist of code snippets and partials that can be reused throughout your theme. This directory is grouped by component type. For details, please see <NOBR><a href=\"/docs/about-the-templates-directory\">Templates Required Directory</a></nobr> &gt; <NOBR><a href=\"/docs/components-subdirectory\">Component Subdirectory</a></nobr>.\n\t</li>\n\n\t<li><span class=\"inline-code\">templates/layout</span> – This is where you will define the overall structure (header, footer, etc.) for your site. You can implement multiple layouts here, for different use cases – to make it easy to switch between different look-and-feel variations for the same theme. For details, please see <NOBR><a href=\"/docs/about-the-templates-directory\">Templates Required Directory</a></nobr> &gt; <NOBR><a href=\"/docs/layout-subdirectory\">Layout Subdirectory</a></nobr>.\n\t</li>\n\n\t<li><span class=\"inline-code\">assets</span> – Theme assets (images, CSS and JavaScript files) will be located in this directory. For details, please see <a href=\"/docs/css-resources\">CSS, JavaScript, and Design Resources</a>.\n\t</li>\n\n\t<li><span class=\"inline-code\">lang</span> – Translation files, including the required <span class=\"inline-code\">en.json</span>. For details, please see <a href=\"/docs/i18n-l10n\">Internationalization/Localization</a>.\n </li>\n</ol>\n\nWhen developing in your local environment, all files that you change in your Stencil theme directory (named&#160;<span class=\"inline-code\">/cornerstone/</span> in our <a href=\"/docs/installing-and-launching-stencil-1\">default installation</a>) will be reflected immediately when you load your site at <a href=\"http://localhost:3000\">http://localhost:3000</a>.\n\n" } [/block] [block:callout] { "type": "warning", "title": "Notes:", "body": "Above, we continue to assume the default installation directory and port. Prior to March 2017, Stencil's default installation directory was `/stencil/`.\n\nUse the same substitutions for other examples on this page.\n \nYou can use <a href=\"/docs/using-yaml-front-matter\">front matter</a> to specify resources atop pages in the <span class=\"inline-code\">templates/pages</span> subdirectory. However, you cannot use front matter to do so on pages in the <span class=\"inline-code\">templates/components</span> or <span class=\"inline-code\">templates/layout</span> subdirectories." } [/block] [block:html] { "html": "Once you're acquainted with this path structure, please explore the <a href=\"/docs/developing-on-the-stencil-framework-quick-start/\">Development Quick Start</a> tutorial." } [/block]