{"_id":"58421437c719943700b6861e","version":{"_id":"55a6e72f8cc73e0d00096638","project":"55a6e72e8cc73e0d00096635","hasReference":false,"__v":30,"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","5b195f920059c20003083ad6"],"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,"githubsync":"","updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-12-03T00:39:19.690Z","link_external":false,"link_url":"","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 if you anticipate that your theme will include large static assets. However, you can also use these steps 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\\nIn this section, you will first 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, and finally reference those assets using Stencil's <span class=\\\"inline-code\\\">cdn</span> <a href=https://stencil.bigcommerce.com/docs/handlebars-helpers-reference#cdn>Handlebars helper</a>.\\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 causing a bundled .zip file to go 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>\\n</ol>\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"Both in production and locally, subdirectories of your theme's `assets/` directory – like `img/`, `js/`, and `fonts/` – are parallel to its `scss/` subdirectory. So within your CSS, path references to such assets should reflect this parallel relationship – for example: `../img/test.jpg`.\",\n  \"title\": \"URL References to Assets\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<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=\\\"\\\"><b>Available while the merchant's active theme is Blueprint:</b></td>\\n    <td class=\\\"\\\"><b>Available while the merchant's active\\n      theme is Stencil:</b></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\\n<i>The overall difference is that the WebDAV</i> <span class=\\\"inline-code\\\">/template/</span> and <span class=\\\"inline-code\\\">/mobile_template/</span> <i>directories are <b>not</b> available for Stencil themes. These templates must reside and remain within your Stencil theme's local directory and file structure.</i>\"\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 if you anticipate that your theme will include large static assets. However, you can also use these steps 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\nIn this section, you will first 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, and finally reference those assets using Stencil's <span class=\"inline-code\">cdn</span> <a href=https://stencil.bigcommerce.com/docs/handlebars-helpers-reference#cdn>Handlebars helper</a>.\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 causing a bundled .zip file to go 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>\n</ol>" } [/block] [block:callout] { "type": "warning", "body": "Both in production and locally, subdirectories of your theme's `assets/` directory – like `img/`, `js/`, and `fonts/` – are parallel to its `scss/` subdirectory. So within your CSS, path references to such assets should reflect this parallel relationship – for example: `../img/test.jpg`.", "title": "URL References to Assets" } [/block] [block:html] { "html": "<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=\"\"><b>Available while the merchant's active theme is Blueprint:</b></td>\n <td class=\"\"><b>Available while the merchant's active\n theme is Stencil:</b></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\n<i>The overall difference is that the WebDAV</i> <span class=\"inline-code\">/template/</span> and <span class=\"inline-code\">/mobile_template/</span> <i>directories are <b>not</b> available for Stencil themes. These templates must reside and remain within your Stencil theme's local directory and file structure.</i>" } [/block]