{"_id":"58421437c719943700b6861e","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"},"parentDoc":null,"project":"55a6e72e8cc73e0d00096635","category":{"_id":"566a3e8503b4b20d00d02a4a","__v":2,"version":"55a6e72f8cc73e0d00096638","pages":["5678aacb07bf6a0d0083eded","56a55f47b26c040d00d99281"],"project":"55a6e72e8cc73e0d00096635","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-12-11T03:09:57.119Z","from_sync":false,"order":7,"slug":"shipping-a-theme","title":"Shipping a Theme"},"user":"55a6caa022cfa321008e01d6","__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-12-03T00:39:19.690Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"This procedure restructures a large theme, allowing you to bundle (or re-bundle) and submit a smaller .zip file. Ideally, you can use these steps for advance planning of a theme that includes large static assets. But you can also use them to reorganize an in-process theme that has reached BigCommerce's 50 MB limit. \n\nThis page covers:\n* [Restructuring Your Theme](#restructure)\n* [WebDAV Folders and Stencil Themes](#webdav-folders)\n\n(Unlike the <a href=\"/docs/cdn-dir\">CDN Delivery</a> alternative, this WebDAV approach does not require the expense of subscribing to a content delivery network.)\n[block:html]\n{\n  \"html\": \"<h2> <a name=\\\"restructure\\\"></a> Restructuring Your Theme </h2> \\n\\nHere, you will isolate static assets from your theme's local directory, then use <a href=\\\"http://www.webdav.org/\\\">WebDAV</a> <!-- <a href=\\\"https://support.bigcommerce.com/articles/Public/Connecting-to-WebDav/\\\">WebDAV</a> --> to cloud-host those assets, then finally reference those assets using Stencil's <span class=\\\"inline-code\\\">cdn</span> Handlebars helper:\\n\\n<ol>\\n  <li>For an existing theme, make a backup of your whole <span class=\\\"inline-code\\\">&lt;theme‑name&gt;</span> directory before proceeding.</li><br>\\n\\n<li>Examine your theme's <span class=\\\"inline-code\\\">/assets/</span> subdirectory and/or its intended contents. Check for large static assets like images (especially in <span class=\\\"inline-code\\\">/assets/img/</span>) and videos that are likely culprits in expanding a bundled .zip file toward or beyond  BigCommerce's 50 MB limit.</li><br> \\n  \\n<li> <!-- Outer, #'d list -->\\n  Use WebDAV to upload these items to WebDAV's remote <span class=\\\"inline-code\\\">/content/</span> directory. For WebDAV specifics, please see BigCommerce's Knowledge Base articles on:<br>\\n\\n  <ul> <!-- Inner, bullet list -->\\n    <li> <!-- Inner, bullet list -->\\n    \\t<a href=\\\"https://support.bigcommerce.com/articles/Public/Connecting-to-WebDav/\\\">Connecting to WebDav</a>\\n    </li> <!-- Inner, bullet list -->\\n    <li> <!-- Inner, bullet list -->\\n      <a href=\\\"https://support.bigcommerce.com/articles/Public/WebDAV-Folder-Structure/\\\">WebDAV Folder Structure</a><br>\\n  </ul> <!-- Inner, bullet list -->\\n</li> <!-- Outer, #'d list --> <br>\\n\\n<li>Throughout your theme, reference each of these assets using Stencil's <span class=\\\"inline-code\\\"><a href=\\\"/docs/handlebars-helpers-reference#cdn\\\">cdn</a></span> custom Handlebars helper &ndash; prepending the <span class=\\\"inline-code\\\">webdav:</span> option to the <span class=\\\"inline-code\\\">assetPath</span> parameter.<br><p></p>\\n\\nPrepending <span class=\\\"inline-code\\\">webdav:</span> will build a URL in the remote WebDAV directory. This allows your theme's deployed topology to diverge from any your local directory structure. As noted above, the <span class=\\\"inline-code\\\">cdn</span> helper will treat <span class=\\\"inline-code\\\">/content/</span> as the default/root WebDAV directory. So, for example, this statement:<br><p></p>\\n\\n<pre>&lt;img src=\\\"{{cdn \\\"webdav:img/image.jpg\\\"}}\\\"&gt;</pre>\\n  \\n...will build the URL transformed below:<br><p></p>\\n\\n<pre>&lt;img src=\\\"https://cdn.bcapp/3dsf74g/content/img/image.jpg\\\"&gt;</pre>\\n </li><br> \\n  \\n<li>On your local machine, move the large static assets to a location where the <span class=\\\"inline-code\\\"><a href=\\\"/docs/bundling-submitting\\\">stencil bundle</a></span> command will ignore them.<br><p></p>\\n\\nThis can be a location outside your <span class=\\\"inline-code\\\">&lt;theme-name&gt;</span> directory, or it can be the <span class=\\\"inline-code\\\">&lt;theme-name&gt;/assets/cdn/</span> subdirectory, which <span class=\\\"inline-code\\\">stencil bundle</span> excludes from bundling. (Separating these assets is necessary to exclude them from the next step.)\\n</li><br>\\n\\n<li><a href=\\\"/docs/bundling-submitting\\\">Run</a> or re-run the <span class=\\\"inline-code\\\">stencil bundle</span> command, from inside your streamlined <span class=\\\"inline-code\\\">&lt;theme‑name&gt;</span> directory.<br><p></p>\\n        \\nOnce your resulting .zip file is 50 MB or smaller, upload it to BigCommerce, as described <a href=\\\"/docs/bundling-submitting#upload\\\">here</a>.</li><br>\\n</ol>\\n\\n\\n<h2> <a name=\\\"webdav-folders\\\"></a> WebDAV Folders and Stencil Themes </h2>\\n\\nIf you have used WebDAV in developing BigCommerce's earlier (Blueprint) generation of themes, you will see some differences when uploading Stencil themes.<br><br>\\n\\nThe directories accessible through WebDAV will dynamically change, depending on the type of theme that is active in the merchant's store, as follows:<p></p>\\n\\n<table>\\n  <tr>\\n    <td class=\\\"\\\">Available while the merchant's active theme is Blueprint:</td>\\n    <td class=\\\"\\\">Available while the merchant's active\\ntheme is Stencil:</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">/content/</td>\\n    <td class=\\\"\\\">/content/</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">/product_images/</td>\\n    <td class=\\\"\\\">/product_images/</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">/product_downloads/</td>\\n    <td class=\\\"\\\">/product_downloads/</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">/import_files/</td>\\n    <td class=\\\"\\\">/import_files/</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">/exports/</td>\\n    <td class=\\\"\\\">/exports/</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">/template/</td>\\n    <td class=\\\"\\\"> </td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">/mobile_template/</td>\\n    <td class=\\\"\\\"> </td>\\n  </tr>\\n </table>\\n\\nThe overall difference is that the WebDAV <span class=\\\"inline-code\\\">/template/</span> and <span class=\\\"inline-code\\\">/mobile_template/</span> directories are not available for Stencil themes. These templates must reside within your Stencil theme's local directory.\"\n}\n[/block]","excerpt":"","slug":"webdav-static-assets","type":"basic","title":"Shrinking Your Theme by Excluding Static Assets (WebDAV)"}

Shrinking Your Theme by Excluding Static Assets (WebDAV)


This procedure restructures a large theme, allowing you to bundle (or re-bundle) and submit a smaller .zip file. Ideally, you can use these steps for advance planning of a theme that includes large static assets. But you can also use them to reorganize an in-process theme that has reached BigCommerce's 50 MB limit. This page covers: * [Restructuring Your Theme](#restructure) * [WebDAV Folders and Stencil Themes](#webdav-folders) (Unlike the <a href="/docs/cdn-dir">CDN Delivery</a> alternative, this WebDAV approach does not require the expense of subscribing to a content delivery network.) [block:html] { "html": "<h2> <a name=\"restructure\"></a> Restructuring Your Theme </h2> \n\nHere, you will isolate static assets from your theme's local directory, then use <a href=\"http://www.webdav.org/\">WebDAV</a> <!-- <a href=\"https://support.bigcommerce.com/articles/Public/Connecting-to-WebDav/\">WebDAV</a> --> to cloud-host those assets, then finally reference those assets using Stencil's <span class=\"inline-code\">cdn</span> Handlebars helper:\n\n<ol>\n <li>For an existing theme, make a backup of your whole <span class=\"inline-code\">&lt;theme‑name&gt;</span> directory before proceeding.</li><br>\n\n<li>Examine your theme's <span class=\"inline-code\">/assets/</span> subdirectory and/or its intended contents. Check for large static assets like images (especially in <span class=\"inline-code\">/assets/img/</span>) and videos that are likely culprits in expanding a bundled .zip file toward or beyond BigCommerce's 50 MB limit.</li><br> \n \n<li> <!-- Outer, #'d list -->\n Use WebDAV to upload these items to WebDAV's remote <span class=\"inline-code\">/content/</span> directory. For WebDAV specifics, please see BigCommerce's Knowledge Base articles on:<br>\n\n <ul> <!-- Inner, bullet list -->\n <li> <!-- Inner, bullet list -->\n \t<a href=\"https://support.bigcommerce.com/articles/Public/Connecting-to-WebDav/\">Connecting to WebDav</a>\n </li> <!-- Inner, bullet list -->\n <li> <!-- Inner, bullet list -->\n <a href=\"https://support.bigcommerce.com/articles/Public/WebDAV-Folder-Structure/\">WebDAV Folder Structure</a><br>\n </ul> <!-- Inner, bullet list -->\n</li> <!-- Outer, #'d list --> <br>\n\n<li>Throughout your theme, reference each of these assets using Stencil's <span class=\"inline-code\"><a href=\"/docs/handlebars-helpers-reference#cdn\">cdn</a></span> custom Handlebars helper &ndash; prepending the <span class=\"inline-code\">webdav:</span> option to the <span class=\"inline-code\">assetPath</span> parameter.<br><p></p>\n\nPrepending <span class=\"inline-code\">webdav:</span> will build a URL in the remote WebDAV directory. This allows your theme's deployed topology to diverge from any your local directory structure. As noted above, the <span class=\"inline-code\">cdn</span> helper will treat <span class=\"inline-code\">/content/</span> as the default/root WebDAV directory. So, for example, this statement:<br><p></p>\n\n<pre>&lt;img src=\"{{cdn \"webdav:img/image.jpg\"}}\"&gt;</pre>\n \n...will build the URL transformed below:<br><p></p>\n\n<pre>&lt;img src=\"https://cdn.bcapp/3dsf74g/content/img/image.jpg\"&gt;</pre>\n </li><br> \n \n<li>On your local machine, move the large static assets to a location where the <span class=\"inline-code\"><a href=\"/docs/bundling-submitting\">stencil bundle</a></span> command will ignore them.<br><p></p>\n\nThis can be a location outside your <span class=\"inline-code\">&lt;theme-name&gt;</span> directory, or it can be the <span class=\"inline-code\">&lt;theme-name&gt;/assets/cdn/</span> subdirectory, which <span class=\"inline-code\">stencil bundle</span> excludes from bundling. (Separating these assets is necessary to exclude them from the next step.)\n</li><br>\n\n<li><a href=\"/docs/bundling-submitting\">Run</a> or re-run the <span class=\"inline-code\">stencil bundle</span> command, from inside your streamlined <span class=\"inline-code\">&lt;theme‑name&gt;</span> directory.<br><p></p>\n \nOnce your resulting .zip file is 50 MB or smaller, upload it to BigCommerce, as described <a href=\"/docs/bundling-submitting#upload\">here</a>.</li><br>\n</ol>\n\n\n<h2> <a name=\"webdav-folders\"></a> WebDAV Folders and Stencil Themes </h2>\n\nIf you have used WebDAV in developing BigCommerce's earlier (Blueprint) generation of themes, you will see some differences when uploading Stencil themes.<br><br>\n\nThe directories accessible through WebDAV will dynamically change, depending on the type of theme that is active in the merchant's store, as follows:<p></p>\n\n<table>\n <tr>\n <td class=\"\">Available while the merchant's active theme is Blueprint:</td>\n <td class=\"\">Available while the merchant's active\ntheme is Stencil:</td>\n </tr>\n <tr>\n <td class=\"\">/content/</td>\n <td class=\"\">/content/</td>\n </tr>\n <tr>\n <td class=\"\">/product_images/</td>\n <td class=\"\">/product_images/</td>\n </tr>\n <tr>\n <td class=\"\">/product_downloads/</td>\n <td class=\"\">/product_downloads/</td>\n </tr>\n <tr>\n <td class=\"\">/import_files/</td>\n <td class=\"\">/import_files/</td>\n </tr>\n <tr>\n <td class=\"\">/exports/</td>\n <td class=\"\">/exports/</td>\n </tr>\n <tr>\n <td class=\"\">/template/</td>\n <td class=\"\"> </td>\n </tr>\n <tr>\n <td class=\"\">/mobile_template/</td>\n <td class=\"\"> </td>\n </tr>\n </table>\n\nThe overall difference is that the WebDAV <span class=\"inline-code\">/template/</span> and <span class=\"inline-code\">/mobile_template/</span> directories are not available for Stencil themes. These templates must reside within your Stencil theme's local directory." } [/block]