{"_id":"57d6504595d3680e00ec1f0e","__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"},"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"},"user":"55a6caa022cfa321008e01d6","updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-09-12T06:50:45.803Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"[block:html]\n{\n  \"html\": \"<!-- (Outs from orange \\\"Notes\\\" callout:)  \\n* Some scenarios will link you to the  <a href=\\\"/docs/download-and-build-scenarios\\\">Downloading/Customizing Themes</a> subsection. \\n\\n* On UNIX-based platforms (Mac OS X and Linux), an initial [Cornerstone-based setup](#clone) will typically take about 10–20 minutes, depending on your network connection and hardware. On Windows, you might need to allow substantial extra time to [install Visual Studio](/docs/prerequisites-windows#vs_win).\\n -->\"\n}\n[/block]\nBelow, each heading identifies one theme-development scenario, and lists the minimum installation steps you will need to support that scenario:<br>\n\n* [Initial Cornerstone-Based Setup](#clone)\n* [Cornerstone (or Diamond Classic/Queen) Refresh](#refresh)\n* [Downloaded Marketplace Theme](#download)\n* [Custom Build System](#custbuild)\n* [Blueprint Store Launched before 1/26/2016](#blueupdate)\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Notes\",\n  \"body\": \"* Some steps are optional for some theme-development workflows. See <a href=\\\"#workflows\\\">below</a> to identify the recommended installation pathway for your own scenario.\\n\\n* After successful framework installation (or reinstallation), all scenarios will link you to the <a href=\\\"/docs/preparing-your-store-tokens\\\">Preparing&#160;Your Store/Tokens</a> and <a href=\\\"/docs/launching-stencil\\\">Launching&#160;Stencil</a> subsections, to launch your theme locally against a BigCommerce storefront.\\n\\n* Our installation instructions have been tested on Mac OS X Yosemite, Linux/Ubuntu v.14.04.4, and Windows&#160;8. Dependencies for other platforms/releases will be added upon further testing.\\n\\n* If you encounter any problems, please see the <a href=\\\"/docs/troubleshooting\\\">Troubleshooting</a> entry.\"\n}\n[/block]\n<a name=\"workflows\"></a> \n### <span id=\"clone\"> Initial Cornerstone-Based Setup </span>\n\nStart developing based on BigCommerce's default Cornerstone theme. This is a streamlined workflow, using Webpack as its JavaScript build system. Steps required:\n\n* [Install all prerequisites](/docs/prerequisites)\n* [Install Stencil CLI](/docs/installing-stencil-cli-1)\n* [Clone default Cornerstone theme](/docs/adding-a-base-theme)\n* [Install JavaScript utilities with npm](/docs/javascript-utilities)\n* [Prepare Store and Tokens](/docs/preparing-your-store-tokens)\n* Proceed to [Launching Stencil](/docs/launching-stencil)\n[block:callout]\n{\n  \"type\": \"success\",\n  \"body\": \"Use the above workflow to set up the Diamond Classic and Queen themes, as well.\",\n  \"title\": \"Simplified Marketplace Themes\"\n}\n[/block]\n### <span id=\"refresh\"> Cornerstone (or Diamond Classic/Queen) Refresh </span>\n\nDownload and install a new version of Cornerstone (or Diamond Classic, or Queen) from BigCommerce's Theme Marketplace. Steps required:\n\n* (Assume [all prerequisites installed](/docs/prerequisites) and [Stencil CLI installed](/docs/installing-stencil-cli-1))\n* [Download fresh Cornerstone, Diamond Classic, or Queen .zip](/docs/downloading-and-refreshing-cornerstone)\n* [Reinstall JavaScript utilities with npm](/docs/javascript-utilities)\n* Repeat [Launching Stencil](/docs/launching-stencil)\n<br>\n\n### <span id=\"download\"> Downloaded Marketplace Theme </span>\n\nCustomize a theme (_other than_ Cornerstone, Diamond Classic, or Queen) downloaded from BigCommerce's Theme Marketplace. This workflow requires BitBucket, and some earlier theme versions require additional steps for the jspm JavaScript build system. Steps required:\n\n* [Install all prerequisites](/docs/prerequisites)\n* [Install Stencil CLI](/docs/installing-stencil-cli-1)\n* [Set up BitBucket, download .zip, and install JavaScript dependencies](/docs/downloading-and-customizing-marketplace-themes)\n* [Install JavaScript utilities with npm](/docs/javascript-utilities)\n* [Prepare Store and Tokens](/docs/preparing-your-store-tokens)\n* Proceed to [Launching Stencil](/docs/launching-stencil)\n<br>\n\n### <span id=\"custbuild\"> Custom JavaScript Build System </span>\n\nBypass Webpack (and jspm) by substituting a custom JavaScript build system. Steps recommended:\n\n* [Install all prerequisites](/docs/prerequisites)\n* [Install Stencil CLI](/docs/installing-stencil-cli-1)\n* [Clone default Cornerstone theme](/docs/adding-a-base-theme)\n* [Install JavaScript utilities with npm](/docs/javascript-utilities)\n* [Configure your custom build system](/docs/webpack-and-build-options)\n* [Prepare Store and Tokens](/docs/preparing-your-store-tokens)\n* Proceed to [Launching Stencil](/docs/launching-stencil)\n<br>\n\n### <span id=\"blueupdate\"> Blueprint Store Launched before 1/26/2016 </span>\n\nEnable Stencil development on a BigCommerce production store that was launched with a Blueprint theme before Jan. 26, 2016. Steps required:\n\n  * Follow the installation path above that corresponds to your development scenario.\n  * As a separate (and simple) procedure, [enable&#160;Stencil](/docs/blueprint-to-stencil) in the store's control panel.\n[block:html]\n{\n  \"html\": \"<!--\\n<h2> <a name=\\\"workflows\\\"></a> Installing for Your Development Scenario </h2>\\n\\n* [Initial Cornerstone-Based Setup](#clone)\\n* [Cornerstone Refresh](#refresh)\\n* [Downloaded Marketplace Theme](#download)\\n* [Custom Build System](#custbuild)\\n<br>\\n\\nBelow, each column identifies one theme-development scenario – running from simplest on the left to most-complex on the right – with the minimum installation steps you will need to support that scenario:\\n\\n| Installation Step for: | Initial Cornerstone-Based Setup | Cornerstone Refresh | Downloaded Marketplace&#160;Themes | Custom<br> Build System |\\n|---|---|---|---|---|\\n|   |   |   |   |   |\\n|  | (Start developing based on BigCommerce's default Cornerstone theme – uses&#160;Webpack) | (Download a Cornerstone refresh from BigCommerce's Theme Marketplace) | (Customize a theme downloaded from BigCommerce's Theme Marketplace – requires jspm) | (Bypass Webpack and jspm by substituting a custom build system) |\\n| **Prerequisites:** | [Install all prerequisites](/docs/prerequisites) | ([Assume all prerequisites installed](/docs/prerequisites)) | [Install all prerequisites](/docs/prerequisites) | [Install all prerequisites](/docs/prerequisites) |\\n| **Framework:** | [Install Stencil CLI](/docs/installing-stencil-cli-1) | ([Assume Stencil CLI installed](/docs/installing-stencil-cli-1)) | [Install Stencil CLI](/docs/installing-stencil-cli-1) | [Install Stencil CLI](/docs/installing-stencil-cli-1) | \\n| **Theme:** | [Add default Cornerstone theme](/docs/adding-a-base-theme) | [Download fresh Cornerstone .zip](/docs/downloading-and-refreshing-cornerstone) | [Set up jspm and BitBucket, then download .zip](/docs/downloading-and-customizing-marketplace-themes) | [Add default Cornerstone theme](/docs/adding-a-base-theme) |\\n| **Refresh JavaScript Dependencies:** | – | [Run npm install](/docs/downloading-and-refreshing-cornerstone#install_npm) | [Run jspm install](/docs/downloading-and-customizing-marketplace-themes#install_jspm) | – | \\n| **JavaScript Utilities:** | [Install JavaScript Utilities](/docs/javascript-utilities) |  – | [Install JavaScript Utilities](/docs/javascript-utilities) | [Install JavaScript Utilities](/docs/javascript-utilities) | \\n| **Installation Wrap-Up:** | Proceed to [Launching&#160;Stencil](/docs/launching-stencil) |  Repeat [Launching&#160;Stencil](/docs/launching-stencil) | Proceed to [Launching&#160;Stencil](/docs/launching-stencil) | [Configure your custom build system](/docs/webpack-and-build-options). <br> Then proceed to [Launching&#160;Stencil](/docs/launching-stencil). |\\n\\n<h2> <a name=\\\"wrap\\\"></a> Looking Ahead </h2>\\n\\nOnce you've installed your Stencil theme, this section's remaining entries cover <a href=\\\"/docs/launching-stencil\\\">Launching Stencil</a>.\\n\\n-->\"\n}\n[/block]","excerpt":"","slug":"navigating-setup","type":"basic","title":"Navigating Your Setup Scenario"}

Navigating Your Setup Scenario


[block:html] { "html": "<!-- (Outs from orange \"Notes\" callout:) \n* Some scenarios will link you to the <a href=\"/docs/download-and-build-scenarios\">Downloading/Customizing Themes</a> subsection. \n\n* On UNIX-based platforms (Mac OS X and Linux), an initial [Cornerstone-based setup](#clone) will typically take about 10–20 minutes, depending on your network connection and hardware. On Windows, you might need to allow substantial extra time to [install Visual Studio](/docs/prerequisites-windows#vs_win).\n -->" } [/block] Below, each heading identifies one theme-development scenario, and lists the minimum installation steps you will need to support that scenario:<br> * [Initial Cornerstone-Based Setup](#clone) * [Cornerstone (or Diamond Classic/Queen) Refresh](#refresh) * [Downloaded Marketplace Theme](#download) * [Custom Build System](#custbuild) * [Blueprint Store Launched before 1/26/2016](#blueupdate) [block:callout] { "type": "warning", "title": "Notes", "body": "* Some steps are optional for some theme-development workflows. See <a href=\"#workflows\">below</a> to identify the recommended installation pathway for your own scenario.\n\n* After successful framework installation (or reinstallation), all scenarios will link you to the <a href=\"/docs/preparing-your-store-tokens\">Preparing&#160;Your Store/Tokens</a> and <a href=\"/docs/launching-stencil\">Launching&#160;Stencil</a> subsections, to launch your theme locally against a BigCommerce storefront.\n\n* Our installation instructions have been tested on Mac OS X Yosemite, Linux/Ubuntu v.14.04.4, and Windows&#160;8. Dependencies for other platforms/releases will be added upon further testing.\n\n* If you encounter any problems, please see the <a href=\"/docs/troubleshooting\">Troubleshooting</a> entry." } [/block] <a name="workflows"></a> ### <span id="clone"> Initial Cornerstone-Based Setup </span> Start developing based on BigCommerce's default Cornerstone theme. This is a streamlined workflow, using Webpack as its JavaScript build system. Steps required: * [Install all prerequisites](/docs/prerequisites) * [Install Stencil CLI](/docs/installing-stencil-cli-1) * [Clone default Cornerstone theme](/docs/adding-a-base-theme) * [Install JavaScript utilities with npm](/docs/javascript-utilities) * [Prepare Store and Tokens](/docs/preparing-your-store-tokens) * Proceed to [Launching Stencil](/docs/launching-stencil) [block:callout] { "type": "success", "body": "Use the above workflow to set up the Diamond Classic and Queen themes, as well.", "title": "Simplified Marketplace Themes" } [/block] ### <span id="refresh"> Cornerstone (or Diamond Classic/Queen) Refresh </span> Download and install a new version of Cornerstone (or Diamond Classic, or Queen) from BigCommerce's Theme Marketplace. Steps required: * (Assume [all prerequisites installed](/docs/prerequisites) and [Stencil CLI installed](/docs/installing-stencil-cli-1)) * [Download fresh Cornerstone, Diamond Classic, or Queen .zip](/docs/downloading-and-refreshing-cornerstone) * [Reinstall JavaScript utilities with npm](/docs/javascript-utilities) * Repeat [Launching Stencil](/docs/launching-stencil) <br> ### <span id="download"> Downloaded Marketplace Theme </span> Customize a theme (_other than_ Cornerstone, Diamond Classic, or Queen) downloaded from BigCommerce's Theme Marketplace. This workflow requires BitBucket, and some earlier theme versions require additional steps for the jspm JavaScript build system. Steps required: * [Install all prerequisites](/docs/prerequisites) * [Install Stencil CLI](/docs/installing-stencil-cli-1) * [Set up BitBucket, download .zip, and install JavaScript dependencies](/docs/downloading-and-customizing-marketplace-themes) * [Install JavaScript utilities with npm](/docs/javascript-utilities) * [Prepare Store and Tokens](/docs/preparing-your-store-tokens) * Proceed to [Launching Stencil](/docs/launching-stencil) <br> ### <span id="custbuild"> Custom JavaScript Build System </span> Bypass Webpack (and jspm) by substituting a custom JavaScript build system. Steps recommended: * [Install all prerequisites](/docs/prerequisites) * [Install Stencil CLI](/docs/installing-stencil-cli-1) * [Clone default Cornerstone theme](/docs/adding-a-base-theme) * [Install JavaScript utilities with npm](/docs/javascript-utilities) * [Configure your custom build system](/docs/webpack-and-build-options) * [Prepare Store and Tokens](/docs/preparing-your-store-tokens) * Proceed to [Launching Stencil](/docs/launching-stencil) <br> ### <span id="blueupdate"> Blueprint Store Launched before 1/26/2016 </span> Enable Stencil development on a BigCommerce production store that was launched with a Blueprint theme before Jan. 26, 2016. Steps required: * Follow the installation path above that corresponds to your development scenario. * As a separate (and simple) procedure, [enable&#160;Stencil](/docs/blueprint-to-stencil) in the store's control panel. [block:html] { "html": "<!--\n<h2> <a name=\"workflows\"></a> Installing for Your Development Scenario </h2>\n\n* [Initial Cornerstone-Based Setup](#clone)\n* [Cornerstone Refresh](#refresh)\n* [Downloaded Marketplace Theme](#download)\n* [Custom Build System](#custbuild)\n<br>\n\nBelow, each column identifies one theme-development scenario – running from simplest on the left to most-complex on the right – with the minimum installation steps you will need to support that scenario:\n\n| Installation Step for: | Initial Cornerstone-Based Setup | Cornerstone Refresh | Downloaded Marketplace&#160;Themes | Custom<br> Build System |\n|---|---|---|---|---|\n| | | | | |\n| | (Start developing based on BigCommerce's default Cornerstone theme – uses&#160;Webpack) | (Download a Cornerstone refresh from BigCommerce's Theme Marketplace) | (Customize a theme downloaded from BigCommerce's Theme Marketplace – requires jspm) | (Bypass Webpack and jspm by substituting a custom build system) |\n| **Prerequisites:** | [Install all prerequisites](/docs/prerequisites) | ([Assume all prerequisites installed](/docs/prerequisites)) | [Install all prerequisites](/docs/prerequisites) | [Install all prerequisites](/docs/prerequisites) |\n| **Framework:** | [Install Stencil CLI](/docs/installing-stencil-cli-1) | ([Assume Stencil CLI installed](/docs/installing-stencil-cli-1)) | [Install Stencil CLI](/docs/installing-stencil-cli-1) | [Install Stencil CLI](/docs/installing-stencil-cli-1) | \n| **Theme:** | [Add default Cornerstone theme](/docs/adding-a-base-theme) | [Download fresh Cornerstone .zip](/docs/downloading-and-refreshing-cornerstone) | [Set up jspm and BitBucket, then download .zip](/docs/downloading-and-customizing-marketplace-themes) | [Add default Cornerstone theme](/docs/adding-a-base-theme) |\n| **Refresh JavaScript Dependencies:** | – | [Run npm install](/docs/downloading-and-refreshing-cornerstone#install_npm) | [Run jspm install](/docs/downloading-and-customizing-marketplace-themes#install_jspm) | – | \n| **JavaScript Utilities:** | [Install JavaScript Utilities](/docs/javascript-utilities) | – | [Install JavaScript Utilities](/docs/javascript-utilities) | [Install JavaScript Utilities](/docs/javascript-utilities) | \n| **Installation Wrap-Up:** | Proceed to [Launching&#160;Stencil](/docs/launching-stencil) | Repeat [Launching&#160;Stencil](/docs/launching-stencil) | Proceed to [Launching&#160;Stencil](/docs/launching-stencil) | [Configure your custom build system](/docs/webpack-and-build-options). <br> Then proceed to [Launching&#160;Stencil](/docs/launching-stencil). |\n\n<h2> <a name=\"wrap\"></a> Looking Ahead </h2>\n\nOnce you've installed your Stencil theme, this section's remaining entries cover <a href=\"/docs/launching-stencil\">Launching Stencil</a>.\n\n-->" } [/block]