{"_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/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 and Queen themes, as well.\",\n  \"title\": \"Simplified Marketplace Themes\"\n}\n[/block]\n### <span id=\"refresh\"> Cornerstone (or Diamond/Queen) Refresh </span>\n\nDownload and install a new version of Cornerstone (or Diamond, 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, 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, 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/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 and Queen themes, as well.", "title": "Simplified Marketplace Themes" } [/block] ### <span id="refresh"> Cornerstone (or Diamond/Queen) Refresh </span> Download and install a new version of Cornerstone (or Diamond, 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, 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, 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]