{"_id":"5660974de163310d006b1954","version":{"_id":"55a6e72f8cc73e0d00096638","project":"55a6e72e8cc73e0d00096635","hasReference":false,"__v":30,"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","5b195f920059c20003083ad6"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"category":{"_id":"55b7ed07aea7c8190058badb","pages":["55b7edb7568be2230092bc34","5660974de163310d006b1954","569c05661719050d00025af4","569c06cdd326c80d0068f735","569d7e083dbdc20d005feeda"],"project":"55a6e72e8cc73e0d00096635","version":"55a6e72f8cc73e0d00096638","__v":5,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-07-28T20:58:47.836Z","from_sync":false,"order":0,"slug":"welcome-to-stencil","title":"Welcome to Stencil"},"parentDoc":null,"project":"55a6e72e8cc73e0d00096635","user":"55a6caa022cfa321008e01d6","__v":101,"updates":["5701dd86747d6d0e0076fdba","594f9bf79b364c001564e50c","596089c5ec222f001b8843ba","59b1ccff57911600382e0c25","59fecbf50a6cc4001ac76846","5a9188d9e657d7001c90a259"],"next":{"pages":[],"description":""},"createdAt":"2015-12-03T19:26:05.415Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"[block:html]\n{\n  \"html\": \"Stencil is a new approach to theme and front-end development on the BigCommerce platform. This theming engine allows you to create beautiful, dynamic, and powerful storefronts.<br><br>\\n<table style=\\\"border:none\\\">\\n  <tbody>\\n    <tr></tr>\\n    <tr>\\n      <td class=\\\"\\\" style=\\\"border: none\\\"><img src=\\\"https://files.readme.io/1f2a9bb-Thumbnails-composed-3-vars-298w-x-184h1-26-16.png\\\" alt=\\\"A Stencil Theme\\\" height=\\\"184\\\" width=\\\"298\\\">\\n        \\n      <td class=\\\"\\\" style=\\\"border: 0\\\"><br><br>You can offer merchants multiple variations on each theme.<br><br><br>You can also provide options for merchants to customize their storefront's look and feel, with no coding.</td>\\n    </tr>\\n  </tbody>\\n</table>\\n<h2>Stencil Framework and Components</h2>Stencil provides certain key components for both theme developers and merchants. These are summarized in this diagram, and are fully described in the remainder of this documentation.\\n<img src=\\\"https://files.readme.io/azmVqA3SnGgoYhit3udw_Stencil-Func-Diag3~912x600.png\\\" height=\\\"450\\\" width=\\\"684\\\"><br>\\n\\nThese key components are:\\n<ul>\\n  <li><b>Stencil Framework (Stencil CLI)<!--and Developer Toolkit-->:</b> The Stencil CLI framework enables developers to design and iterate themes locally, with full access to all assets – but with no impact on the merchant's live storefront.</li><br>\\n  <li><b>Theme Marketplaces:</b> Third-party marketplaces like ThemeForest enable developers to distribute themes to multiple merchants.</li><br>\\n  <li><b>Theme Editor:</b> This graphical, browser-based tool enables merchants to rapidly customize their themes' look and feel – and their storefront's function – with no coding. Theme developers' configuration choices determine which theme aspects merchants can customize, with what range of choices.)</li><br>\\n  <li><b>Storefront:</b> Merchants acquire themes, apply them to their storefronts, and customize them – creating an elegant user experience that resonates with their brand, and makes it easy for customers to find and purchase the products they want.</li>\\n</ul>\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<H2> Legacy Framework Documentation </h2>\\nLooking for information on BigCommerce's first-generation (Blueprint) themes framework, or on our API? You can access our:\\n\\n<ul>\\n  <li> <a href=\\\"https://developer.bigcommerce.com/themes\\\">Themes</a> &gt; <a href=\\\"https://developer.bigcommerce.com/themes/blueprint/\\\">Blueprint</a> reference. </li>\\n\\n<li> <a href=\\\"https://developer.bigcommerce.com/api\\\">Stores API</a> reference. </li>\\n</ul>\"\n}\n[/block]","excerpt":"An introduction to BigCommerce's new theming engine","slug":"what-is-stencil","type":"basic","title":"What Is Stencil?"}

What Is Stencil?

An introduction to BigCommerce's new theming engine

[block:html] { "html": "Stencil is a new approach to theme and front-end development on the BigCommerce platform. This theming engine allows you to create beautiful, dynamic, and powerful storefronts.<br><br>\n<table style=\"border:none\">\n <tbody>\n <tr></tr>\n <tr>\n <td class=\"\" style=\"border: none\"><img src=\"https://files.readme.io/1f2a9bb-Thumbnails-composed-3-vars-298w-x-184h1-26-16.png\" alt=\"A Stencil Theme\" height=\"184\" width=\"298\">\n \n <td class=\"\" style=\"border: 0\"><br><br>You can offer merchants multiple variations on each theme.<br><br><br>You can also provide options for merchants to customize their storefront's look and feel, with no coding.</td>\n </tr>\n </tbody>\n</table>\n<h2>Stencil Framework and Components</h2>Stencil provides certain key components for both theme developers and merchants. These are summarized in this diagram, and are fully described in the remainder of this documentation.\n<img src=\"https://files.readme.io/azmVqA3SnGgoYhit3udw_Stencil-Func-Diag3~912x600.png\" height=\"450\" width=\"684\"><br>\n\nThese key components are:\n<ul>\n <li><b>Stencil Framework (Stencil CLI)<!--and Developer Toolkit-->:</b> The Stencil CLI framework enables developers to design and iterate themes locally, with full access to all assets – but with no impact on the merchant's live storefront.</li><br>\n <li><b>Theme Marketplaces:</b> Third-party marketplaces like ThemeForest enable developers to distribute themes to multiple merchants.</li><br>\n <li><b>Theme Editor:</b> This graphical, browser-based tool enables merchants to rapidly customize their themes' look and feel – and their storefront's function – with no coding. Theme developers' configuration choices determine which theme aspects merchants can customize, with what range of choices.)</li><br>\n <li><b>Storefront:</b> Merchants acquire themes, apply them to their storefronts, and customize them – creating an elegant user experience that resonates with their brand, and makes it easy for customers to find and purchase the products they want.</li>\n</ul>" } [/block] [block:html] { "html": "<H2> Legacy Framework Documentation </h2>\nLooking for information on BigCommerce's first-generation (Blueprint) themes framework, or on our API? You can access our:\n\n<ul>\n <li> <a href=\"https://developer.bigcommerce.com/themes\">Themes</a> &gt; <a href=\"https://developer.bigcommerce.com/themes/blueprint/\">Blueprint</a> reference. </li>\n\n<li> <a href=\"https://developer.bigcommerce.com/api\">Stores API</a> reference. </li>\n</ul>" } [/block]