{"_id":"57d6517f95d3680e00ec1f0f","user":"55a6caa022cfa321008e01d6","project":"55a6e72e8cc73e0d00096635","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"},"__v":1,"category":{"_id":"57e48a4000c8680e00fae6e7","version":"55a6e72f8cc73e0d00096638","__v":0,"project":"55a6e72e8cc73e0d00096635","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-09-23T01:49:52.242Z","from_sync":false,"order":3,"slug":"advanced-installation-options","title":"Advanced Installation Options"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-09-12T06:55:59.734Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"[block:html]\n{\n  \"html\": \"<!-- Legacy diagram, running all Marketplace themes through jspm: https://files.readme.io/031653b-Stencil-Install-Flows.png\\n\\nUpdated (for Webpack) diagram, branching to either jspm or theme refresh: https://files.readme.io/7792767-Stencil-Install-Flows.png\\n-->\"\n}\n[/block]\nThe diagram below looks complex because it shows _all_ currently supported workflows for setting up Stencil. However, for a [typical initial setup](/docs/installing-and-launching-stencil-1) – incorporating the default Cornerstone reference theme, or the Diamond or Queen theme – you would just follow the black arrows straight down from top to bottom.\n\nHere are the color codes for each setup scenario, with links to details about individual steps:\n\n* Black: [Basic initial setup](/docs/navigating-setup#clone), relying on default Cornerstone theme. (Use this same simplified workflow for the Diamond or Queen theme.)\n* <span style=\"color:#6600CC\"> Purple: Customize a theme [downloaded](/docs/navigating-setup#download) from Theme Marketplace (_other than_ Cornerstone, Diamond, or Queen). </span>\n* <span style=\"color:#FFB366\"> Orange: [Refresh Cornerstone (or Diamond or Queen)](/docs/navigating-setup#refresh) from Theme Marketplace. </span>\n* <span style=\"color:#00CC00\"> Green: Configure a [custom JavaScript build system](/docs/navigating-setup#custbuild), to avoid dependence on Webpack and jspm. </span>\n* <span style=\"color:#0000FF\"> Blue: </span> Adds onto any of the preceding four scenarios. <span style=\"color:#0000FF\"> If developing for a BigCommerce [Blueprint production store launched before Jan. 26, 2016](/docs/navigating-setup#blueupdate), you must add one extra step to [enable&#160;Stencil](/docs/blueprint-to-stencil) </span> in the store's control panel.</span>\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/99824af-Stencil-Install-Flows.png\",\n        \"Stencil-Install-Flows.png\",\n        807,\n        1117,\n        \"#c8d2f5\"\n      ],\n      \"sizing\": \"80\",\n      \"border\": false,\n      \"caption\": \"*Also applies to Diamond and Queen.\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<!-- \\n## Alternate/Optional Workflows:\\n\\n* Burnt sienna: B85450 (/docs/navigating-setup#download)\\n* Green: 00CC00 (/docs/navigating-setup#custbuild)\\n* Yellow: FFFF00 (/docs/navigating-setup#refresh)\\n* Blue: 0000FF Same as [basic installation](/docs/navigating-* setup#clone), but must [enable Stencil on the storefront](/blueprint-to-stencil).\\n\\nHowever, a typical initial setup – incorporating the default Cornerstone reference theme – is simpler: You would follow the black arrows straight from top to bottom. Please see the legend below for other setup scenarios.\\n\\n## Key to Setup Scenarios\\n\\nEach color shows one setup scenario. The list below links out to \\n\\n* Black: [Basic initial setup](/docs/navigating-setup#clone), relying on default Cornerstone theme.\\n* <span style=\\\"color:#B85450\\\"> Burnt sienna: </span> [PxU from Theme Marketplace](/docs/navigating-setup#download)\\n* <span style=\\\"color:#00CC00\\\"> Green:  </span> [Custom build system](/docs/navigating-setup#custbuild)\\n* <span style=\\\"color:#FFFF00\\\"> Yellow: </span> [Refresh Cornerstone from Theme Marketplace](/docs/navigating-setup#refresh)\\n* <span style=\\\"color:#0000FF\\\"> Blue: </span>  Blueprint production store launched before Jan. 26, 2016 – follow [basic setup](/docs/navigating-* setup#clone), but you must [enable&#160;Stencil](/blueprint-to-stencil) in the store's control panel.\\n-->\"\n}\n[/block]","excerpt":"","slug":"stencil-setup-illustrated","type":"basic","title":"Stencil Setup, Illustrated"}

Stencil Setup, Illustrated


[block:html] { "html": "<!-- Legacy diagram, running all Marketplace themes through jspm: https://files.readme.io/031653b-Stencil-Install-Flows.png\n\nUpdated (for Webpack) diagram, branching to either jspm or theme refresh: https://files.readme.io/7792767-Stencil-Install-Flows.png\n-->" } [/block] The diagram below looks complex because it shows _all_ currently supported workflows for setting up Stencil. However, for a [typical initial setup](/docs/installing-and-launching-stencil-1) – incorporating the default Cornerstone reference theme, or the Diamond or Queen theme – you would just follow the black arrows straight down from top to bottom. Here are the color codes for each setup scenario, with links to details about individual steps: * Black: [Basic initial setup](/docs/navigating-setup#clone), relying on default Cornerstone theme. (Use this same simplified workflow for the Diamond or Queen theme.) * <span style="color:#6600CC"> Purple: Customize a theme [downloaded](/docs/navigating-setup#download) from Theme Marketplace (_other than_ Cornerstone, Diamond, or Queen). </span> * <span style="color:#FFB366"> Orange: [Refresh Cornerstone (or Diamond or Queen)](/docs/navigating-setup#refresh) from Theme Marketplace. </span> * <span style="color:#00CC00"> Green: Configure a [custom JavaScript build system](/docs/navigating-setup#custbuild), to avoid dependence on Webpack and jspm. </span> * <span style="color:#0000FF"> Blue: </span> Adds onto any of the preceding four scenarios. <span style="color:#0000FF"> If developing for a BigCommerce [Blueprint production store launched before Jan. 26, 2016](/docs/navigating-setup#blueupdate), you must add one extra step to [enable&#160;Stencil](/docs/blueprint-to-stencil) </span> in the store's control panel.</span> [block:image] { "images": [ { "image": [ "https://files.readme.io/99824af-Stencil-Install-Flows.png", "Stencil-Install-Flows.png", 807, 1117, "#c8d2f5" ], "sizing": "80", "border": false, "caption": "*Also applies to Diamond and Queen." } ] } [/block] [block:html] { "html": "<!-- \n## Alternate/Optional Workflows:\n\n* Burnt sienna: B85450 (/docs/navigating-setup#download)\n* Green: 00CC00 (/docs/navigating-setup#custbuild)\n* Yellow: FFFF00 (/docs/navigating-setup#refresh)\n* Blue: 0000FF Same as [basic installation](/docs/navigating-* setup#clone), but must [enable Stencil on the storefront](/blueprint-to-stencil).\n\nHowever, a typical initial setup – incorporating the default Cornerstone reference theme – is simpler: You would follow the black arrows straight from top to bottom. Please see the legend below for other setup scenarios.\n\n## Key to Setup Scenarios\n\nEach color shows one setup scenario. The list below links out to \n\n* Black: [Basic initial setup](/docs/navigating-setup#clone), relying on default Cornerstone theme.\n* <span style=\"color:#B85450\"> Burnt sienna: </span> [PxU from Theme Marketplace](/docs/navigating-setup#download)\n* <span style=\"color:#00CC00\"> Green: </span> [Custom build system](/docs/navigating-setup#custbuild)\n* <span style=\"color:#FFFF00\"> Yellow: </span> [Refresh Cornerstone from Theme Marketplace](/docs/navigating-setup#refresh)\n* <span style=\"color:#0000FF\"> Blue: </span> Blueprint production store launched before Jan. 26, 2016 – follow [basic setup](/docs/navigating-* setup#clone), but you must [enable&#160;Stencil](/blueprint-to-stencil) in the store's control panel.\n-->" } [/block]