{"_id":"576a1f98dd4f320e0060b7dd","parentDoc":null,"__v":87,"category":{"_id":"566a35b81e08750d00a0c49b","__v":2,"version":"55a6e72f8cc73e0d00096638","pages":["566b4ba6f46dc90d009de81f","568aea8fcbd4ca0d00aebfa9"],"project":"55a6e72e8cc73e0d00096635","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-12-11T02:32:24.723Z","from_sync":false,"order":5,"slug":"theme-editor-configuration-reference","title":"Theme/Editor Configuration"},"project":"55a6e72e8cc73e0d00096635","user":"55a6caa022cfa321008e01d6","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"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-06-22T05:18:16.436Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":4,"body":"[block:html]\n{\n  \"html\": \"<a name=\\\"thumbnails\\\"></a> This entry explains how to prepare thumbnail screenshots that will represent your theme to current and potential users. It covers:\\n\\n<ul>\\n\\t<li> <a href=\\\"#thumb-loc\\\">Where Users See Your Screenshots</a> </li>\\n\\t<li> <a href=\\\"#thumbs-gen\\\">General Image Requirements</a> </li>\\n\\t<li> <a href=\\\"#theme-composite\\\">Themewide Composite Image</a> </li>\\n\\t<li> <a href=\\\"#variation-thumbs\\\">Variations: Desktop/Mobile Screenshots</a> </li>\\n</ul>\\n\\n<h2> <a name=\\\"thumb-loc\\\"></a> Where Users See Your Screenshots </h2>\\n\\nA complete Stencil theme includes screenshots to show off the theme, on tiles/cards that appear in two locations within the BigCommerce control panel:\\n\\n<ul>\\n\\t<li> <span class=\\\"inline-code\\\">Storefront Design</span> &gt; <span class=\\\"inline-code\\\">My Themes</span>: Themewide composite image, combining screenshots of <NOBR>multiple variations.</nobr> (Example at left below.)</li>\\n\\n\\t<li> <span class=\\\"inline-code\\\">Storefront Design</span> &gt; <span class=\\\"inline-code\\\">Themes Marketplace</span>: One desktop-viewport screenshot, and one mobile-viewport screenshot, of each variation that you want to display in the Marketplace. (Examples at right below.)</li>\\n</ul><br>\\n\\n<!-- Begin 2-up screenshots of screenshots: -->\\n<table>\\n  <tr>\\n    <td class=\\\"\\\">Themewide composite image</td>\\n    <td class=\\\"\\\">One variation's desktop and mobile screenshots</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\"> <img src=\\\"https://files.readme.io/08dbLKItRHWVbhHl2CeT_composed:::at:::My-Themes~309x414.png\\\" alt=\\\"composed_image for Cornerstone theme\\\" height=\\\"414\\\" width=\\\"309\\\"> <!-- =Native size -->\\n    </td>\\n\\n    <td class=\\\"\\\"> <img src=\\\"https://files.readme.io/BjbOetRSTTKdyAazsb1L_desktop+mobile@TM-1099x699.png\\\" alt=\\\"Desktop and mobile screenshots for Cornerstone Bold variation\\\" height=\\\"280\\\" width=\\\"440\\\"> <!-- =40% of 700x1100 -->\\n    </td>\\n  </tr>\\n</table>\\n<!-- :End 2-up screenshots of screenshots: -->\\n\\nBelow are details (extracted from this section's <a href=\\\"/docs/configjson-reference\\\">config.json reference</a>) about how to size and save these images, to stage them within your theme's directory structure, and to reference them in your <span class=\\\"inline-code\\\">config.json</span> file.\\n\\n<h2> <a href=\\\"#thumbs-gen\\\"></a> General Image Requirements </h2>\\n\\nAll screenshots described below must meet the following specifications, in order for the <NOBR><a href=\\\"/docs/bundling-submitting#ship-zip-small\\\"><span class=\\\"inline-code\\\">stencil bundle</span></a></nobr> command to be able to process them:\\n\\n<ul>\\n  <li>Saved to a <a href=\\\"/docs/uploading-a-custom-theme#warnings\\\">supported image file type</a>: .jpg/.jpeg, .png, or .gif.</li> \\n  <li>Stored in your <span class=\\\"inline-code\\\">&lt;theme‑name&gt;/meta/</span> subdirectory.</li>\\n</ul>\\n\\nAlso note that all of these screenshots must be in portrait aspect ratio, with specific resolutions listed below.\\n\\n<h2> <a name=\\\"theme-composite\\\"></a> Themewide Composite Image </h2>\\n\\nThis composite image represents your theme in the control panel &gt; <NOBR><span class=\\\"inline-code\\\">Storefront Design</span></nobr> &gt; <NOBR><span class=\\\"inline-code\\\">My Themes</span></nobr> area, which shows merchants their currently available themes (including any custom uploaded themes). <br><p></p>\\n\\nThis file will normally be a mosaic of screenshots from multiple variations within your theme. It must meet the following requirements, beyond the <a href=\\\"#thumbs-gen\\\">general specifications</a> above:\\n\\n<ul>\\n  <li>Resolution of 600 x 760 pixels (horizontal x vertical).</li> \\n  <li>File size smaller than 2 MB.</li> \\n  <li>Arbitrary filename prefix, referenced in your <a href=\\\"/docs/configjson-reference#config-theme-meta\\\"><span class=\\\"inline-code\\\">config.json</span></a> file as the <br> <span class=\\\"inline-code\\\">meta</span> &gt; <span class=\\\"inline-code\\\">composed_image</span> key's value.</li>\\n</ul>\\n\\nHere is an example of a compliant file type and location:<br><p></p>\\n\\n<pre>\\n&lt;theme‑name&gt;/meta/composed.png\\n</pre><p></p>\\n\\nHere is how you would reference this file within <span class=\\\"inline-code\\\">config.json</span>:<br><p></p>\\n\\n<pre>\\n{\\n  [...]\\n  \\\"meta\\\": {\\n    [...]\\n    \\\"composed_image\\\": \\\"composed.png\\\",\\t\\n    [...]\\n}\\n</pre>\\n\\n\\n<h2> <a name=\\\"variation-thumbs\\\"></a> Variations: Desktop/Mobile Screenshots </h2>\\n\\nEach variation within your theme must be represented by two additional screenshots &ndash; if you want that variation to appear in the control panel &gt; <NOBR><span class=\\\"inline-code\\\">Storefront Design</span></nobr> &gt; <NOBR><span class=\\\"inline-code\\\">Themes Marketplace</span></nobr> area, which shows merchants themes available for them to download.<br><p></p> \\n\\n<h3> Desktop Screenshot </h3>\\n\\nThe first screenshot, showing your theme on a desktop viewport, must meet the following requirements beyond the <a href=\\\"#thumbs-gen\\\">general specifications</a> above:\\n<br><p></p>\\n\\n<ul>\\n  <li>Resolution of 2048 x 2600 pixels (horizontal x vertical).</li> \\n  <li>File size smaller than 5 MB.</li> \\n  <li>Arbitrary filename prefix, referenced in your <a href=\\\"docs/configjson-reference#config-var-meta\\\"><span class=\\\"inline-code\\\">config.json</span></a> file as the <br> <span class=\\\"inline-code\\\">&lt;variation-name&gt</span> &gt; <span class=\\\"inline-code\\\">meta</span> &gt; <span class=\\\"inline-code\\\">desktop_screenshot</span> key's value.</li>\\n</ul>\\n\\n<h3> Mobile Screenshot </h3>\\n\\nThe second screenshot, showing your theme on a mobile viewport, must meet the following requirements beyond the <a href=\\\"#thumbs-gen\\\">general specifications</a> above:\\n<br><p></p>\\n\\n<ul>\\n  <li>Resolution of 304 x 540 pixels (horizontal x vertical).</li> \\n  <li>File size smaller than 1 MB.</li> \\n  <li>Arbitrary filename prefix, referenced in your <a href=\\\"docs/configjson-reference#config-var-meta\\\"><span class=\\\"inline-code\\\">config.json</span></a> file as the <br> <span class=\\\"inline-code\\\">&lt;variation-name&gt</span> &gt; <span class=\\\"inline-code\\\">meta</span> &gt; <span class=\\\"inline-code\\\">mobile_screenshot</span> key's value.</li>\\n</ul>\\n\\n\\nHere is an example showing two files of compliant types and location:<br><p></p>\\n\\n<pre>\\n&lt;theme‑name&gt;/meta/\\n                  desktop_bright.png\\n                  mobile_bright.jpg\\t\\t\\n</pre><p></p>\\n\\nHere is how you would reference these files within <span class=\\\"inline-code\\\">config.json</span>, for a variation (arbitrarily) named <span class=\\\"inline-code\\\">Bright</span>:<br><p></p>\\n\\n<pre>\\n  [...]\\n  \\\"variations\\\": [\\n    {\\n      \\\"name\\\": \\\"Bright\\\",\\n      \\\"id\\\": \\\"bright\\\",\\n      \\\"meta\\\": {\\n        \\\"desktop_screenshot\\\": \\\"desktop_bright.png\\\",\\n        \\\"mobile_screenshot\\\": \\\"mobile_bright.jpg\\\",\\n    [...]\\n    }\\n  ]\\n</pre>\"\n}\n[/block]","excerpt":"","slug":"preparing-thumbnail-images","type":"basic","title":"Preparing Thumbnail Images"}

Preparing Thumbnail Images


[block:html] { "html": "<a name=\"thumbnails\"></a> This entry explains how to prepare thumbnail screenshots that will represent your theme to current and potential users. It covers:\n\n<ul>\n\t<li> <a href=\"#thumb-loc\">Where Users See Your Screenshots</a> </li>\n\t<li> <a href=\"#thumbs-gen\">General Image Requirements</a> </li>\n\t<li> <a href=\"#theme-composite\">Themewide Composite Image</a> </li>\n\t<li> <a href=\"#variation-thumbs\">Variations: Desktop/Mobile Screenshots</a> </li>\n</ul>\n\n<h2> <a name=\"thumb-loc\"></a> Where Users See Your Screenshots </h2>\n\nA complete Stencil theme includes screenshots to show off the theme, on tiles/cards that appear in two locations within the BigCommerce control panel:\n\n<ul>\n\t<li> <span class=\"inline-code\">Storefront Design</span> &gt; <span class=\"inline-code\">My Themes</span>: Themewide composite image, combining screenshots of <NOBR>multiple variations.</nobr> (Example at left below.)</li>\n\n\t<li> <span class=\"inline-code\">Storefront Design</span> &gt; <span class=\"inline-code\">Themes Marketplace</span>: One desktop-viewport screenshot, and one mobile-viewport screenshot, of each variation that you want to display in the Marketplace. (Examples at right below.)</li>\n</ul><br>\n\n<!-- Begin 2-up screenshots of screenshots: -->\n<table>\n <tr>\n <td class=\"\">Themewide composite image</td>\n <td class=\"\">One variation's desktop and mobile screenshots</td>\n </tr>\n <tr>\n <td class=\"\"> <img src=\"https://files.readme.io/08dbLKItRHWVbhHl2CeT_composed@My-Themes~309x414.png\" alt=\"composed_image for Cornerstone theme\" height=\"414\" width=\"309\"> <!-- =Native size -->\n </td>\n\n <td class=\"\"> <img src=\"https://files.readme.io/BjbOetRSTTKdyAazsb1L_desktop+mobile@TM-1099x699.png\" alt=\"Desktop and mobile screenshots for Cornerstone Bold variation\" height=\"280\" width=\"440\"> <!-- =40% of 700x1100 -->\n </td>\n </tr>\n</table>\n<!-- :End 2-up screenshots of screenshots: -->\n\nBelow are details (extracted from this section's <a href=\"/docs/configjson-reference\">config.json reference</a>) about how to size and save these images, to stage them within your theme's directory structure, and to reference them in your <span class=\"inline-code\">config.json</span> file.\n\n<h2> <a href=\"#thumbs-gen\"></a> General Image Requirements </h2>\n\nAll screenshots described below must meet the following specifications, in order for the <NOBR><a href=\"/docs/bundling-submitting#ship-zip-small\"><span class=\"inline-code\">stencil bundle</span></a></nobr> command to be able to process them:\n\n<ul>\n <li>Saved to a <a href=\"/docs/uploading-a-custom-theme#warnings\">supported image file type</a>: .jpg/.jpeg, .png, or .gif.</li> \n <li>Stored in your <span class=\"inline-code\">&lt;theme‑name&gt;/meta/</span> subdirectory.</li>\n</ul>\n\nAlso note that all of these screenshots must be in portrait aspect ratio, with specific resolutions listed below.\n\n<h2> <a name=\"theme-composite\"></a> Themewide Composite Image </h2>\n\nThis composite image represents your theme in the control panel &gt; <NOBR><span class=\"inline-code\">Storefront Design</span></nobr> &gt; <NOBR><span class=\"inline-code\">My Themes</span></nobr> area, which shows merchants their currently available themes (including any custom uploaded themes). <br><p></p>\n\nThis file will normally be a mosaic of screenshots from multiple variations within your theme. It must meet the following requirements, beyond the <a href=\"#thumbs-gen\">general specifications</a> above:\n\n<ul>\n <li>Resolution of 600 x 760 pixels (horizontal x vertical).</li> \n <li>File size smaller than 2 MB.</li> \n <li>Arbitrary filename prefix, referenced in your <a href=\"/docs/configjson-reference#config-theme-meta\"><span class=\"inline-code\">config.json</span></a> file as the <br> <span class=\"inline-code\">meta</span> &gt; <span class=\"inline-code\">composed_image</span> key's value.</li>\n</ul>\n\nHere is an example of a compliant file type and location:<br><p></p>\n\n<pre>\n&lt;theme‑name&gt;/meta/composed.png\n</pre><p></p>\n\nHere is how you would reference this file within <span class=\"inline-code\">config.json</span>:<br><p></p>\n\n<pre>\n{\n [...]\n \"meta\": {\n [...]\n \"composed_image\": \"composed.png\",\t\n [...]\n}\n</pre>\n\n\n<h2> <a name=\"variation-thumbs\"></a> Variations: Desktop/Mobile Screenshots </h2>\n\nEach variation within your theme must be represented by two additional screenshots &ndash; if you want that variation to appear in the control panel &gt; <NOBR><span class=\"inline-code\">Storefront Design</span></nobr> &gt; <NOBR><span class=\"inline-code\">Themes Marketplace</span></nobr> area, which shows merchants themes available for them to download.<br><p></p> \n\n<h3> Desktop Screenshot </h3>\n\nThe first screenshot, showing your theme on a desktop viewport, must meet the following requirements beyond the <a href=\"#thumbs-gen\">general specifications</a> above:\n<br><p></p>\n\n<ul>\n <li>Resolution of 2048 x 2600 pixels (horizontal x vertical).</li> \n <li>File size smaller than 5 MB.</li> \n <li>Arbitrary filename prefix, referenced in your <a href=\"docs/configjson-reference#config-var-meta\"><span class=\"inline-code\">config.json</span></a> file as the <br> <span class=\"inline-code\">&lt;variation-name&gt</span> &gt; <span class=\"inline-code\">meta</span> &gt; <span class=\"inline-code\">desktop_screenshot</span> key's value.</li>\n</ul>\n\n<h3> Mobile Screenshot </h3>\n\nThe second screenshot, showing your theme on a mobile viewport, must meet the following requirements beyond the <a href=\"#thumbs-gen\">general specifications</a> above:\n<br><p></p>\n\n<ul>\n <li>Resolution of 304 x 540 pixels (horizontal x vertical).</li> \n <li>File size smaller than 1 MB.</li> \n <li>Arbitrary filename prefix, referenced in your <a href=\"docs/configjson-reference#config-var-meta\"><span class=\"inline-code\">config.json</span></a> file as the <br> <span class=\"inline-code\">&lt;variation-name&gt</span> &gt; <span class=\"inline-code\">meta</span> &gt; <span class=\"inline-code\">mobile_screenshot</span> key's value.</li>\n</ul>\n\n\nHere is an example showing two files of compliant types and location:<br><p></p>\n\n<pre>\n&lt;theme‑name&gt;/meta/\n desktop_bright.png\n mobile_bright.jpg\t\t\n</pre><p></p>\n\nHere is how you would reference these files within <span class=\"inline-code\">config.json</span>, for a variation (arbitrarily) named <span class=\"inline-code\">Bright</span>:<br><p></p>\n\n<pre>\n [...]\n \"variations\": [\n {\n \"name\": \"Bright\",\n \"id\": \"bright\",\n \"meta\": {\n \"desktop_screenshot\": \"desktop_bright.png\",\n \"mobile_screenshot\": \"mobile_bright.jpg\",\n [...]\n }\n ]\n</pre>" } [/block]