{"_id":"57c62d087e0b250e000d6548","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"},"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"},"user":"55a6caa022cfa321008e01d6","__v":1,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-08-31T01:04:08.085Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":9,"body":"If you want to use Stencil CLI to develop a custom storefront for a BigCommerce production store that was launched before January 26, 2016, you must follow the steps on this page.\n\nYou can do this procedure either before or after the [Stencil installation procedure](/docs/prerequisites). But you _must_ complete the steps on this page before you [initialize Stencil](/docs/initializing-stencil).\n[block:html]\n{\n  \"html\": \"<!-- listed [here](/docs/launching-stencil). -->\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"* Enabling an inactive Stencil theme will not affect your existing Blueprint theme. Your store will continue working as normal.\\n\\n* Developers can work on the Stencil theme locally, before applying your Stencil theme to a production or sandbox store.\",\n  \"title\": \"Parallel Local Development\"\n}\n[/block]\n1. From the BigCommerce control panel, select `Storefront Design`, then `Themes` (or `My Themes`).\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/2d07c26-Blueprint-to-Stencil-1a.png\",\n        \"Blueprint-to-Stencil-1a.png\",\n        1069,\n        374,\n        \"#342c3c\"\n      ],\n      \"sizing\": \"80\"\n    }\n  ]\n}\n[/block]\n2. From the resulting Current Theme display, select `Explore new themes` at the upper right.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/91f2ebe-Blueprint-to-Stencil-2a.png\",\n        \"Blueprint-to-Stencil-2a.png\",\n        1290,\n        606,\n        \"#322e4f\"\n      ],\n      \"sizing\": \"80\"\n    }\n  ]\n}\n[/block]\n3. From the Theme Marketplace page, select `Free`.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/5992046-Blueprint-to-Stencil-3a.png\",\n        \"Blueprint-to-Stencil-3a.png\",\n        1116,\n        463,\n        \"#342c3c\"\n      ],\n      \"sizing\": \"80\"\n    }\n  ]\n}\n[/block]\n4. Scroll down and select the thumbnail for the `Cornerstone Light` base theme.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/88d046c-Blueprint-to-Stencil-4a.png\",\n        \"Blueprint-to-Stencil-4a.png\",\n        1258,\n        775,\n        \"#e5cbbf\"\n      ],\n      \"sizing\": \"80\"\n    }\n  ]\n}\n[/block]\n5. From the Cornerstone Light description page, select `Add Theme` at the upper right.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/c0431ee-Blueprint-to-Stencil-5a.png\",\n        \"Blueprint-to-Stencil-5a.png\",\n        1292,\n        291,\n        \"#342c3c\"\n      ],\n      \"sizing\": \"80\"\n    }\n  ]\n}\n[/block]\n6. In the `Stencil Early Access Themes` dialog, select `Yes`.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/3bfb886-Blueprint-to-Stencil-6a.png\",\n        \"Blueprint-to-Stencil-6a.png\",\n        960,\n        804,\n        \"#7c7b92\"\n      ],\n      \"sizing\": \"80\"\n    }\n  ]\n}\n[/block]\nThis makes Stencil's base Cornerstone theme available to your store – without affecting the live store.   \nYou are now free to use Stencil CLI (which must be [installed](/docs/prerequisites) and [launched](/docs/launching-stencil) separately) for local theme development.\n[block:html]\n{\n  \"html\": \"<!-- To add the base theme:<br>\\n\\n<ol>\\n  <li>Navigate to a directory where you have appropriate write permissions, and in which you want to install a subdirectory for your theme. \\n  </li><p></p>\\n\\n<li>Execute the following command, to clone the base Stencil theme into a new subdirectory named <span class=\\\"inline-code\\\">.../cornerstone/</span>:<p></p>\\n\\n<pre>git clone https://github.com/bigcommerce/cornerstone.git</pre>\\n  \\n  If the above command fails, and you are accessing GitHub anonymously, give the URL this alternate prefix:<p></p>\\n\\n<pre>git clone git://github.com/bigcommerce/cornerstone.git</pre>\\n  </li>\\n</ol>\\n\\nAdd a note here: If downloading a marketplace theme, must install jspm, register your jspm instance, and set up BitBucket access...\\n\\n<br> If you are installing Stencil for the first time, then in the next step, you will install Stencil <a href=\\\"/docs/javascript-utilities\\\">JavaScript utilities</a> to enable API access via Ajax. -->\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"When you ultimately switch your store from Blueprint to Stencil, certain control-panel details will change: Some storefront options previously managed in the control panel will instead be available to store users in Stencil's Theme Editor GUI. \\n\\nFor details, please see [What Is Theme Editor?](/docs/what-is-theme-editor) and [schema.json/Theme Editor Metadata](/docs/schemajson-metadata-for-theme-editor). A few Blueprint display options will not be displayed to Stencil theme users at all, because the Stencil framework reserves these choices for theme designers.\\n\\nYou can always switch the store back to Blueprint by applying a Blueprint theme such as Classic Next.\",\n  \"title\": \"Control-Panel Differences\"\n}\n[/block]","excerpt":"For production stores launched before 1/26/2016","slug":"blueprint-to-stencil","type":"basic","title":"Blueprint Stores: Enabling Stencil"}

Blueprint Stores: Enabling Stencil

For production stores launched before 1/26/2016

If you want to use Stencil CLI to develop a custom storefront for a BigCommerce production store that was launched before January 26, 2016, you must follow the steps on this page. You can do this procedure either before or after the [Stencil installation procedure](/docs/prerequisites). But you _must_ complete the steps on this page before you [initialize Stencil](/docs/initializing-stencil). [block:html] { "html": "<!-- listed [here](/docs/launching-stencil). -->" } [/block] [block:callout] { "type": "info", "body": "* Enabling an inactive Stencil theme will not affect your existing Blueprint theme. Your store will continue working as normal.\n\n* Developers can work on the Stencil theme locally, before applying your Stencil theme to a production or sandbox store.", "title": "Parallel Local Development" } [/block] 1. From the BigCommerce control panel, select `Storefront Design`, then `Themes` (or `My Themes`). [block:image] { "images": [ { "image": [ "https://files.readme.io/2d07c26-Blueprint-to-Stencil-1a.png", "Blueprint-to-Stencil-1a.png", 1069, 374, "#342c3c" ], "sizing": "80" } ] } [/block] 2. From the resulting Current Theme display, select `Explore new themes` at the upper right. [block:image] { "images": [ { "image": [ "https://files.readme.io/91f2ebe-Blueprint-to-Stencil-2a.png", "Blueprint-to-Stencil-2a.png", 1290, 606, "#322e4f" ], "sizing": "80" } ] } [/block] 3. From the Theme Marketplace page, select `Free`. [block:image] { "images": [ { "image": [ "https://files.readme.io/5992046-Blueprint-to-Stencil-3a.png", "Blueprint-to-Stencil-3a.png", 1116, 463, "#342c3c" ], "sizing": "80" } ] } [/block] 4. Scroll down and select the thumbnail for the `Cornerstone Light` base theme. [block:image] { "images": [ { "image": [ "https://files.readme.io/88d046c-Blueprint-to-Stencil-4a.png", "Blueprint-to-Stencil-4a.png", 1258, 775, "#e5cbbf" ], "sizing": "80" } ] } [/block] 5. From the Cornerstone Light description page, select `Add Theme` at the upper right. [block:image] { "images": [ { "image": [ "https://files.readme.io/c0431ee-Blueprint-to-Stencil-5a.png", "Blueprint-to-Stencil-5a.png", 1292, 291, "#342c3c" ], "sizing": "80" } ] } [/block] 6. In the `Stencil Early Access Themes` dialog, select `Yes`. [block:image] { "images": [ { "image": [ "https://files.readme.io/3bfb886-Blueprint-to-Stencil-6a.png", "Blueprint-to-Stencil-6a.png", 960, 804, "#7c7b92" ], "sizing": "80" } ] } [/block] This makes Stencil's base Cornerstone theme available to your store – without affecting the live store. You are now free to use Stencil CLI (which must be [installed](/docs/prerequisites) and [launched](/docs/launching-stencil) separately) for local theme development. [block:html] { "html": "<!-- To add the base theme:<br>\n\n<ol>\n <li>Navigate to a directory where you have appropriate write permissions, and in which you want to install a subdirectory for your theme. \n </li><p></p>\n\n<li>Execute the following command, to clone the base Stencil theme into a new subdirectory named <span class=\"inline-code\">.../cornerstone/</span>:<p></p>\n\n<pre>git clone https://github.com/bigcommerce/cornerstone.git</pre>\n \n If the above command fails, and you are accessing GitHub anonymously, give the URL this alternate prefix:<p></p>\n\n<pre>git clone git://github.com/bigcommerce/cornerstone.git</pre>\n </li>\n</ol>\n\nAdd a note here: If downloading a marketplace theme, must install jspm, register your jspm instance, and set up BitBucket access...\n\n<br> If you are installing Stencil for the first time, then in the next step, you will install Stencil <a href=\"/docs/javascript-utilities\">JavaScript utilities</a> to enable API access via Ajax. -->" } [/block] [block:callout] { "type": "info", "body": "When you ultimately switch your store from Blueprint to Stencil, certain control-panel details will change: Some storefront options previously managed in the control panel will instead be available to store users in Stencil's Theme Editor GUI. \n\nFor details, please see [What Is Theme Editor?](/docs/what-is-theme-editor) and [schema.json/Theme Editor Metadata](/docs/schemajson-metadata-for-theme-editor). A few Blueprint display options will not be displayed to Stencil theme users at all, because the Stencil framework reserves these choices for theme designers.\n\nYou can always switch the store back to Blueprint by applying a Blueprint theme such as Classic Next.", "title": "Control-Panel Differences" } [/block]