{"_id":"5608e5448aedf50d0004cf93","__v":11,"user":"55a6caa022cfa321008e01d6","category":{"_id":"5605f309a4574a0d00811366","version":"55a6e72f8cc73e0d00096638","__v":10,"pages":["5608e5448aedf50d0004cf93","5608e54fa7b2590d0089eae5","5608e58331beb60d001b655a","5608e59ea7b2590d0089eae8","5608e5c031beb60d001b655c","5608e5d28aedf50d0004cf95","5608e5f7a7cc2f0d00d9754a","5608e61131beb60d001b655e","5608efbdc5cff70d007d00ee","5669f132c3de130d00441858"],"project":"55a6e72e8cc73e0d00096635","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-26T01:21:13.347Z","from_sync":false,"order":4,"slug":"development-quick-start","title":"Development Quick Start"},"parentDoc":null,"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"},"updates":["56710794a0ee9b0d001851a4"],"next":{"pages":[],"description":""},"createdAt":"2015-09-28T06:59:16.274Z","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\": \"To create a custom theme, you either duplicate or modify the structure that you have already <a href=\\\"/docs/installing-stencil-cli-1\\\">installed</a> for Stencil’s default theme:</h1><br><p></p>\\n\\n<pre>&lt;your-development-environment&gt;\\n&nbsp; &nbsp; &nbsp; &nbsp; /stencil\\n</pre>\\n\\n\\nYou could, for example, duplicate the <span class=\\\"inline-code\\\">/stencil</span> directory to a parallel directory, and develop there:<br><p></p>\\n\\n<pre>&lt;your-development-environment&gt;\\n&nbsp; &nbsp; &nbsp; &nbsp; /stencil\\n&nbsp; &nbsp; &nbsp; &nbsp; /&lt;theme-name&gt;</pre>\\n\\n\\nWhether you choose to directly modify the <span class=\\\"inline-code\\\">/stencil</span> installation, or to work in a new parallel directory, these instructions will refer to your top-level theme directory generally as <span class=\\\"inline-code\\\">&lt;theme-name&gt;</span>.<br>\\n\\n<h2> Re-Starting Stencil</h2>\\n\\nIf you do copy the <span class=\\\"inline-code\\\">/stencil</span> directory structure to a parallel directory, as described above, then you must reissue both the <span class=\\\"inline-code\\\">stencil init</span> and <span class=\\\"inline-code\\\">stencil start</span> command-line instructions from inside your newly created directory. This will make this new theme instance available to your browsers.<br>\\n\\n<h2> Configuring config.json Keys</h2>\\n\\nWhen you create (or adapt) a new Stencil theme, you must configure certain values in its <span class=\\\"inline-code\\\"><NOBR>&lt;theme-name&gt;/config.json</nobr></span> file. For example, here are the first few key/value sets in the default Stencil theme’s <span class=\\\"inline-code\\\">config.json</span>:<br><p></p>\\n\\n<pre>{\\n\\\"name\\\": \\\"Stencil\\\",\\n\\\"version\\\": \\\"1.0.0\\\",\\n\\\"meta\\\": {\\n  \\\"price\\\": 15000,\\n  \\\"documentation_url\\\": \\\"https://stencil.bigcommerce.com/docs\\\",\\n  ...\\n  }\\n}</pre>\\n\\n\\nThe next code block shows how you might change these values to reflect your own theme’s name, version number, price on Theme Marketplace, and documentation URL:<br><p></p>\\n\\n<pre>{\\n\\\"name\\\": \\\"MyTheme\\\",\\n\\\"version\\\": \\\"1.1.2\\\",\\n\\\"meta\\\": {\\n  \\\"price\\\": 10000,\\n  \\\"documentation_url\\\": \\\"https://www.mywebsite.com/theme-docs/my-theme.html\\\",\\n  ...\\n  }\\n}</pre>\\n\\n\\nFor further details about <span class=\\\"inline-code\\\">config.json</span> settings, please see the in-depth <span class=\\\"inline-code\\\">config.json</span> <a href=\\\"/docs/configjson-reference\\\">reference</a>.\"\n}\n[/block]","excerpt":"","slug":"creating-a-new-theme","type":"basic","title":"Creating a New Theme"}

Creating a New Theme


[block:html] { "html": "To create a custom theme, you either duplicate or modify the structure that you have already <a href=\"/docs/installing-stencil-cli-1\">installed</a> for Stencil’s default theme:</h1><br><p></p>\n\n<pre>&lt;your-development-environment&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; /stencil\n</pre>\n\n\nYou could, for example, duplicate the <span class=\"inline-code\">/stencil</span> directory to a parallel directory, and develop there:<br><p></p>\n\n<pre>&lt;your-development-environment&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; /stencil\n&nbsp; &nbsp; &nbsp; &nbsp; /&lt;theme-name&gt;</pre>\n\n\nWhether you choose to directly modify the <span class=\"inline-code\">/stencil</span> installation, or to work in a new parallel directory, these instructions will refer to your top-level theme directory generally as <span class=\"inline-code\">&lt;theme-name&gt;</span>.<br>\n\n<h2> Re-Starting Stencil</h2>\n\nIf you do copy the <span class=\"inline-code\">/stencil</span> directory structure to a parallel directory, as described above, then you must reissue both the <span class=\"inline-code\">stencil init</span> and <span class=\"inline-code\">stencil start</span> command-line instructions from inside your newly created directory. This will make this new theme instance available to your browsers.<br>\n\n<h2> Configuring config.json Keys</h2>\n\nWhen you create (or adapt) a new Stencil theme, you must configure certain values in its <span class=\"inline-code\"><NOBR>&lt;theme-name&gt;/config.json</nobr></span> file. For example, here are the first few key/value sets in the default Stencil theme’s <span class=\"inline-code\">config.json</span>:<br><p></p>\n\n<pre>{\n\"name\": \"Stencil\",\n\"version\": \"1.0.0\",\n\"meta\": {\n \"price\": 15000,\n \"documentation_url\": \"https://stencil.bigcommerce.com/docs\",\n ...\n }\n}</pre>\n\n\nThe next code block shows how you might change these values to reflect your own theme’s name, version number, price on Theme Marketplace, and documentation URL:<br><p></p>\n\n<pre>{\n\"name\": \"MyTheme\",\n\"version\": \"1.1.2\",\n\"meta\": {\n \"price\": 10000,\n \"documentation_url\": \"https://www.mywebsite.com/theme-docs/my-theme.html\",\n ...\n }\n}</pre>\n\n\nFor further details about <span class=\"inline-code\">config.json</span> settings, please see the in-depth <span class=\"inline-code\">config.json</span> <a href=\"/docs/configjson-reference\">reference</a>." } [/block]