{"_id":"560a2e76109fc70d00008bab","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","__v":88,"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","parentDoc":null,"updates":["560e9b4b39fad419002ae1b8"],"next":{"pages":[],"description":""},"createdAt":"2015-09-29T06:23:50.750Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"This page introduces the `config.json` file's structure, by reference to examples in Stencil's default Cornerstone theme. It then lists requirements for your own theme's `config.json`. The entries below cover:\n  * [config.json Overview](#config-json-ref)\n  * [Keys and Example Values](#config-json-ex)\n  * [Requirements and Restrictions](#config-json-reqs) \n  * [Video Demo](#ConfigVideo)\n[block:html]\n{\n  \"html\": \"<h2> <a name=\\\"config-json-ref\\\"></a> config.json Overview </h2>\\n\\nYou configure the <span class=\\\"inline-code\\\">.../&lt;theme‑name&gt;/config.json</span> file to properly manage each of your custom theme's front-end aspects. This file’s functions are to:<br>\\n\\n<ul>\\n<li>Provide global context for Stencil’s CSS and Handlebars resources.</li>\\n\\n<li>Provide values for the <a href=\\\"/docs/what-is-theme-editor\\\">Theme Editor</a> GUI to manage.</li>\\n\\n<li>Provide metadata for your theme’s listing in the Theme Marketplace.</li>\\n\\n<li>Define variations included in your theme.</li>\\n</ul>\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Configuring Variations\",\n  \"body\": \"Each object within your <span class=\\\"inline-code\\\">config.json</span> file's <span class=\\\"inline-code\\\"><a href=\\\"#config-variations\\\">variations</a></span> collection defines one theme variation. So you control the number of variations in your theme by editing this file's <span class=\\\"inline-code\\\">variations</span> section. \\n\\nIf you are adapting an existing theme, and you choose to provide fewer variations than are defined in that existing theme's <span class=\\\"inline-code\\\">config.json</span> file, be sure to delete entries for any variations you are not supporting.\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"For step-by-step procedures about preparing the [themewide](#config-theme-meta) and [variation-specific](#config-var-meta) screenshots mentioned below, please see the separate [Preparing Thumbnail Images](/docs/preparing-thumbnail-images) page.\",\n  \"title\": \"Preparing Screenshots\"\n}\n[/block]\n<h2> <a name=\"config-json-ex\"></a> Keys and Example Values </h2>\n\nBelow are the properties you can configure, with notes and example values from Stencil's Cornerstone reference theme. Note that keys here might appear in a different order than in the Cornerstone file:\n[block:html]\n{\n  \"html\": \"<table>\\n  <tr>\\n    <td>Property</td>\\n    <td>Format</td>\\n    <td>Default/Examples</td>\\n    <td>Description</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">name</td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"Stencil\\\"</td>\\n    <td class=\\\"\\\">Theme’s name, as it will appear in the Theme Marketplace.<br><br>\\n\\n(<b>Note:</b> Theme names should be composed of only the following characters: a-z, A-Z, 0-9, hyphen.)</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">version</td>\\n    <td class=\\\"\\\"><a href=\\\"http://semver.org/\\\">SemVer</a></td>\\n    <td class=\\\"\\\">\\\"1.0.0\\\"</td>\\n    <td class=\\\"\\\">Theme’s version number, formatted as <span class=\\\"inline-code\\\">major.minor.patch</span>.</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\"><a name=\\\"config-theme-meta\\\"></a>meta</td>\\n    <td class=\\\"\\\">Object</td>\\n    <td class=\\\"\\\"></td>\\n    <td class=\\\"\\\">BigCommerce will use this metadata to list themes in Theme Marketplace.<br><br>\\n      \\n(Theme variations also have their <a href=\\\"#config-var-meta\\\">own metadata collections</a>.)</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">         <span class=\\\"indent1\\\">price</span></td>\\n    <td class=\\\"\\\">Number</td>\\n    <td class=\\\"\\\">15000</td>\\n    <td class=\\\"\\\">Price, in cents, to purchase this theme in Theme Marketplace.</td>\\n  </tr>\\n\\n  <tr>\\n    <td class=\\\"\\\">    <span class=\\\"indent1\\\">documentation_url</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"https://support.bigcommerce.com/articles/Public/Cornerstone-Theme-Manual\\\"</td>\\n    <td class=\\\"\\\">URL of theme developer’s documentation site.<br><br>\\n\\n(<b>Note: For a successful theme upload to BigCommerce, this key is required to have a value.</b>)</td>\\n  </tr>\\n  \\n  <tr>\\n    <td class=\\\"\\\">    <span class=\\\"indent1\\\">author_name</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"eCommerce Themes, Inc.\\\"</td>\\n    <td class=\\\"\\\">Name of the developer or partner creating the theme.<br><br>\\n\\n(<b>Note: For a successful theme upload to BigCommerce, this key is required to have a value.</b>)</td>\\n  </tr>\\n  \\n  <tr>\\n    <td class=\\\"\\\">    <span class=\\\"indent1\\\">author_email</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"support:::at:::example.com\\\"</td>\\n    <td class=\\\"\\\">Contact/support email address for the developer or partner creating the theme.<br><br>\\n\\n(<b>Note: For a successful theme upload to BigCommerce, this key is required to have a value.</b>)</td>\\n  </tr>\\n  \\n  <tr>\\n    <td class=\\\"\\\">    <span class=\\\"indent1\\\">author_support_url</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"http://example.com/contactus\\\"</td>\\n    <td class=\\\"\\\">Contact form/support URL for the developer or partner creating the theme.<br><br>\\n\\n(<b>Note: For a successful theme upload to BigCommerce, this key is required to have a value.</b>)</td>\\n  </tr>    \\n  \\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent1\\\">composed_image</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"composed_image.png\\\"</td>\\n    <td class=\\\"\\\">File name for a composed/mosaic screenshot of all variations of the theme, to appear on the \\\"My Themes\\\" page of purchased themes.<br><br>\\n\\nThe file-name value is arbitrary, but it must match the name of a file located in the <span class=\\\"inline-code\\\">&lt;theme‑name&gt;/meta/</span> subdirectory.\\n\\nThe actual file’s resolution must be 600 x 760 pixels (horizontal x vertical).</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\"> <span class=\\\"indent1\\\" id=\\\"features\\\">features</span></td>\\n    <td class=\\\"\\\">Array</td>\\n    <td class=\\\"\\\">[<NOBR>\\\"fully_responsive\\\"</nobr>, <NOBR>\\\"mega_navigation\\\"</nobr>, <NOBR>\\\"multi_tiered_sidebar_menu\\\"</nobr>, <NOBR>\\\"masonry_design\\\"</nobr>, <NOBR>\\\"frontpage_slideshow\\\"</nobr>, <NOBR>\\\"quick_add_to_cart\\\"</nobr>, <NOBR>\\\"switchable_product_view\\\"</nobr>, <NOBR>\\\"product_comparison_table\\\"</nobr>, <NOBR>\\\"complex_search_filtering\\\"</nobr>, <NOBR>\\\"customizable_product_selector\\\"</nobr>, <NOBR>\\\"cart_suggested_products\\\"</nobr>, <NOBR>\\\"free_customer_support\\\"</nobr>, <NOBR>\\\"free_theme_upgrades\\\"</nobr>, <NOBR>\\\"high_res_product_images\\\"</nobr>, <NOBR>\\\"product_filtering\\\"</nobr>, <NOBR>\\\"advanced_quick_view\\\"</nobr>, <NOBR>\\\"product_showcase\\\"</nobr>, <NOBR>\\\"persistent_cart\\\"</nobr>, <NOBR>\\\"one_page_check_out\\\"</nobr>, <NOBR>\\\"customized_check_out\\\"</nobr>, <NOBR>\\\"product_videos\\\"</nobr>]</td>\\n    <td class=\\\"\\\">Array of exact feature names supported in this theme. <NOBR>The \\\"Default/Examples\\\"</nobr> column lists the complete namespace. At least one of the values listed there must be present. <br><br>\\n\\nThese values are used as metadata for <NOBR>Theme Marketplace</nobr> searches. <br><br> \\n      The <span class=\\\"inline-code\\\">\\\"customized_check_out\\\"</span> value has a second function: It must be present if you want to enable <a href=\\\"https://support.bigcommerce.com/articles/Public/Optimized-Single-Page-Checkout\\\" target=\\\"_blank\\\">Optimized One-Page Checkout</a> for your theme.</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">css_compiler</td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"scss\\\"</td>\\n    <td class=\\\"\\\">CSS preprocessor; defaults to SCSS.</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">autoprefixer_cascade</td>\\n    <td class=\\\"\\\">Boolean</td>\\n    <td class=\\\"\\\">true</td>\\n    <td class=\\\"\\\">Whether to enable the Autoprefixer CSS postprocessor, to add vendor prefixes to CSS rules.</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">autoprefixer_browsers</td>\\n    <td class=\\\"\\\">Array</td>\\n    <td class=\\\"\\\">[\\\"last 3 versions\\\"]</td>\\n    <td class=\\\"\\\">Which legacy browsers <a href=\\\"https://github.com/postcss/autoprefixer\\\">Autoprefixer</a> should support, specified in <a href=\\\"https://github.com/ai/browserslist\\\">Browserslist</a> query format.</td>\\n  </tr>\\n  \\n<!-- jspm object removed here:\\n\\t<tr>\\n    <td class=\\\"\\\">jspm</td>\\n    <td class=\\\"\\\">Object</td>\\n    <td class=\\\"\\\"></td>\\n    <td class=\\\"\\\">Configuration options for optional <a href=\\\"http://jspm.io/\\\">jspm</a> JavaScript transpiler/package manager.</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">         <span class=\\\"indent1\\\">dev</span></td>\\n    <td class=\\\"\\\">Object</td>\\n    <td class=\\\"\\\"></td>\\n    <td class=\\\"\\\">Specifies development rules.</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent1\\\">&nbsp; &nbsp; &nbsp; dep_location</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"assets/js/dependency-bundle.js\\\"</td>\\n    <td class=\\\"\\\">Specifies <span class=\\\"inline-code\\\">.../assets/...</span> path to a bundle combining all vendors’ JS modules. jspm can preload this for faster page loads in development mode.</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent1\\\">&nbsp; &nbsp; &nbsp;  bootstrap</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"js/app\\\"</td>\\n    <td class=\\\"\\\">Path to the <span class=\\\"inline-code\\\">app.js</span> bootstrap file – relative to the <span class=\\\"inline-code\\\">...&lt;theme‑name&gt;/assets/</span> directory, and omitting the file’s <span class=\\\"inline-code\\\">.js</span> extension.</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent1\\\">&nbsp; &nbsp; &nbsp; bundle_location</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"assets/js/bundle.js\\\"</td>\\n    <td class=\\\"\\\">Running the jspm bundle will minify/mangle all your JavaScript into this one file, which you point to in production. (Specify the path relative to your theme’s top-level directory.)</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent1\\\">&nbsp; &nbsp; &nbsp; jspm_packages_path</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"assets/jspm_packages\\\"</td>\\n    <td class=\\\"\\\">Path where jspm installs its packages. (Specify the path relative to your theme’s top-level directory.)</td>\\n  </tr> \\n :jspm object removed here -->\\n  \\n  <tr>\\n    <td class=\\\"\\\"><a name=\\\"config-theme-settings\\\"></a>settings</td>\\n    <td class=\\\"\\\"></td>\\n    <td class=\\\"\\\"></td>\\n    <td class=\\\"\\\">Display-oriented key names, and values, that you can arbitrarily set for your theme. Handlebars accesses the combined settings as the context variable <span class=\\\"inline-code\\\">{{theme_settings}}</span>.<br><br>\\n      \\nVariations also have their <a href=\\\"#config-var-settings\\\">own </a> <span class=\\\"inline-code\\\">settings</span> sections. Values that you set at the variation level will override global values that you set here (for corresponding key names, and within the scope of that variation).<br><br>\\n\\nIf you want to create a custom variable to use in Handlebars, either add it here within this theme-level <span class=\\\"inline-code\\\">settings</span> section, or add it down in a <a href=\\\"#config-var-settings\\\">variation-level</a> <span class=\\\"inline-code\\\">settings</span> section.<br><br>\\n\\nYou would access your arbitrarily named custom variable in Handlebars as <span class=\\\"inline-code\\\">{{theme_settings.&lt;variablename&gt;}}</span>.\\n\\nHere is an example of a custom variable in the default theme’s <span class=\\\"inline-code\\\">config.json</span>:<br><br>\\n\\n<span class=\\\"inline-code\\\">\\\"settings\\\": { \\\"homepage_featured_products_count\\\": 6,\\n}</span><br><br>\\n\\nHere is the corresponding front matter in <span class=\\\"inline-code\\\">home.html</span> that calls this variable. (Note that this is pure YAML – the <span class=\\\"inline-code\\\">{{...}}</span> used to reference <span class=\\\"inline-code\\\">config.json</span> variables within pages’ front matter do not constitute a Handlebars statement:)<br><br>\\n\\n<pre>\\n---\\nproducts:\\n  featured:\\n      limit: {{theme_settings.homepage_featured_products_count}}\\n---\\n</pre></td>\\n  </tr>\\n  \\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent1\\\">homepage_new_products_count</span></td>\\n    <td class=\\\"\\\">Number</td>\\n    <td class=\\\"\\\">12</td>\\n    <td class=\\\"\\\">Number of products to include in home page’s New Products section.</td>\\n  </tr>\\n  \\n  <tr>\\n    <td class=\\\"\\\"><NOBR><span class=\\\"indent1\\\">homepage_&lt;section-name&gt;_count,</span></nobr><br> <NOBR><span class=\\\"indent1\\\">homepage_&lt;section-name&gt;_column_count</span></nobr></td>\\n    <td class=\\\"\\\">Number</td>\\n    <td class=\\\"\\\">[Varies]</td>\\n    <td class=\\\"\\\">Number of products, or columns, to include in the specified home-page section.</td>\\n  </tr>\\n  \\n  <tr>\\n    <td class=\\\"\\\"><NOBR><span class=\\\"indent1\\\">productpage_&lt;section-name&gt;_count</span></nobr></td>\\n    <td class=\\\"\\\">Number</td>\\n    <td class=\\\"\\\">[Varies]</td>\\n    <td class=\\\"\\\">Number of products to include in the specified section of product-details pages.</td>\\n  </tr>\\n  \\n  <tr>\\n    <td class=\\\"\\\"><NOBR><span class=\\\"indent1\\\">categorypage_products_per_page,</span></nobr><br> <NOBR><span class=\\\"indent1\\\">brandpage_products_per_page,</span></nobr><br> <NOBR><span class=\\\"indent1\\\">searchpage_products_per_page</span></nobr></td>\\n    <td class=\\\"\\\">Number</td>\\n    <td class=\\\"\\\">12</td>\\n    <td class=\\\"\\\">Number of products to include on each specified page type.</td>\\n  </tr>\\n  \\n\\t<tr>\\n    <td class=\\\"\\\"> <span class=\\\"indent1\\\">homepage_show_carousel</span></td>\\n    <td class=\\\"\\\">Boolean</td>\\n    <td class=\\\"\\\">true</td>\\n    <td class=\\\"\\\">Defines whether to display an image carousel on the home page.</td>\\n  </tr>  \\n\\n\\t<tr>\\n    <td class=\\\"\\\"> <span class=\\\"indent1\\\">show_product_quick_view</span></td>\\n    <td class=\\\"\\\">Boolean</td>\\n    <td class=\\\"\\\">true</td>\\n    <td class=\\\"\\\">Defines whether to offer customers product Quick View modal windows.</td>\\n  </tr>  \\n\\n\\t<tr>\\n    <td class=\\\"\\\"> <span class=\\\"indent1\\\">show_powered_by</span></td>\\n    <td class=\\\"\\\">Boolean</td>\\n    <td class=\\\"\\\">true</td>\\n    <td class=\\\"\\\">Defines whether to display a \\\"Powered by BigCommerce\\\" credit in the sitewide footer.</td>\\n  </tr>  \\n  \\n\\t<tr>\\n    <td class=\\\"\\\"> <span class=\\\"indent1\\\"><NOBR>show_accept_amex,</nobr></span><br>\\n      <span class=\\\"indent1\\\"><NOBR>show_accept_visa,</nobr></span><br> <span class=\\\"indent1\\\">etc.</span>\\n    </td>\\n    <td class=\\\"\\\">Boolean</td>\\n    <td class=\\\"\\\">false</td>\\n    <td class=\\\"\\\">Each of these keys displays or hides a payment-method icon in the sitewide footer. The icons respectively identify credit-card issuers, PayPal, etc. If these keys are defined in <a href=\\\"/docs/schemajson-metadata-for-theme-editor\\\">schema.json</a>, merchants can use the <a href=\\\"/docs/what-is-theme-editor\\\">Theme Editor</a> GUI to toggle each payment icon's visibility.</td>\\n  </tr>\\n  \\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent1\\\">product_list_display_mode</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"grid\\\"</td>\\n    <td class=\\\"\\\">Default display mode for product lists. A <span class=\\\"inline-code\\\">\\\"grid\\\"</span> value specifies grid format. Other entries trigger list format.</td>\\n  </tr>\\n   \\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent1\\\">logo-position</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"center\\\", \\\"left\\\", \\\"right\\\"</td>\\n    <td class=\\\"\\\">Sets (horizontal) display alignment for store logo throughout the theme.</td>\\n  </tr>\\n \\n<!-- Begin images section/intro: -->\\n  <tr>\\n    <td class=\\\"\\\"> <span class=\\\"indent1\\\"> <a name=\\\"config-images\\\"></a> [images]</td>\\n    <td colspan=\\\"3\\\">\\n    The following keys' values define storewide dimensions for named sizes. The <span class=\\\"inline-code\\\">{{getImage}}</span> Handlebars helper can use member keys’ values to dynamically resize any images, up to a maximum target size of 4096x4096 pixels.<br><br>\\n    \\n<!--The <span class=\\\"inline-code\\\">_images</span> key name is reserved. Child key--> Key names like <span class=\\\"inline-code\\\">\\\"logo_size\\\"</span> and <span class=\\\"inline-code\\\">\\\"thumb_size\\\"</span> are arbitrary.<br><br>\\n\\nFor example, this Handlebars expression:<br>\\n\\n<span class=\\\"inline-code\\\">{{getImage product.image \\\"thumb_size\\\"}}</span><br><br>\\n\\n...will output the path to a 100x100-pixel image (assuming the <span class=\\\"inline-code\\\">\\\"thumb_size\\\"</span> key retains its default value of <span class=\\\"inline-code\\\">\\\"100x100\\\"</span>).<br><br>\\n\\nBy defining or redefining these named sizes' values, in the format outlined below, you can automatically replicate the new sizes throughout your theme.</td>\\n  </tr>\\n  <!-- :End images intro: -->\\n  \\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent1\\\">logo_size</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">250x100</td>\\n    <td class=\\\"\\\">Key/value pair defining global (storewide) display dimensions for the store logo. The value is a string defining the width and height &ndash; in that order &ndash; in pixels.</td>\\n  </tr>\\n  \\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent1\\\">gallery_size</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">300x300</td>\\n    <td class=\\\"\\\">Key/value pair defining storewide display dimensions for blog images (also available for other uses).</td>\\n  </tr>\\n\\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent1\\\">productgallery_size</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">300x300</td>\\n    <td class=\\\"\\\">Key/value pair defining storewide display dimensions for product-gallery images.</td>\\n  </tr>\\n\\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent1\\\">product_size</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">500x659</td>\\n    <td class=\\\"\\\">Key/value pair defining storewide display dimensions for standard/medium-sized product images.</td>\\n  </tr>\\n  \\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent1\\\">productthumb_size</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">100x100</td>\\n    <td class=\\\"\\\">Key/value pair defining storewide display dimensions for product-image thumbnails on the product details page.</td>\\n  </tr>\\n\\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent1\\\">thumb_size</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">100x100</td>\\n    <td class=\\\"\\\">Key/value pair defining storewide display dimensions for swatches, and for brand and category thumbnails.</td>\\n  </tr>\\n  \\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent1\\\">zoom_size</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">1280x1280</td>\\n    <td class=\\\"\\\">Key/value pair defining storewide display dimensions for zoomable product images on the product details page.</td>\\n  </tr>\\n<!-- :End images section-->\\n\\n<!-- Begin image URLs section: -->    \\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent1\\\">product_list_display_mode</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"grid\\\"</td>\\n    <td class=\\\"\\\">Default display mode for product lists. A <span class=\\\"inline-code\\\">\\\"grid\\\"</span> value specifies grid format. Other entries trigger list format.</td>\\n  </tr>\\n\\n  <tr>\\n    <td class=\\\"\\\"> <span class=\\\"indent1\\\"> default_image_brand</td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">/assets/img/BrandDefault.gif</td>\\n    <td class=\\\"\\\">Relative path to a default image representing brands.</td>\\n  </tr>\\n\\n  <tr>\\n    <td class=\\\"\\\"> <span class=\\\"indent1\\\"> default_image_product</td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">/assets/img/ProductDefault.gif</td>\\n    <td class=\\\"\\\">Relative path to a default image representing products.</td>\\n  </tr>\\n\\n  <tr>\\n    <td class=\\\"\\\"> <span class=\\\"indent1\\\"> default_image_gift_certificate</td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">/assets/img/GiftCertificate.png</td>\\n    <td class=\\\"\\\">Relative path to a default image representing gift certificates.</td>\\n  </tr>\\n<!-- :End image URLs section -->    \\n  \\n<!-- Begin fonts section: -->\\n  <tr>\\n    <td class=\\\"\\\">         <a name=\\\"config-json-fonts\\\"></a><span class=\\\"indent1\\\">body-font</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"Google_Karla_400\\\"</td>\\n    <td class=\\\"\\\">Font-family keys, with corresponding values.\\nKeys are named by display purpose, and keys' names should end in <span class=\\\"inline-code\\\">-font</span>. But naming is otherwise arbitrary. So you can freely define additional font families for your theme.<br>\\n\\n      <p></p>Values should follow the format:<br> \\n<pre>&lt;ProviderName&gt;_&lt;Font+FamilyName&gt;\\n    _&lt;OptionalWeightNumber&gt;\\n</pre>\\n\\n<!--      <span class=\\\"inline-code\\\">&lt;ProviderName&gt;_&lt;Font+FamilyName&gt;_&lt;OptionalWeightNumber&gt;</span><br><br> -->\\n\\nAs in this example:<br>\\n      <pre>Google_Open+Sans_700</pre>\\n\\n<!--      <span class=\\\"inline-code\\\">Google_Open+Sans_700</span><br><br> -->\\n\\n      ...which specifies <span class=\\\"inline-code\\\">Google Fonts</span> as the Provider, <span class=\\\"inline-code\\\">Open Sans</span> as the Font Family, and <span class=\\\"inline-code\\\">800</span> as the (optional) Weight attribute.<br><br>\\n\\n(<b>Note:</b> The Provider &ndash; also called \\\"Foundry\\\" &ndash; is currently limited to Google Fonts.)<br><br>\\n      \\nStencil’s <a href=\\\"/docs/custom-sass-functions#FontFamily\\\">custom Sass functions</a> can process these keys’ values. E.g., to <span class=\\\"inline-code\\\">stencilFontFamily</span>, you could pass the (arbitrary) key name <span class=\\\"inline-code\\\">\\\"body-font\\\"</span>, and the function would process the value.<br><br>\\n      \\nNote that Sass requires explicit typing of inputs and outputs – e.g., <span class=\\\"inline-code\\\">stencilNumber</span> defaults to pixels – so you must specify any other units. Thus, for a<br><p></p>\\n\\n      <pre>\\\"font‑size\\\" = 3</pre>\\n      <p></p>\\n\\n<!--      <span class=\\\"indent1\\\"><span class=\\\"inline-code\\\">\\\"font‑size\\\" = 3</span></span><br> -->\\n\\n...this statement:<br><p></p>\\n\\n    <pre>stencilNumber(\\\"font-size\\\",\\\"rem\\\")\\n    * 3</pre><p></p>\\n\\n<!--    <span class=\\\"indent1\\\"><span class=\\\"inline-code\\\">stencilNumber(\\\"font-size\\\",\\\"rem\\\")</span></span><br>   \\n    <span class=\\\"indent1\\\"><span class=\\\"inline-code\\\">* 3</span></span><br> -->\\n\\n...will output:<br><p></p>\\n\\n    <pre>9rem</pre>\\n    <p></p>\\n\\n<!--    <span class=\\\"indent1\\\"><span class=\\\"inline-code\\\">9rem</span></span><br><br> -->\\n\\n      (<b>Note:</b> To enable merchants to customize your themes' fonts via <NOBR>Theme Editor</nobr>, we recommend that you rely on Google Fonts, with no more than 25 typefaces per theme.)</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">         <span class=\\\"indent1\\\">headings-font</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"Google_Montserrat_400\\\"</td>\\n    <td class=\\\"\\\">Arbitrary key name, and value, for a font family and (optional) weight that can be applied to headings.</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">         <span class=\\\"indent1\\\">logo-font</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"Google_Oswald_300\\\"</td>\\n    <td class=\\\"\\\">Arbitrary key name, and value, for a font family and (optional) weight for logo text.</td>\\n  </tr>\\n  \\n  <tr>\\n    <td class=\\\"\\\">         <span class=\\\"indent1\\\"><NOBR>fontSize-root,</nobr></span><br> <span class=\\\"indent1\\\"><NOBR>fontSize-h1</nobr>..</span><NOBR>fontSize-h6,</nobr><br> <span class=\\\"indent1\\\">etc.</span> </td>\\n    <td class=\\\"\\\">Number</td>\\n    <td class=\\\"\\\">14</td>\\n    <td class=\\\"\\\">Font-size keys, with corresponding values.<br><br>\\n      \\nThese keys' values provide defaults for options selectable in the Theme Editor GUI. Also, Stencil’s <a href=\\\"#CustomSassFn\\\">custom Sass functions</a> can process these values.<br><br> \\n      \\n      Here again, these keys are named by display purpose, but arbitrarily. So you can freely define additional font sizes for your theme.</td>\\n  </tr>\\n\\n  <!--\\n  <tr>\\n    <td class=\\\"\\\">         <span class=\\\"indent1\\\">fontFamily-serif</span></td>\\n    <td class=\\\"\\\">Integer[? Number?]</td>\\n    <td class=\\\"\\\">\\\"Georgia, serif\\\"</td>\\n    <td class=\\\"\\\">\\\"</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">         <span class=\\\"indent1\\\">fontFamily-mono</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"Menlo, monospace\\\"</td>\\n    <td class=\\\"\\\">\\\"</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">         <span class=\\\"indent1\\\">fontFamily-headings</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"Montserrat, sans-serif\\\"</td>\\n    <td class=\\\"\\\">\\\"</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">         <span class=\\\"indent1\\\">fontFamily-hero</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"Oswald, sans-serif\\\"</td>\\n    <td class=\\\"\\\">\\\"</td>\\n  </tr>\\n-->\\n<!-- :End fonts section -->\\n  \\n  \\n<!--Begin colors section:-->  \\n  <tr>\\n    <td class=\\\"\\\">\\n      <span class=\\\"indent1\\\"><NOBR>color-textBase</nobr></span>\\n    </td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"#4f4f4f\\\"</td>\\n    <td class=\\\"\\\">Color definitions, with corresponding hex values. These keys' values provide defaults for options selectable in the Theme Editor GUI.<br><br> \\n      \\n      Also, Stencil’s <a href=\\\"#CustomSassFn\\\">custom Sass functions</a> can process these values. E.g., to <span class=\\\"inline-code\\\">stencilColor</span>, you could pass the key name <span class=\\\"inline-code\\\">\\\"color-textBase\\\"</span>, and the function would return the <span class=\\\"inline-code\\\">\\\"#4f4f4f\\\"</span> value defined here.<br><br>\\n      \\n      The keys are named by display purpose &ndash; defining consistent colors for various parts of the theme in different states. But the keys are also named arbitrarily. So you can freely name and define new color keys for your theme.<br><br> \\n      \\n      (<b>Note:</b> Only a subset of the default <span class=\\\"inline-code\\\">config.json</span> file’s color definitions are listed here.) </td>\\n  </tr>\\n\\n  <tr>\\n    <td class=\\\"\\\">   <span class=\\\"indent1\\\"><NOBR>color-textBase--hover,</nobr></span> <span class=\\\"indent1\\\"><NOBR>color-textBase--active,</nobr></span><br> <span class=\\\"indent1\\\">..</span><br> <span class=\\\"indent1\\\"><NOBR>color-textLink--active,</nobr></span><br> <span class=\\\"indent1\\\"><NOBR>color-textHeading,</nobr></span><br> <span class=\\\"indent1\\\">etc.</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">[Varies]</td>\\n    <td class=\\\"\\\">\\\"</td>\\n  </tr>\\n\\n  <tr>\\n    <td class=\\\"\\\">   <span class=\\\"indent1\\\">color-primary</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"#4f4f4f\\\"</td>\\n    <td class=\\\"\\\">\\\"</td>\\n  </tr>\\n  \\n  <tr>\\n    <td class=\\\"\\\">         <span class=\\\"indent1\\\">color-primaryDark</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"#454545\\\"</td>\\n    <td class=\\\"\\\">\\\"</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">         <span class=\\\"indent1\\\">color-primaryDarker</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"#2d2d2d\\\"</td>\\n    <td class=\\\"\\\">\\\"</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">         <span class=\\\"indent1\\\">color-primaryLight</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"#a5a5a5\\\"</td>\\n    <td class=\\\"\\\">\\\"</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">         <span class=\\\"indent1\\\">color-secondary</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"#ffffff\\\"</td>\\n    <td class=\\\"\\\">\\\"</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">         <span class=\\\"indent1\\\">color-secondaryDark</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"#f2f2f2\\\"</td>\\n    <td class=\\\"\\\">\\\"</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">         <span class=\\\"indent1\\\">color-secondaryDarker</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"#f2f2f2\\\"</td>\\n    <td class=\\\"\\\">\\\"</td>\\n  </tr>\\n<!-- :End colors section -->\\n\\n<!-- Begin Optimized checkout subsection/intro: -->\\n  <tr>\\n    <td class=\\\"\\\"> <span class=\\\"indent1\\\"> <a name=\\\"config-uco\\\"></a> [Optimized Checkout]</td>\\n    <td colspan=\\\"3\\\">\\n    The following are examples of keys that define default style properties for the Optimized Checkout page. Each key/value pair here corresponds to a class in the <span class=\\\"inline-code\\\">&lt;theme‑name&gt;/assets/scss/optimized-checkout.scss</span> file.\\n\\t</td>\\n  </tr>\\n  <!-- :End Optimized Checkout intro. -->\\n  \\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent1\\\">optimizedCheckout-header-backgroundColor</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">#f7f7f7</td>\\n    <td class=\\\"\\\">Key/value pair defining default background color for the Optimized Checkout page's header.</td>\\n  </tr>\\n  \\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent1\\\">optimizedCheckout-show-backgroundImage</span></td>\\n    <td class=\\\"\\\">Boolean</td>\\n    <td class=\\\"\\\">false</td>\\n    <td class=\\\"\\\">Key/value pair defining whether to display a background image on the Optimized Checkout page.</td>\\n  </tr>\\n\\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent1\\\">optimizedCheckout-backgroundImage</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\"> &ndash; </td>\\n    <td class=\\\"\\\">Key/value pair containing file name of background image for the Optimized Checkout page.</td>\\n  </tr>\\n\\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent1\\\">optimizedCheckout-backgroundImage-size</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">1000x400</td>\\n    <td class=\\\"\\\">Key/value pair defining display size for background image on the Optimized Checkout page.</td>\\n  </tr>\\n\\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent1\\\">optimizedCheckout-show-logo</span></td>\\n    <td class=\\\"\\\">enum</td>\\n    <td class=\\\"\\\">none</td>\\n    <td class=\\\"\\\">Key/value pair defining whether to show logo on the Optimized Checkout page.</td>\\n  </tr>\\n\\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent1\\\">optimizedCheckout-logo</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\"> &ndash; </td>\\n    <td class=\\\"\\\">Key/value pair containing file name of background image for the Optimized Checkout page.</td>\\n  </tr>\\n\\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent1\\\">[...]</span></td>\\n    <td class=\\\"\\\">[...]</td>\\n    <td class=\\\"\\\"> [...] </td>\\n    <td class=\\\"\\\">[...]<br> \\n      (Multiple similar key/value pairs. For a more-complete list of the classes available, please see <a href=\\\"/docs/optimized-checkout-customization\\\">Optimized One-Page Checkout Customization</a>.)</td>\\n  </tr>\\n<!-- :end Optimized checkout subsection -->  \\n\\n<!-- Begin read-only subsection-->\\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent1\\\" id=\\\"readonly\\\">read_only_files</span></td>\\n    <td class=\\\"\\\">String array</td>\\n    <td class=\\\"\\\"> \\\"/assets/scss/components/citadel\\\",<br> \\\"/assets/scss/components/foundation\\\",<br> \\\"/assets/scss/components/vendor\\\",<br> \\\"/assets/scss/vendor\\\",<br> \\\"/assets/scss/settings/citadel\\\",<br> \\\"/assets/scss/settings/foundation\\\",<br> \\\"/assets/scss/settings/vendor\\\",<br> \\\"/assets/scss/settings/normalize\\\" </td>\\n    <td class=\\\"\\\">Files and paths specified in this array will be viewable in the <a href=\\\"/docs/what-is-theme-editor\\\">Theme Editor</a> GUI, but not editable. Add any theme files/paths that you want to make read-only for store administrators using that editor.</td>\\n  </tr>\\n<!-- :end read-only subsection -->\\n  \\n<!-- Begin resources: section -->\\n  <tr>\\n    <td class=\\\"\\\">resources</td>\\n    <td class=\\\"\\\"></td>\\n    <td class=\\\"\\\"></td>\\n    <td class=\\\"\\\">Global resources, inherited by all pages located directly within your <span class=\\\"inline-code\\\">&lt;theme‑name&gt;/templates/pages/</span> <a href=\\\"#Pages-Subdir\\\">subdirectory</a>.<br><br>\\n\\n(This inheritance spares you from having to define them in front matter on every page. Here, the resources are defined in JSON rather than YAML format.)<br><br>\\n\\nYou are free to add more global resources here – for example: <span class=\\\"inline-code\\\">\\\"brands\\\": true</span> to display a brands list; or\\n<span class=\\\"inline-code\\\">\\\"blog\\\": \\\"posts\\\": \\\"limit\\\": 3</span> to display the top 3 blog posts. For syntax, see <a href=\\\"/docs/front-matter-variables#Front-ref-global\\\">Front-Matter Global Attributes</a>.</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">         <span class=\\\"indent1\\\">cart</span></td>\\n    <td class=\\\"\\\">Boolean</td>\\n    <td class=\\\"\\\">true</td>\\n    <td class=\\\"\\\">Defines whether to retrieve/display cart data <!--to display a shopping-cart icon/link--> in pages' chrome.</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">         <span class=\\\"indent1\\\">shop_by_brand</span></td>\\n    <td class=\\\"\\\">Boolean</td>\\n    <td class=\\\"\\\">true</td>\\n    <td class=\\\"\\\">Defines whether to include a quick-navigation list of brands in the footer. Adding this optional filter defines how many brands to load:<br>\\n        <span class=\\\"inline-code\\\">limit: &lt;number&gt;</span></td>\\n  </tr>\\n    \\n  <tr>\\n    <td class=\\\"\\\"><a name=\\\"config-variations\\\"></a>variations</td>\\n    <td class=\\\"\\\">Object</td>\\n    <td class=\\\"\\\"></td>\\n    <td class=\\\"\\\">Collection of variation objects. Each contained object defines one variation on this overall theme. (A theme must contain at least one variation, and may contain up to four.)</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">         <span class=\\\"indent1\\\">name</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"Light\\\", \\\"Bold\\\",\\\"Warm\\\" (etc.)</td>\\n    <td class=\\\"\\\">An arbitrary name for this variation. This name is used in the Themes Marketplace and Theme Editor.</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">         <span class=\\\"indent1\\\">id</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"light\\\", \\\"bold\\\", \\\"warm\\\" (etc.)</td>\\n    <td class=\\\"\\\">A string ID for this variation. Arbitrarily named, but must be unique to this variation.\\nThe Stencil framework’s database uses this unique ID to identify and process updates to variations.<br><br> \\n\\nWhen you submit an updated version of your theme to BigCommerce, IDs and settings for previously submitted variations must match those in previous submissions of your theme. You may add, but not remove, variations and settings in such resubmissions. You may rename variations for clarity.\\n</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">         <span class=\\\"indent1\\\"><a name=\\\"config-var-settings\\\"></a>settings</span></td>\\n    <td class=\\\"\\\"></td>\\n    <td class=\\\"\\\"></td>\\n    <td class=\\\"\\\">Variation-level counterpart to this theme’s <a href=\\\"#config-theme-settings\\\">theme-level</a> <span class=\\\"inline-code\\\">\\\"settings\\\"</span> object.<br><br>\\n\\nValues that you set here will override <a href=\\\"#config-theme-settings\\\">theme-wide</a> values for corresponding key names,  within the scope of this variation.<br><br>\\n\\nYou can also create custom variables here, whose scope will be limited to this variation. Syntax is the same as for <a href=\\\"#config-theme-settings\\\">theme-wide</a> custom variables.</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">         <span class=\\\"indent1\\\"><a name=\\\"config-var-meta\\\"></a>meta</span></td>\\n    <td class=\\\"\\\">Object</td>\\n    <td class=\\\"\\\"></td>\\n    <td class=\\\"\\\">Variation-level counterpart to this theme’s <a href=\\\"#config-theme-meta\\\">top-level</a> <span class=\\\"inline-code\\\">\\\"meta\\\"</span> collection.\\nBigCommerce will similarly use this collection’s values when listing themes in Theme Marketplace and Theme Editor.</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent2\\\"> \\\"desktop_screenshot\\\"</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"desktop_screenshot.png\\\"</td>\\n    <td class=\\\"\\\">File name for a screenshot of this variation’s large-format layout.\\nThe key name is fixed. The file-name value is arbitrary, but it must match the name of a file located in the <span class=\\\"inline-code\\\">&lt;theme‑name&gt;/meta/</span> subdirectory. <NOBR>(If you</nobr> are updating a variation, be sure to match this value to the intended file name.) The screenshot’s required dimensions are 2048 x 2600 pixels.</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent2\\\"> \\\"mobile_screenshot\\\"</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"mobile_screenshot.png\\\",</td>\\n    <td class=\\\"\\\">File name for a screenshot of this variation’s mobile-format layout.\\nThe key name is fixed. The file-name value is arbitrary, but it must match the name of a file located in the <span class=\\\"inline-code\\\">&lt;theme‑name&gt;/meta/</span> subdirectory. <NOBR>(If you</nobr> are updating a variation, be sure to match this value to the intended file name.) The screenshot’s required dimensions are 304 x 540 pixels.</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent2\\\"> \\\"description\\\" </span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"This is the light style of the Stencil Theme\\\"</td>\\n    <td class=\\\"\\\">Arbitrary text description for this variation. This description will appear in Themes Marketplace and <NOBR>Theme Editor.</nobr></td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent2\\\"> \\\"demo_url\\\"</span></td>\\n    <td class=\\\"\\\">String</td>\\n    <td class=\\\"\\\">\\\"https://stencil-light.mybigcommerce.com\\\"</td>\\n    <td class=\\\"\\\">URL of your demo store, as set up on bigcommerce.com.</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent2\\\"> \\\"optimized_for”</span></td>\\n    <td class=\\\"\\\">Array</td>\\n    <td class=\\\"\\\">[<NOBR>\\\"arts_crafts\\\",</nobr> <NOBR>\\\"animals_pets\\\",</nobr> <NOBR>\\\"automotive_industrial\\\",</nobr> <NOBR>\\\"electronics_computers\\\",</nobr> <NOBR>\\\"fashion_jewelry\\\",</nobr> <NOBR>\\\"food_beverage\\\",</nobr> <NOBR>\\\"gifts_specialty\\\",</nobr> <NOBR>\\\"health_beauty\\\",</nobr> <NOBR>\\\"home_garden\\\",</nobr> <NOBR>\\\"books_entertainment\\\",</nobr> <NOBR>\\\"sports_recreation\\\",</nobr> <NOBR>\\\"toys_games\\\",</nobr> <NOBR>\\\"multi_purpose\\\",</nobr> <NOBR>\\\"chrome_firefox_safari_ie_10\\\",</nobr> <NOBR>\\\"mobile_tablet_desktop\\\",</nobr> <NOBR>\\\"sales_discounts\\\",</nobr> <NOBR>\\\"wholesale\\\",</nobr> <NOBR>\\\"single_product\\\",</nobr> <NOBR>\\\"large_catalog\\\",</nobr> <NOBR>\\\"mobile\\\",</nobr> <NOBR>\\\"clothing\\\",</nobr> <NOBR>\\\"cosmetics\\\",</nobr> <NOBR>\\\"home_appliances\\\",</nobr> <NOBR>\\\"home_furnishings\\\",</nobr> <NOBR>\\\"movies\\\",</nobr> <NOBR>\\\"music\\\",</nobr> <NOBR>\\\"digital_downloads\\\",</nobr> <NOBR>\\\"outdoor_sports\\\",</nobr> <NOBR>\\\"hunting_fishing\\\",</nobr> <NOBR>\\\"video_games\\\"]</nobr></td>\\n    <td class=\\\"\\\">Array of metadata for Theme Marketplace searches &ndash; exact names of storefront types compatible with this theme. <NOBR>The \\\"Default/Examples\\\"</nobr> column lists the complete namespace. At least one of the values listed there must be present.</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\"><span class=\\\"indent2\\\"> “industries\\\"</span></td>\\n    <td class=\\\"\\\">Array</td>\\n    <td class=\\\"\\\">[<NOBR>\\\"arts_crafts\\\",</nobr> <NOBR>\\\"animals_pets\\\",</nobr> <NOBR>\\\"automotive_industrial\\\",</nobr> <NOBR>\\\"electronics_computers\\\",</nobr> <NOBR>\\\"fashion_jewelry\\\",</nobr> <NOBR>\\\"food_beverage\\\",</nobr> <NOBR>\\\"gifts_specialty\\\",</nobr> <NOBR>\\\"health_beauty\\\",</nobr> <NOBR>\\\"home_garden\\\",</nobr> <NOBR>\\\"books_entertainment\\\",</nobr> <NOBR>\\\"sports_recreation\\\",</nobr> <NOBR>\\\"toys_games\\\"]</nobr></td>\\n    <td class=\\\"\\\">Array of optional metadata for <NOBR>Theme Marketplace,</nobr> where these values will be used to support faceted searches. You may submit up to four values from the complete namespace listed in the \\\"Default/Examples\\\"</nobr> column.</td>\\n  </tr>\\n</table>\"\n}\n[/block]\n## <span id=\"config-json-reqs\"> Requirements and Restrictions </span>\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"title\": \"Avoid Upload Errors\",\n  \"body\": \"Please carefully check your theme against all the requirements listed here – including the required keys within the `meta` object and `variations` array. While some requirements are not enforced in local development, they will be validated (and will trigger errors) when you later [upload your theme](/docs/uploading-a-custom-theme) to BigCommerce.\"\n}\n[/block]\nYour theme's `config.json` file must meet the following requirements:\n* It must be named `config.json`, must reside in the root of your `<theme-name>` subdirectory (e.g.: `/cornerstone/config.json` or `/stencil/config.json`), and must be valid JSON.\n* The maximum allowable size for a theme's `config.json` file is 64 KB. Exceeding this limit will trigger an error upon uploading the theme to BigCommerce.\n* Each key's value is restricted to 64 characters. Exceeding this limit will similarly trigger an upload error.\n* Other than these size constraints, there is no limit on the number of keys and values that you can place in a theme's `config.json`.\n\n### Required Themewide Keys\n\nThe `config.json` file must contain at least the following keys, with appropriate values (as outlined above):\n* `name`\n* `version`\n* `settings` (which must itself be a valid JSON object)\n* `variations` (an array of at least one, and at most four, variation objects)\n* `meta` (an object; see specific requirements below)\n\n### Required meta Keys\n\nThe `meta` object must contain at least the following keys, with appropriate values:\n* `price`\n* `author_name`\n* `author_email`\n* `author_support_url`\n* `documentation_url`\n\nFor illustration, here is a commented excerpt:\n\n```\n{\n  ...\n  \"meta\": {\n    \"price\": 15000, // in cents; non-negative integer, minimum 0\n    \"author_name:\" \"eCommerce Themes, Inc.\", // Must be a string, not null\n    \"author_email\": \"support@example.com\", // Must be a string, should be a valid email address, not null\n    \"author_support_url\": \"http://example.com/contactus\", //  Must be a string, should be a valid URL, not null\n    \"documentation_url\": \"http://example.com/guide\", // Must be a string, limit of 255 characters,\n          not null\n    \"composed_image\": \"path/to/composed.png\", // Must be a string path to the composed-image file\n    \"features\": [ // Array of feature strings, all of which must be in the list enumerated here: \n          https://github.com/bigcommerce/theme-registry/blob/master/app/schemas/theme_config.json#L33\n      \"fully_responsive\" // Must include at least one feature, and no duplicate entries\n    ]\n  },\n  ...\n}\n```\n\n### Required variation Keys\n\nFor each variation that you choose to include in your theme (at least one is required), you must provide at least the following keys and sub-element, with appropriate values:\n* `name`\n* `id`\n* `meta` (an object, containing at least:)\n*    `description`\n\nFor illustration, here is a redacted excerpt from Cornerstone:\n\n```\n  \"variations\": [\n    {\n      \"name\": \"Light\",\n      \"id\": \"light\",\n      \"meta\": {\n        \"desktop_screenshot\": \"desktop_light.png\",\n        \"mobile_screenshot\": \"mobile_light.png\",\n        \"description\": \"Ideal for a wide range of businesses and brands, this design is fully responsive, simple, and ready for you to add your branding, logo, and products. ....\",\n    ...\n    }\n  ]\n```\n[block:html]\n{\n  \"html\": \"<h2> <a name=\\\"ConfigVideo\\\"></a> Video Demo </h2>\\n\\nWatch a video demonstration of how your edits to <span class=\\\"inline-code\\\">config.json</span> interact with other files to customize your theme: <br><p></p>\\n\\n<iframe src=\\\"https://www.youtube.com/embed/VZYZsDoEOpQ?ecver=2\\\" width=\\\"560\\\" height=\\\"315\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\"\n}\n[/block]","excerpt":"","slug":"configjson-reference","type":"basic","title":"config.json Metadata"}

config.json Metadata


This page introduces the `config.json` file's structure, by reference to examples in Stencil's default Cornerstone theme. It then lists requirements for your own theme's `config.json`. The entries below cover: * [config.json Overview](#config-json-ref) * [Keys and Example Values](#config-json-ex) * [Requirements and Restrictions](#config-json-reqs) * [Video Demo](#ConfigVideo) [block:html] { "html": "<h2> <a name=\"config-json-ref\"></a> config.json Overview </h2>\n\nYou configure the <span class=\"inline-code\">.../&lt;theme‑name&gt;/config.json</span> file to properly manage each of your custom theme's front-end aspects. This file’s functions are to:<br>\n\n<ul>\n<li>Provide global context for Stencil’s CSS and Handlebars resources.</li>\n\n<li>Provide values for the <a href=\"/docs/what-is-theme-editor\">Theme Editor</a> GUI to manage.</li>\n\n<li>Provide metadata for your theme’s listing in the Theme Marketplace.</li>\n\n<li>Define variations included in your theme.</li>\n</ul>" } [/block] [block:callout] { "type": "info", "title": "Configuring Variations", "body": "Each object within your <span class=\"inline-code\">config.json</span> file's <span class=\"inline-code\"><a href=\"#config-variations\">variations</a></span> collection defines one theme variation. So you control the number of variations in your theme by editing this file's <span class=\"inline-code\">variations</span> section. \n\nIf you are adapting an existing theme, and you choose to provide fewer variations than are defined in that existing theme's <span class=\"inline-code\">config.json</span> file, be sure to delete entries for any variations you are not supporting." } [/block] [block:callout] { "type": "info", "body": "For step-by-step procedures about preparing the [themewide](#config-theme-meta) and [variation-specific](#config-var-meta) screenshots mentioned below, please see the separate [Preparing Thumbnail Images](/docs/preparing-thumbnail-images) page.", "title": "Preparing Screenshots" } [/block] <h2> <a name="config-json-ex"></a> Keys and Example Values </h2> Below are the properties you can configure, with notes and example values from Stencil's Cornerstone reference theme. Note that keys here might appear in a different order than in the Cornerstone file: [block:html] { "html": "<table>\n <tr>\n <td>Property</td>\n <td>Format</td>\n <td>Default/Examples</td>\n <td>Description</td>\n </tr>\n <tr>\n <td class=\"\">name</td>\n <td class=\"\">String</td>\n <td class=\"\">\"Stencil\"</td>\n <td class=\"\">Theme’s name, as it will appear in the Theme Marketplace.<br><br>\n\n(<b>Note:</b> Theme names should be composed of only the following characters: a-z, A-Z, 0-9, hyphen.)</td>\n </tr>\n <tr>\n <td class=\"\">version</td>\n <td class=\"\"><a href=\"http://semver.org/\">SemVer</a></td>\n <td class=\"\">\"1.0.0\"</td>\n <td class=\"\">Theme’s version number, formatted as <span class=\"inline-code\">major.minor.patch</span>.</td>\n </tr>\n <tr>\n <td class=\"\"><a name=\"config-theme-meta\"></a>meta</td>\n <td class=\"\">Object</td>\n <td class=\"\"></td>\n <td class=\"\">BigCommerce will use this metadata to list themes in Theme Marketplace.<br><br>\n \n(Theme variations also have their <a href=\"#config-var-meta\">own metadata collections</a>.)</td>\n </tr>\n <tr>\n <td class=\"\"> <span class=\"indent1\">price</span></td>\n <td class=\"\">Number</td>\n <td class=\"\">15000</td>\n <td class=\"\">Price, in cents, to purchase this theme in Theme Marketplace.</td>\n </tr>\n\n <tr>\n <td class=\"\"> <span class=\"indent1\">documentation_url</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"https://support.bigcommerce.com/articles/Public/Cornerstone-Theme-Manual\"</td>\n <td class=\"\">URL of theme developer’s documentation site.<br><br>\n\n(<b>Note: For a successful theme upload to BigCommerce, this key is required to have a value.</b>)</td>\n </tr>\n \n <tr>\n <td class=\"\"> <span class=\"indent1\">author_name</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"eCommerce Themes, Inc.\"</td>\n <td class=\"\">Name of the developer or partner creating the theme.<br><br>\n\n(<b>Note: For a successful theme upload to BigCommerce, this key is required to have a value.</b>)</td>\n </tr>\n \n <tr>\n <td class=\"\"> <span class=\"indent1\">author_email</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"support@example.com\"</td>\n <td class=\"\">Contact/support email address for the developer or partner creating the theme.<br><br>\n\n(<b>Note: For a successful theme upload to BigCommerce, this key is required to have a value.</b>)</td>\n </tr>\n \n <tr>\n <td class=\"\"> <span class=\"indent1\">author_support_url</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"http://example.com/contactus\"</td>\n <td class=\"\">Contact form/support URL for the developer or partner creating the theme.<br><br>\n\n(<b>Note: For a successful theme upload to BigCommerce, this key is required to have a value.</b>)</td>\n </tr> \n \n <tr>\n <td class=\"\"><span class=\"indent1\">composed_image</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"composed_image.png\"</td>\n <td class=\"\">File name for a composed/mosaic screenshot of all variations of the theme, to appear on the \"My Themes\" page of purchased themes.<br><br>\n\nThe file-name value is arbitrary, but it must match the name of a file located in the <span class=\"inline-code\">&lt;theme‑name&gt;/meta/</span> subdirectory.\n\nThe actual file’s resolution must be 600 x 760 pixels (horizontal x vertical).</td>\n </tr>\n <tr>\n <td class=\"\"> <span class=\"indent1\" id=\"features\">features</span></td>\n <td class=\"\">Array</td>\n <td class=\"\">[<NOBR>\"fully_responsive\"</nobr>, <NOBR>\"mega_navigation\"</nobr>, <NOBR>\"multi_tiered_sidebar_menu\"</nobr>, <NOBR>\"masonry_design\"</nobr>, <NOBR>\"frontpage_slideshow\"</nobr>, <NOBR>\"quick_add_to_cart\"</nobr>, <NOBR>\"switchable_product_view\"</nobr>, <NOBR>\"product_comparison_table\"</nobr>, <NOBR>\"complex_search_filtering\"</nobr>, <NOBR>\"customizable_product_selector\"</nobr>, <NOBR>\"cart_suggested_products\"</nobr>, <NOBR>\"free_customer_support\"</nobr>, <NOBR>\"free_theme_upgrades\"</nobr>, <NOBR>\"high_res_product_images\"</nobr>, <NOBR>\"product_filtering\"</nobr>, <NOBR>\"advanced_quick_view\"</nobr>, <NOBR>\"product_showcase\"</nobr>, <NOBR>\"persistent_cart\"</nobr>, <NOBR>\"one_page_check_out\"</nobr>, <NOBR>\"customized_check_out\"</nobr>, <NOBR>\"product_videos\"</nobr>]</td>\n <td class=\"\">Array of exact feature names supported in this theme. <NOBR>The \"Default/Examples\"</nobr> column lists the complete namespace. At least one of the values listed there must be present. <br><br>\n\nThese values are used as metadata for <NOBR>Theme Marketplace</nobr> searches. <br><br> \n The <span class=\"inline-code\">\"customized_check_out\"</span> value has a second function: It must be present if you want to enable <a href=\"https://support.bigcommerce.com/articles/Public/Optimized-Single-Page-Checkout\" target=\"_blank\">Optimized One-Page Checkout</a> for your theme.</td>\n </tr>\n <tr>\n <td class=\"\">css_compiler</td>\n <td class=\"\">String</td>\n <td class=\"\">\"scss\"</td>\n <td class=\"\">CSS preprocessor; defaults to SCSS.</td>\n </tr>\n <tr>\n <td class=\"\">autoprefixer_cascade</td>\n <td class=\"\">Boolean</td>\n <td class=\"\">true</td>\n <td class=\"\">Whether to enable the Autoprefixer CSS postprocessor, to add vendor prefixes to CSS rules.</td>\n </tr>\n <tr>\n <td class=\"\">autoprefixer_browsers</td>\n <td class=\"\">Array</td>\n <td class=\"\">[\"last 3 versions\"]</td>\n <td class=\"\">Which legacy browsers <a href=\"https://github.com/postcss/autoprefixer\">Autoprefixer</a> should support, specified in <a href=\"https://github.com/ai/browserslist\">Browserslist</a> query format.</td>\n </tr>\n \n<!-- jspm object removed here:\n\t<tr>\n <td class=\"\">jspm</td>\n <td class=\"\">Object</td>\n <td class=\"\"></td>\n <td class=\"\">Configuration options for optional <a href=\"http://jspm.io/\">jspm</a> JavaScript transpiler/package manager.</td>\n </tr>\n <tr>\n <td class=\"\"> <span class=\"indent1\">dev</span></td>\n <td class=\"\">Object</td>\n <td class=\"\"></td>\n <td class=\"\">Specifies development rules.</td>\n </tr>\n <tr>\n <td class=\"\"><span class=\"indent1\">&nbsp; &nbsp; &nbsp; dep_location</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"assets/js/dependency-bundle.js\"</td>\n <td class=\"\">Specifies <span class=\"inline-code\">.../assets/...</span> path to a bundle combining all vendors’ JS modules. jspm can preload this for faster page loads in development mode.</td>\n </tr>\n <tr>\n <td class=\"\"><span class=\"indent1\">&nbsp; &nbsp; &nbsp; bootstrap</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"js/app\"</td>\n <td class=\"\">Path to the <span class=\"inline-code\">app.js</span> bootstrap file – relative to the <span class=\"inline-code\">...&lt;theme‑name&gt;/assets/</span> directory, and omitting the file’s <span class=\"inline-code\">.js</span> extension.</td>\n </tr>\n <tr>\n <td class=\"\"><span class=\"indent1\">&nbsp; &nbsp; &nbsp; bundle_location</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"assets/js/bundle.js\"</td>\n <td class=\"\">Running the jspm bundle will minify/mangle all your JavaScript into this one file, which you point to in production. (Specify the path relative to your theme’s top-level directory.)</td>\n </tr>\n <tr>\n <td class=\"\"><span class=\"indent1\">&nbsp; &nbsp; &nbsp; jspm_packages_path</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"assets/jspm_packages\"</td>\n <td class=\"\">Path where jspm installs its packages. (Specify the path relative to your theme’s top-level directory.)</td>\n </tr> \n :jspm object removed here -->\n \n <tr>\n <td class=\"\"><a name=\"config-theme-settings\"></a>settings</td>\n <td class=\"\"></td>\n <td class=\"\"></td>\n <td class=\"\">Display-oriented key names, and values, that you can arbitrarily set for your theme. Handlebars accesses the combined settings as the context variable <span class=\"inline-code\">{{theme_settings}}</span>.<br><br>\n \nVariations also have their <a href=\"#config-var-settings\">own </a> <span class=\"inline-code\">settings</span> sections. Values that you set at the variation level will override global values that you set here (for corresponding key names, and within the scope of that variation).<br><br>\n\nIf you want to create a custom variable to use in Handlebars, either add it here within this theme-level <span class=\"inline-code\">settings</span> section, or add it down in a <a href=\"#config-var-settings\">variation-level</a> <span class=\"inline-code\">settings</span> section.<br><br>\n\nYou would access your arbitrarily named custom variable in Handlebars as <span class=\"inline-code\">{{theme_settings.&lt;variablename&gt;}}</span>.\n\nHere is an example of a custom variable in the default theme’s <span class=\"inline-code\">config.json</span>:<br><br>\n\n<span class=\"inline-code\">\"settings\": { \"homepage_featured_products_count\": 6,\n}</span><br><br>\n\nHere is the corresponding front matter in <span class=\"inline-code\">home.html</span> that calls this variable. (Note that this is pure YAML – the <span class=\"inline-code\">{{...}}</span> used to reference <span class=\"inline-code\">config.json</span> variables within pages’ front matter do not constitute a Handlebars statement:)<br><br>\n\n<pre>\n---\nproducts:\n featured:\n limit: {{theme_settings.homepage_featured_products_count}}\n---\n</pre></td>\n </tr>\n \n <tr>\n <td class=\"\"><span class=\"indent1\">homepage_new_products_count</span></td>\n <td class=\"\">Number</td>\n <td class=\"\">12</td>\n <td class=\"\">Number of products to include in home page’s New Products section.</td>\n </tr>\n \n <tr>\n <td class=\"\"><NOBR><span class=\"indent1\">homepage_&lt;section-name&gt;_count,</span></nobr><br> <NOBR><span class=\"indent1\">homepage_&lt;section-name&gt;_column_count</span></nobr></td>\n <td class=\"\">Number</td>\n <td class=\"\">[Varies]</td>\n <td class=\"\">Number of products, or columns, to include in the specified home-page section.</td>\n </tr>\n \n <tr>\n <td class=\"\"><NOBR><span class=\"indent1\">productpage_&lt;section-name&gt;_count</span></nobr></td>\n <td class=\"\">Number</td>\n <td class=\"\">[Varies]</td>\n <td class=\"\">Number of products to include in the specified section of product-details pages.</td>\n </tr>\n \n <tr>\n <td class=\"\"><NOBR><span class=\"indent1\">categorypage_products_per_page,</span></nobr><br> <NOBR><span class=\"indent1\">brandpage_products_per_page,</span></nobr><br> <NOBR><span class=\"indent1\">searchpage_products_per_page</span></nobr></td>\n <td class=\"\">Number</td>\n <td class=\"\">12</td>\n <td class=\"\">Number of products to include on each specified page type.</td>\n </tr>\n \n\t<tr>\n <td class=\"\"> <span class=\"indent1\">homepage_show_carousel</span></td>\n <td class=\"\">Boolean</td>\n <td class=\"\">true</td>\n <td class=\"\">Defines whether to display an image carousel on the home page.</td>\n </tr> \n\n\t<tr>\n <td class=\"\"> <span class=\"indent1\">show_product_quick_view</span></td>\n <td class=\"\">Boolean</td>\n <td class=\"\">true</td>\n <td class=\"\">Defines whether to offer customers product Quick View modal windows.</td>\n </tr> \n\n\t<tr>\n <td class=\"\"> <span class=\"indent1\">show_powered_by</span></td>\n <td class=\"\">Boolean</td>\n <td class=\"\">true</td>\n <td class=\"\">Defines whether to display a \"Powered by BigCommerce\" credit in the sitewide footer.</td>\n </tr> \n \n\t<tr>\n <td class=\"\"> <span class=\"indent1\"><NOBR>show_accept_amex,</nobr></span><br>\n <span class=\"indent1\"><NOBR>show_accept_visa,</nobr></span><br> <span class=\"indent1\">etc.</span>\n </td>\n <td class=\"\">Boolean</td>\n <td class=\"\">false</td>\n <td class=\"\">Each of these keys displays or hides a payment-method icon in the sitewide footer. The icons respectively identify credit-card issuers, PayPal, etc. If these keys are defined in <a href=\"/docs/schemajson-metadata-for-theme-editor\">schema.json</a>, merchants can use the <a href=\"/docs/what-is-theme-editor\">Theme Editor</a> GUI to toggle each payment icon's visibility.</td>\n </tr>\n \n <tr>\n <td class=\"\"><span class=\"indent1\">product_list_display_mode</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"grid\"</td>\n <td class=\"\">Default display mode for product lists. A <span class=\"inline-code\">\"grid\"</span> value specifies grid format. Other entries trigger list format.</td>\n </tr>\n \n <tr>\n <td class=\"\"><span class=\"indent1\">logo-position</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"center\", \"left\", \"right\"</td>\n <td class=\"\">Sets (horizontal) display alignment for store logo throughout the theme.</td>\n </tr>\n \n<!-- Begin images section/intro: -->\n <tr>\n <td class=\"\"> <span class=\"indent1\"> <a name=\"config-images\"></a> [images]</td>\n <td colspan=\"3\">\n The following keys' values define storewide dimensions for named sizes. The <span class=\"inline-code\">{{getImage}}</span> Handlebars helper can use member keys’ values to dynamically resize any images, up to a maximum target size of 4096x4096 pixels.<br><br>\n \n<!--The <span class=\"inline-code\">_images</span> key name is reserved. Child key--> Key names like <span class=\"inline-code\">\"logo_size\"</span> and <span class=\"inline-code\">\"thumb_size\"</span> are arbitrary.<br><br>\n\nFor example, this Handlebars expression:<br>\n\n<span class=\"inline-code\">{{getImage product.image \"thumb_size\"}}</span><br><br>\n\n...will output the path to a 100x100-pixel image (assuming the <span class=\"inline-code\">\"thumb_size\"</span> key retains its default value of <span class=\"inline-code\">\"100x100\"</span>).<br><br>\n\nBy defining or redefining these named sizes' values, in the format outlined below, you can automatically replicate the new sizes throughout your theme.</td>\n </tr>\n <!-- :End images intro: -->\n \n <tr>\n <td class=\"\"><span class=\"indent1\">logo_size</span></td>\n <td class=\"\">String</td>\n <td class=\"\">250x100</td>\n <td class=\"\">Key/value pair defining global (storewide) display dimensions for the store logo. The value is a string defining the width and height &ndash; in that order &ndash; in pixels.</td>\n </tr>\n \n <tr>\n <td class=\"\"><span class=\"indent1\">gallery_size</span></td>\n <td class=\"\">String</td>\n <td class=\"\">300x300</td>\n <td class=\"\">Key/value pair defining storewide display dimensions for blog images (also available for other uses).</td>\n </tr>\n\n <tr>\n <td class=\"\"><span class=\"indent1\">productgallery_size</span></td>\n <td class=\"\">String</td>\n <td class=\"\">300x300</td>\n <td class=\"\">Key/value pair defining storewide display dimensions for product-gallery images.</td>\n </tr>\n\n <tr>\n <td class=\"\"><span class=\"indent1\">product_size</span></td>\n <td class=\"\">String</td>\n <td class=\"\">500x659</td>\n <td class=\"\">Key/value pair defining storewide display dimensions for standard/medium-sized product images.</td>\n </tr>\n \n <tr>\n <td class=\"\"><span class=\"indent1\">productthumb_size</span></td>\n <td class=\"\">String</td>\n <td class=\"\">100x100</td>\n <td class=\"\">Key/value pair defining storewide display dimensions for product-image thumbnails on the product details page.</td>\n </tr>\n\n <tr>\n <td class=\"\"><span class=\"indent1\">thumb_size</span></td>\n <td class=\"\">String</td>\n <td class=\"\">100x100</td>\n <td class=\"\">Key/value pair defining storewide display dimensions for swatches, and for brand and category thumbnails.</td>\n </tr>\n \n <tr>\n <td class=\"\"><span class=\"indent1\">zoom_size</span></td>\n <td class=\"\">String</td>\n <td class=\"\">1280x1280</td>\n <td class=\"\">Key/value pair defining storewide display dimensions for zoomable product images on the product details page.</td>\n </tr>\n<!-- :End images section-->\n\n<!-- Begin image URLs section: --> \n <tr>\n <td class=\"\"><span class=\"indent1\">product_list_display_mode</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"grid\"</td>\n <td class=\"\">Default display mode for product lists. A <span class=\"inline-code\">\"grid\"</span> value specifies grid format. Other entries trigger list format.</td>\n </tr>\n\n <tr>\n <td class=\"\"> <span class=\"indent1\"> default_image_brand</td>\n <td class=\"\">String</td>\n <td class=\"\">/assets/img/BrandDefault.gif</td>\n <td class=\"\">Relative path to a default image representing brands.</td>\n </tr>\n\n <tr>\n <td class=\"\"> <span class=\"indent1\"> default_image_product</td>\n <td class=\"\">String</td>\n <td class=\"\">/assets/img/ProductDefault.gif</td>\n <td class=\"\">Relative path to a default image representing products.</td>\n </tr>\n\n <tr>\n <td class=\"\"> <span class=\"indent1\"> default_image_gift_certificate</td>\n <td class=\"\">String</td>\n <td class=\"\">/assets/img/GiftCertificate.png</td>\n <td class=\"\">Relative path to a default image representing gift certificates.</td>\n </tr>\n<!-- :End image URLs section --> \n \n<!-- Begin fonts section: -->\n <tr>\n <td class=\"\"> <a name=\"config-json-fonts\"></a><span class=\"indent1\">body-font</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"Google_Karla_400\"</td>\n <td class=\"\">Font-family keys, with corresponding values.\nKeys are named by display purpose, and keys' names should end in <span class=\"inline-code\">-font</span>. But naming is otherwise arbitrary. So you can freely define additional font families for your theme.<br>\n\n <p></p>Values should follow the format:<br> \n<pre>&lt;ProviderName&gt;_&lt;Font+FamilyName&gt;\n _&lt;OptionalWeightNumber&gt;\n</pre>\n\n<!-- <span class=\"inline-code\">&lt;ProviderName&gt;_&lt;Font+FamilyName&gt;_&lt;OptionalWeightNumber&gt;</span><br><br> -->\n\nAs in this example:<br>\n <pre>Google_Open+Sans_700</pre>\n\n<!-- <span class=\"inline-code\">Google_Open+Sans_700</span><br><br> -->\n\n ...which specifies <span class=\"inline-code\">Google Fonts</span> as the Provider, <span class=\"inline-code\">Open Sans</span> as the Font Family, and <span class=\"inline-code\">800</span> as the (optional) Weight attribute.<br><br>\n\n(<b>Note:</b> The Provider &ndash; also called \"Foundry\" &ndash; is currently limited to Google Fonts.)<br><br>\n \nStencil’s <a href=\"/docs/custom-sass-functions#FontFamily\">custom Sass functions</a> can process these keys’ values. E.g., to <span class=\"inline-code\">stencilFontFamily</span>, you could pass the (arbitrary) key name <span class=\"inline-code\">\"body-font\"</span>, and the function would process the value.<br><br>\n \nNote that Sass requires explicit typing of inputs and outputs – e.g., <span class=\"inline-code\">stencilNumber</span> defaults to pixels – so you must specify any other units. Thus, for a<br><p></p>\n\n <pre>\"font‑size\" = 3</pre>\n <p></p>\n\n<!-- <span class=\"indent1\"><span class=\"inline-code\">\"font‑size\" = 3</span></span><br> -->\n\n...this statement:<br><p></p>\n\n <pre>stencilNumber(\"font-size\",\"rem\")\n * 3</pre><p></p>\n\n<!-- <span class=\"indent1\"><span class=\"inline-code\">stencilNumber(\"font-size\",\"rem\")</span></span><br> \n <span class=\"indent1\"><span class=\"inline-code\">* 3</span></span><br> -->\n\n...will output:<br><p></p>\n\n <pre>9rem</pre>\n <p></p>\n\n<!-- <span class=\"indent1\"><span class=\"inline-code\">9rem</span></span><br><br> -->\n\n (<b>Note:</b> To enable merchants to customize your themes' fonts via <NOBR>Theme Editor</nobr>, we recommend that you rely on Google Fonts, with no more than 25 typefaces per theme.)</td>\n </tr>\n <tr>\n <td class=\"\"> <span class=\"indent1\">headings-font</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"Google_Montserrat_400\"</td>\n <td class=\"\">Arbitrary key name, and value, for a font family and (optional) weight that can be applied to headings.</td>\n </tr>\n <tr>\n <td class=\"\"> <span class=\"indent1\">logo-font</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"Google_Oswald_300\"</td>\n <td class=\"\">Arbitrary key name, and value, for a font family and (optional) weight for logo text.</td>\n </tr>\n \n <tr>\n <td class=\"\"> <span class=\"indent1\"><NOBR>fontSize-root,</nobr></span><br> <span class=\"indent1\"><NOBR>fontSize-h1</nobr>..</span><NOBR>fontSize-h6,</nobr><br> <span class=\"indent1\">etc.</span> </td>\n <td class=\"\">Number</td>\n <td class=\"\">14</td>\n <td class=\"\">Font-size keys, with corresponding values.<br><br>\n \nThese keys' values provide defaults for options selectable in the Theme Editor GUI. Also, Stencil’s <a href=\"#CustomSassFn\">custom Sass functions</a> can process these values.<br><br> \n \n Here again, these keys are named by display purpose, but arbitrarily. So you can freely define additional font sizes for your theme.</td>\n </tr>\n\n <!--\n <tr>\n <td class=\"\"> <span class=\"indent1\">fontFamily-serif</span></td>\n <td class=\"\">Integer[? Number?]</td>\n <td class=\"\">\"Georgia, serif\"</td>\n <td class=\"\">\"</td>\n </tr>\n <tr>\n <td class=\"\"> <span class=\"indent1\">fontFamily-mono</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"Menlo, monospace\"</td>\n <td class=\"\">\"</td>\n </tr>\n <tr>\n <td class=\"\"> <span class=\"indent1\">fontFamily-headings</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"Montserrat, sans-serif\"</td>\n <td class=\"\">\"</td>\n </tr>\n <tr>\n <td class=\"\"> <span class=\"indent1\">fontFamily-hero</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"Oswald, sans-serif\"</td>\n <td class=\"\">\"</td>\n </tr>\n-->\n<!-- :End fonts section -->\n \n \n<!--Begin colors section:--> \n <tr>\n <td class=\"\">\n <span class=\"indent1\"><NOBR>color-textBase</nobr></span>\n </td>\n <td class=\"\">String</td>\n <td class=\"\">\"#4f4f4f\"</td>\n <td class=\"\">Color definitions, with corresponding hex values. These keys' values provide defaults for options selectable in the Theme Editor GUI.<br><br> \n \n Also, Stencil’s <a href=\"#CustomSassFn\">custom Sass functions</a> can process these values. E.g., to <span class=\"inline-code\">stencilColor</span>, you could pass the key name <span class=\"inline-code\">\"color-textBase\"</span>, and the function would return the <span class=\"inline-code\">\"#4f4f4f\"</span> value defined here.<br><br>\n \n The keys are named by display purpose &ndash; defining consistent colors for various parts of the theme in different states. But the keys are also named arbitrarily. So you can freely name and define new color keys for your theme.<br><br> \n \n (<b>Note:</b> Only a subset of the default <span class=\"inline-code\">config.json</span> file’s color definitions are listed here.) </td>\n </tr>\n\n <tr>\n <td class=\"\"> <span class=\"indent1\"><NOBR>color-textBase--hover,</nobr></span> <span class=\"indent1\"><NOBR>color-textBase--active,</nobr></span><br> <span class=\"indent1\">..</span><br> <span class=\"indent1\"><NOBR>color-textLink--active,</nobr></span><br> <span class=\"indent1\"><NOBR>color-textHeading,</nobr></span><br> <span class=\"indent1\">etc.</span></td>\n <td class=\"\">String</td>\n <td class=\"\">[Varies]</td>\n <td class=\"\">\"</td>\n </tr>\n\n <tr>\n <td class=\"\"> <span class=\"indent1\">color-primary</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"#4f4f4f\"</td>\n <td class=\"\">\"</td>\n </tr>\n \n <tr>\n <td class=\"\"> <span class=\"indent1\">color-primaryDark</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"#454545\"</td>\n <td class=\"\">\"</td>\n </tr>\n <tr>\n <td class=\"\"> <span class=\"indent1\">color-primaryDarker</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"#2d2d2d\"</td>\n <td class=\"\">\"</td>\n </tr>\n <tr>\n <td class=\"\"> <span class=\"indent1\">color-primaryLight</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"#a5a5a5\"</td>\n <td class=\"\">\"</td>\n </tr>\n <tr>\n <td class=\"\"> <span class=\"indent1\">color-secondary</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"#ffffff\"</td>\n <td class=\"\">\"</td>\n </tr>\n <tr>\n <td class=\"\"> <span class=\"indent1\">color-secondaryDark</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"#f2f2f2\"</td>\n <td class=\"\">\"</td>\n </tr>\n <tr>\n <td class=\"\"> <span class=\"indent1\">color-secondaryDarker</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"#f2f2f2\"</td>\n <td class=\"\">\"</td>\n </tr>\n<!-- :End colors section -->\n\n<!-- Begin Optimized checkout subsection/intro: -->\n <tr>\n <td class=\"\"> <span class=\"indent1\"> <a name=\"config-uco\"></a> [Optimized Checkout]</td>\n <td colspan=\"3\">\n The following are examples of keys that define default style properties for the Optimized Checkout page. Each key/value pair here corresponds to a class in the <span class=\"inline-code\">&lt;theme‑name&gt;/assets/scss/optimized-checkout.scss</span> file.\n\t</td>\n </tr>\n <!-- :End Optimized Checkout intro. -->\n \n <tr>\n <td class=\"\"><span class=\"indent1\">optimizedCheckout-header-backgroundColor</span></td>\n <td class=\"\">String</td>\n <td class=\"\">#f7f7f7</td>\n <td class=\"\">Key/value pair defining default background color for the Optimized Checkout page's header.</td>\n </tr>\n \n <tr>\n <td class=\"\"><span class=\"indent1\">optimizedCheckout-show-backgroundImage</span></td>\n <td class=\"\">Boolean</td>\n <td class=\"\">false</td>\n <td class=\"\">Key/value pair defining whether to display a background image on the Optimized Checkout page.</td>\n </tr>\n\n <tr>\n <td class=\"\"><span class=\"indent1\">optimizedCheckout-backgroundImage</span></td>\n <td class=\"\">String</td>\n <td class=\"\"> &ndash; </td>\n <td class=\"\">Key/value pair containing file name of background image for the Optimized Checkout page.</td>\n </tr>\n\n <tr>\n <td class=\"\"><span class=\"indent1\">optimizedCheckout-backgroundImage-size</span></td>\n <td class=\"\">String</td>\n <td class=\"\">1000x400</td>\n <td class=\"\">Key/value pair defining display size for background image on the Optimized Checkout page.</td>\n </tr>\n\n <tr>\n <td class=\"\"><span class=\"indent1\">optimizedCheckout-show-logo</span></td>\n <td class=\"\">enum</td>\n <td class=\"\">none</td>\n <td class=\"\">Key/value pair defining whether to show logo on the Optimized Checkout page.</td>\n </tr>\n\n <tr>\n <td class=\"\"><span class=\"indent1\">optimizedCheckout-logo</span></td>\n <td class=\"\">String</td>\n <td class=\"\"> &ndash; </td>\n <td class=\"\">Key/value pair containing file name of background image for the Optimized Checkout page.</td>\n </tr>\n\n <tr>\n <td class=\"\"><span class=\"indent1\">[...]</span></td>\n <td class=\"\">[...]</td>\n <td class=\"\"> [...] </td>\n <td class=\"\">[...]<br> \n (Multiple similar key/value pairs. For a more-complete list of the classes available, please see <a href=\"/docs/optimized-checkout-customization\">Optimized One-Page Checkout Customization</a>.)</td>\n </tr>\n<!-- :end Optimized checkout subsection --> \n\n<!-- Begin read-only subsection-->\n <tr>\n <td class=\"\"><span class=\"indent1\" id=\"readonly\">read_only_files</span></td>\n <td class=\"\">String array</td>\n <td class=\"\"> \"/assets/scss/components/citadel\",<br> \"/assets/scss/components/foundation\",<br> \"/assets/scss/components/vendor\",<br> \"/assets/scss/vendor\",<br> \"/assets/scss/settings/citadel\",<br> \"/assets/scss/settings/foundation\",<br> \"/assets/scss/settings/vendor\",<br> \"/assets/scss/settings/normalize\" </td>\n <td class=\"\">Files and paths specified in this array will be viewable in the <a href=\"/docs/what-is-theme-editor\">Theme Editor</a> GUI, but not editable. Add any theme files/paths that you want to make read-only for store administrators using that editor.</td>\n </tr>\n<!-- :end read-only subsection -->\n \n<!-- Begin resources: section -->\n <tr>\n <td class=\"\">resources</td>\n <td class=\"\"></td>\n <td class=\"\"></td>\n <td class=\"\">Global resources, inherited by all pages located directly within your <span class=\"inline-code\">&lt;theme‑name&gt;/templates/pages/</span> <a href=\"#Pages-Subdir\">subdirectory</a>.<br><br>\n\n(This inheritance spares you from having to define them in front matter on every page. Here, the resources are defined in JSON rather than YAML format.)<br><br>\n\nYou are free to add more global resources here – for example: <span class=\"inline-code\">\"brands\": true</span> to display a brands list; or\n<span class=\"inline-code\">\"blog\": \"posts\": \"limit\": 3</span> to display the top 3 blog posts. For syntax, see <a href=\"/docs/front-matter-variables#Front-ref-global\">Front-Matter Global Attributes</a>.</td>\n </tr>\n <tr>\n <td class=\"\"> <span class=\"indent1\">cart</span></td>\n <td class=\"\">Boolean</td>\n <td class=\"\">true</td>\n <td class=\"\">Defines whether to retrieve/display cart data <!--to display a shopping-cart icon/link--> in pages' chrome.</td>\n </tr>\n <tr>\n <td class=\"\"> <span class=\"indent1\">shop_by_brand</span></td>\n <td class=\"\">Boolean</td>\n <td class=\"\">true</td>\n <td class=\"\">Defines whether to include a quick-navigation list of brands in the footer. Adding this optional filter defines how many brands to load:<br>\n <span class=\"inline-code\">limit: &lt;number&gt;</span></td>\n </tr>\n \n <tr>\n <td class=\"\"><a name=\"config-variations\"></a>variations</td>\n <td class=\"\">Object</td>\n <td class=\"\"></td>\n <td class=\"\">Collection of variation objects. Each contained object defines one variation on this overall theme. (A theme must contain at least one variation, and may contain up to four.)</td>\n </tr>\n <tr>\n <td class=\"\"> <span class=\"indent1\">name</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"Light\", \"Bold\",\"Warm\" (etc.)</td>\n <td class=\"\">An arbitrary name for this variation. This name is used in the Themes Marketplace and Theme Editor.</td>\n </tr>\n <tr>\n <td class=\"\"> <span class=\"indent1\">id</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"light\", \"bold\", \"warm\" (etc.)</td>\n <td class=\"\">A string ID for this variation. Arbitrarily named, but must be unique to this variation.\nThe Stencil framework’s database uses this unique ID to identify and process updates to variations.<br><br> \n\nWhen you submit an updated version of your theme to BigCommerce, IDs and settings for previously submitted variations must match those in previous submissions of your theme. You may add, but not remove, variations and settings in such resubmissions. You may rename variations for clarity.\n</td>\n </tr>\n <tr>\n <td class=\"\"> <span class=\"indent1\"><a name=\"config-var-settings\"></a>settings</span></td>\n <td class=\"\"></td>\n <td class=\"\"></td>\n <td class=\"\">Variation-level counterpart to this theme’s <a href=\"#config-theme-settings\">theme-level</a> <span class=\"inline-code\">\"settings\"</span> object.<br><br>\n\nValues that you set here will override <a href=\"#config-theme-settings\">theme-wide</a> values for corresponding key names, within the scope of this variation.<br><br>\n\nYou can also create custom variables here, whose scope will be limited to this variation. Syntax is the same as for <a href=\"#config-theme-settings\">theme-wide</a> custom variables.</td>\n </tr>\n <tr>\n <td class=\"\"> <span class=\"indent1\"><a name=\"config-var-meta\"></a>meta</span></td>\n <td class=\"\">Object</td>\n <td class=\"\"></td>\n <td class=\"\">Variation-level counterpart to this theme’s <a href=\"#config-theme-meta\">top-level</a> <span class=\"inline-code\">\"meta\"</span> collection.\nBigCommerce will similarly use this collection’s values when listing themes in Theme Marketplace and Theme Editor.</td>\n </tr>\n <tr>\n <td class=\"\"><span class=\"indent2\"> \"desktop_screenshot\"</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"desktop_screenshot.png\"</td>\n <td class=\"\">File name for a screenshot of this variation’s large-format layout.\nThe key name is fixed. The file-name value is arbitrary, but it must match the name of a file located in the <span class=\"inline-code\">&lt;theme‑name&gt;/meta/</span> subdirectory. <NOBR>(If you</nobr> are updating a variation, be sure to match this value to the intended file name.) The screenshot’s required dimensions are 2048 x 2600 pixels.</td>\n </tr>\n <tr>\n <td class=\"\"><span class=\"indent2\"> \"mobile_screenshot\"</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"mobile_screenshot.png\",</td>\n <td class=\"\">File name for a screenshot of this variation’s mobile-format layout.\nThe key name is fixed. The file-name value is arbitrary, but it must match the name of a file located in the <span class=\"inline-code\">&lt;theme‑name&gt;/meta/</span> subdirectory. <NOBR>(If you</nobr> are updating a variation, be sure to match this value to the intended file name.) The screenshot’s required dimensions are 304 x 540 pixels.</td>\n </tr>\n <tr>\n <td class=\"\"><span class=\"indent2\"> \"description\" </span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"This is the light style of the Stencil Theme\"</td>\n <td class=\"\">Arbitrary text description for this variation. This description will appear in Themes Marketplace and <NOBR>Theme Editor.</nobr></td>\n </tr>\n <tr>\n <td class=\"\"><span class=\"indent2\"> \"demo_url\"</span></td>\n <td class=\"\">String</td>\n <td class=\"\">\"https://stencil-light.mybigcommerce.com\"</td>\n <td class=\"\">URL of your demo store, as set up on bigcommerce.com.</td>\n </tr>\n <tr>\n <td class=\"\"><span class=\"indent2\"> \"optimized_for”</span></td>\n <td class=\"\">Array</td>\n <td class=\"\">[<NOBR>\"arts_crafts\",</nobr> <NOBR>\"animals_pets\",</nobr> <NOBR>\"automotive_industrial\",</nobr> <NOBR>\"electronics_computers\",</nobr> <NOBR>\"fashion_jewelry\",</nobr> <NOBR>\"food_beverage\",</nobr> <NOBR>\"gifts_specialty\",</nobr> <NOBR>\"health_beauty\",</nobr> <NOBR>\"home_garden\",</nobr> <NOBR>\"books_entertainment\",</nobr> <NOBR>\"sports_recreation\",</nobr> <NOBR>\"toys_games\",</nobr> <NOBR>\"multi_purpose\",</nobr> <NOBR>\"chrome_firefox_safari_ie_10\",</nobr> <NOBR>\"mobile_tablet_desktop\",</nobr> <NOBR>\"sales_discounts\",</nobr> <NOBR>\"wholesale\",</nobr> <NOBR>\"single_product\",</nobr> <NOBR>\"large_catalog\",</nobr> <NOBR>\"mobile\",</nobr> <NOBR>\"clothing\",</nobr> <NOBR>\"cosmetics\",</nobr> <NOBR>\"home_appliances\",</nobr> <NOBR>\"home_furnishings\",</nobr> <NOBR>\"movies\",</nobr> <NOBR>\"music\",</nobr> <NOBR>\"digital_downloads\",</nobr> <NOBR>\"outdoor_sports\",</nobr> <NOBR>\"hunting_fishing\",</nobr> <NOBR>\"video_games\"]</nobr></td>\n <td class=\"\">Array of metadata for Theme Marketplace searches &ndash; exact names of storefront types compatible with this theme. <NOBR>The \"Default/Examples\"</nobr> column lists the complete namespace. At least one of the values listed there must be present.</td>\n </tr>\n <tr>\n <td class=\"\"><span class=\"indent2\"> “industries\"</span></td>\n <td class=\"\">Array</td>\n <td class=\"\">[<NOBR>\"arts_crafts\",</nobr> <NOBR>\"animals_pets\",</nobr> <NOBR>\"automotive_industrial\",</nobr> <NOBR>\"electronics_computers\",</nobr> <NOBR>\"fashion_jewelry\",</nobr> <NOBR>\"food_beverage\",</nobr> <NOBR>\"gifts_specialty\",</nobr> <NOBR>\"health_beauty\",</nobr> <NOBR>\"home_garden\",</nobr> <NOBR>\"books_entertainment\",</nobr> <NOBR>\"sports_recreation\",</nobr> <NOBR>\"toys_games\"]</nobr></td>\n <td class=\"\">Array of optional metadata for <NOBR>Theme Marketplace,</nobr> where these values will be used to support faceted searches. You may submit up to four values from the complete namespace listed in the \"Default/Examples\"</nobr> column.</td>\n </tr>\n</table>" } [/block] ## <span id="config-json-reqs"> Requirements and Restrictions </span> [block:callout] { "type": "danger", "title": "Avoid Upload Errors", "body": "Please carefully check your theme against all the requirements listed here – including the required keys within the `meta` object and `variations` array. While some requirements are not enforced in local development, they will be validated (and will trigger errors) when you later [upload your theme](/docs/uploading-a-custom-theme) to BigCommerce." } [/block] Your theme's `config.json` file must meet the following requirements: * It must be named `config.json`, must reside in the root of your `<theme-name>` subdirectory (e.g.: `/cornerstone/config.json` or `/stencil/config.json`), and must be valid JSON. * The maximum allowable size for a theme's `config.json` file is 64 KB. Exceeding this limit will trigger an error upon uploading the theme to BigCommerce. * Each key's value is restricted to 64 characters. Exceeding this limit will similarly trigger an upload error. * Other than these size constraints, there is no limit on the number of keys and values that you can place in a theme's `config.json`. ### Required Themewide Keys The `config.json` file must contain at least the following keys, with appropriate values (as outlined above): * `name` * `version` * `settings` (which must itself be a valid JSON object) * `variations` (an array of at least one, and at most four, variation objects) * `meta` (an object; see specific requirements below) ### Required meta Keys The `meta` object must contain at least the following keys, with appropriate values: * `price` * `author_name` * `author_email` * `author_support_url` * `documentation_url` For illustration, here is a commented excerpt: ``` { ... "meta": { "price": 15000, // in cents; non-negative integer, minimum 0 "author_name:" "eCommerce Themes, Inc.", // Must be a string, not null "author_email": "support@example.com", // Must be a string, should be a valid email address, not null "author_support_url": "http://example.com/contactus", // Must be a string, should be a valid URL, not null "documentation_url": "http://example.com/guide", // Must be a string, limit of 255 characters, not null "composed_image": "path/to/composed.png", // Must be a string path to the composed-image file "features": [ // Array of feature strings, all of which must be in the list enumerated here: https://github.com/bigcommerce/theme-registry/blob/master/app/schemas/theme_config.json#L33 "fully_responsive" // Must include at least one feature, and no duplicate entries ] }, ... } ``` ### Required variation Keys For each variation that you choose to include in your theme (at least one is required), you must provide at least the following keys and sub-element, with appropriate values: * `name` * `id` * `meta` (an object, containing at least:) * `description` For illustration, here is a redacted excerpt from Cornerstone: ``` "variations": [ { "name": "Light", "id": "light", "meta": { "desktop_screenshot": "desktop_light.png", "mobile_screenshot": "mobile_light.png", "description": "Ideal for a wide range of businesses and brands, this design is fully responsive, simple, and ready for you to add your branding, logo, and products. ....", ... } ] ``` [block:html] { "html": "<h2> <a name=\"ConfigVideo\"></a> Video Demo </h2>\n\nWatch a video demonstration of how your edits to <span class=\"inline-code\">config.json</span> interact with other files to customize your theme: <br><p></p>\n\n<iframe src=\"https://www.youtube.com/embed/VZYZsDoEOpQ?ecver=2\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen></iframe>" } [/block]