{"__v":96,"_id":"5660974de163310d006b1954","category":{"__v":5,"_id":"55b7ed07aea7c8190058badb","pages":["55b7edb7568be2230092bc34","5660974de163310d006b1954","569c05661719050d00025af4","569c06cdd326c80d0068f735","569d7e083dbdc20d005feeda"],"project":"55a6e72e8cc73e0d00096635","version":"55a6e72f8cc73e0d00096638","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","version":{"__v":28,"_id":"55a6e72f8cc73e0d00096638","hasDoc":true,"hasReference":false,"project":"55a6e72e8cc73e0d00096635","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"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":["5701dd86747d6d0e0076fdba"],"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\\n<table style=\\\"border:none\\\">\\n   <tr>\\n   </tr>\\n   <tr>\\n\\n    <td class=\\\"\\\" style=\\\"border: none\\\"> \\n      <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\\\">  <!-- <img src=\\\"https://files.readme.io/GVlJWCszRTSNm79ClpZJ_Thumbnails-composed-3-vars-298w-x-184h:::at:::1-26-16.png\\\" alt=\\\"A Stencil Theme\\\" height=\\\"124\\\" width=\\\"203\\\"> <img src=\\\"https://files.readme.io/uzBRYWXQm6Xstt5v14QG_composed-3-vars-203w-x-124h@1-21-16.png\\\" alt=\\\"A Stencil Theme\\\" height=\\\"124\\\" width=\\\"203\\\"> --> </td>      \\n     \\n<!--    <td class=\\\"\\\" style=\\\"border: none\\\"> <img src=\\\"https://files.readme.io/Kfxv03qDSvmmgxZzDLg6_Themes~desktop_bold+desktop_light@259x165.png\\\" alt=\\\"A Stencil Theme\\\" height=\\\"165\\\" width=\\\"259\\\"> </td> -->    \\n     \\n<!-- Replace ^ these \\\\/ placeholder image thumbnails in Jan. '16, with thumbnails of final themes:    \\n<td class=\\\"\\\" style=\\\"border: none\\\"> <img src=\\\"https://files.readme.io/ko3ji2PSPmT7wcA5dXwA_Theme-Guys+Dolls~lo-res.png\\\" alt=\\\"A Stencil Theme\\\" height=\\\"202\\\" width=\\\"259\\\"> </td>\\n -->\\n     \\n    <td class=\\\"\\\" style=\\\"border: 0\\\"><br><br>\\n      You can offer merchants multiple variations on each theme.<br><br><br> \\nYou can also provide options for merchants to customize their storefront's look and feel, with no coding.\\n      \\n      <!-- <br><br> The compelling store designs in the <a href=\\\"http://www.bigcommerce.com/showcase/\\\">Bigcommerce Showcase</a> demonstrate the kinds of themes you can create. --></td>\\n   </tr>\\n</table>\\n\\n<h2>Stencil Framework and Components</h2>\\n\\nStencil 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\\n<img src=\\\"https://files.readme.io/azmVqA3SnGgoYhit3udw_Stencil-Func-Diag3~912x600.png\\\" height=\\\"450\\\" width=\\\"684\\\"><br>\\n\\n<!-- ^ Graphic's native size is 912 x 600. Prior was: <img src=\\\"https://files.readme.io/WhzRlxteQPmNGMG7CS64_Stencil-Flow-Diagram-v3a.png\\\" alt=\\\"Stencil Key Components\\\"> -->\\n\\n<!-- Earliest: <img src=\\\"https://files.readme.io/lfG7KKJvT5qS5vAV7bIm_Stencil-Flow-Diagram-v2b.png\\\" alt=\\\"Stencil Key Components\\\"> -->\\n\\nThese key components are:\\n\\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 &ndash; but with no impact on the merchant's live storefront.\\n  </li><br>\\n  <li><b>Theme Marketplaces:</b> Third-party marketplaces like ThemeForest enable developers to distribute themes to multiple merchants. (We anticipate that the BigCommerce Theme Marketplace will begin distributing partners' Stencil themes later in 2017.)\\n  </li><br>\\n  <li><b>Theme Editor:</b> This graphical, browser-based tool enables merchants to rapidly customize their themes' look and feel &ndash; and their storefront's function &ndash; with no coding. Theme developers' configuration choices determine which theme aspects merchants can customize, with what range of choices.)\\n  </li><br>\\n  <li><b>Storefront:</b> Merchants acquire themes, apply them to their storefronts, and customize them &ndash; creating an elegant user experience that resonates with their brand, and makes it easy for customers to find and purchase the products they want.\\n  </li>\\n</ul>\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<!-- <h2>Making the Most of Your Theme</h2>\\n\\nTo ensure that your themes make the most of BigCommerce’s extensive out-of-the-box features and capabilities, <nobr>please be</nobr> aware of all the <a href=\\\"https://www.bigcommerce.com/features/all/\\\">supported features</a> that store owners manage and maintain through the BigCommerce <nobr>control panel</nobr>.<br>\\n\\n<h2>Support Resources</h2>\\n\\nYou can ask questions and seek advice in <nobr>the <a href=\\\"http://forum.bigcommerce.com/f4/\\\">Design &amp; Customization Forum</a></nobr>, and on BigCommerce's <nobr><a href=\\\"http://stackoverflow.com/questions/tagged/bigcommerce\\\">Stack Overflow</a></nobr> pages. For professional assistance in customizing a theme, consider hiring a <nobr><a href=\\\"http://www.bigcommerce.com/experts/\\\">BigCommerce Expert</a></nobr>.<br><br><br> -->\\n\\n<H2> Legacy Framework Documentation </h2>\\nLooking for information on BigCommerce's first-generation (Blueprint) themes framework, or 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(Image credit: Ashley Brown) <!--\\n\\n(Image credits: Icons by <a href=\\\"http://www.flaticon.com\\\" title=\\\"Flaticon\\\">www.flaticon.com</a>, adapted courtesy of <a href=\\\"http://www.freepik.com\\\" title=\\\"Freepik\\\">Freepik</a> under <a href=\\\"http://creativecommons.org/licenses/by/3.0/\\\" title=\\\"Creative Commons 3.0\\\">Creative Commons 3.0</a> license.) -->\"\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\n<table style=\"border:none\">\n <tr>\n </tr>\n <tr>\n\n <td class=\"\" style=\"border: none\"> \n <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\"> <!-- <img src=\"https://files.readme.io/GVlJWCszRTSNm79ClpZJ_Thumbnails-composed-3-vars-298w-x-184h@1-26-16.png\" alt=\"A Stencil Theme\" height=\"124\" width=\"203\"> <img src=\"https://files.readme.io/uzBRYWXQm6Xstt5v14QG_composed-3-vars-203w-x-124h@1-21-16.png\" alt=\"A Stencil Theme\" height=\"124\" width=\"203\"> --> </td> \n \n<!-- <td class=\"\" style=\"border: none\"> <img src=\"https://files.readme.io/Kfxv03qDSvmmgxZzDLg6_Themes~desktop_bold+desktop_light@259x165.png\" alt=\"A Stencil Theme\" height=\"165\" width=\"259\"> </td> --> \n \n<!-- Replace ^ these \\/ placeholder image thumbnails in Jan. '16, with thumbnails of final themes: \n<td class=\"\" style=\"border: none\"> <img src=\"https://files.readme.io/ko3ji2PSPmT7wcA5dXwA_Theme-Guys+Dolls~lo-res.png\" alt=\"A Stencil Theme\" height=\"202\" width=\"259\"> </td>\n -->\n \n <td class=\"\" style=\"border: 0\"><br><br>\n You can offer merchants multiple variations on each theme.<br><br><br> \nYou can also provide options for merchants to customize their storefront's look and feel, with no coding.\n \n <!-- <br><br> The compelling store designs in the <a href=\"http://www.bigcommerce.com/showcase/\">Bigcommerce Showcase</a> demonstrate the kinds of themes you can create. --></td>\n </tr>\n</table>\n\n<h2>Stencil Framework and Components</h2>\n\nStencil 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\n<img src=\"https://files.readme.io/azmVqA3SnGgoYhit3udw_Stencil-Func-Diag3~912x600.png\" height=\"450\" width=\"684\"><br>\n\n<!-- ^ Graphic's native size is 912 x 600. Prior was: <img src=\"https://files.readme.io/WhzRlxteQPmNGMG7CS64_Stencil-Flow-Diagram-v3a.png\" alt=\"Stencil Key Components\"> -->\n\n<!-- Earliest: <img src=\"https://files.readme.io/lfG7KKJvT5qS5vAV7bIm_Stencil-Flow-Diagram-v2b.png\" alt=\"Stencil Key Components\"> -->\n\nThese key components are:\n\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 &ndash; but with no impact on the merchant's live storefront.\n </li><br>\n <li><b>Theme Marketplaces:</b> Third-party marketplaces like ThemeForest enable developers to distribute themes to multiple merchants. (We anticipate that the BigCommerce Theme Marketplace will begin distributing partners' Stencil themes later in 2017.)\n </li><br>\n <li><b>Theme Editor:</b> This graphical, browser-based tool enables merchants to rapidly customize their themes' look and feel &ndash; and their storefront's function &ndash; with no coding. Theme developers' configuration choices determine which theme aspects merchants can customize, with what range of choices.)\n </li><br>\n <li><b>Storefront:</b> Merchants acquire themes, apply them to their storefronts, and customize them &ndash; creating an elegant user experience that resonates with their brand, and makes it easy for customers to find and purchase the products they want.\n </li>\n</ul>" } [/block] [block:html] { "html": "<!-- <h2>Making the Most of Your Theme</h2>\n\nTo ensure that your themes make the most of BigCommerce’s extensive out-of-the-box features and capabilities, <nobr>please be</nobr> aware of all the <a href=\"https://www.bigcommerce.com/features/all/\">supported features</a> that store owners manage and maintain through the BigCommerce <nobr>control panel</nobr>.<br>\n\n<h2>Support Resources</h2>\n\nYou can ask questions and seek advice in <nobr>the <a href=\"http://forum.bigcommerce.com/f4/\">Design &amp; Customization Forum</a></nobr>, and on BigCommerce's <nobr><a href=\"http://stackoverflow.com/questions/tagged/bigcommerce\">Stack Overflow</a></nobr> pages. For professional assistance in customizing a theme, consider hiring a <nobr><a href=\"http://www.bigcommerce.com/experts/\">BigCommerce Expert</a></nobr>.<br><br><br> -->\n\n<H2> Legacy Framework Documentation </h2>\nLooking for information on BigCommerce's first-generation (Blueprint) themes framework, or 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(Image credit: Ashley Brown) <!--\n\n(Image credits: Icons by <a href=\"http://www.flaticon.com\" title=\"Flaticon\">www.flaticon.com</a>, adapted courtesy of <a href=\"http://www.freepik.com\" title=\"Freepik\">Freepik</a> under <a href=\"http://creativecommons.org/licenses/by/3.0/\" title=\"Creative Commons 3.0\">Creative Commons 3.0</a> license.) -->" } [/block]