{"_id":"59b3212960172d0024a93847","project":"55a6e72e8cc73e0d00096635","version":{"_id":"55a6e72f8cc73e0d00096638","project":"55a6e72e8cc73e0d00096635","hasReference":false,"__v":29,"hasDoc":true,"createdAt":"2015-07-15T23:05:19.125Z","releaseDate":"2015-07-15T23:05:19.125Z","categories":["55a6e7308cc73e0d00096639","55b7ed07aea7c8190058badb","5604567c0c78b00d0039b191","5605e6f23a93940d002b3e4a","5605f2bba4574a0d00811365","5605f309a4574a0d00811366","5608e3b98aedf50d0004cf8f","5608e4318aedf50d0004cf90","5608e6b5a7cc2f0d00d9754d","5608e6d331beb60d001b6560","5608f879a7cc2f0d00d97580","560b097887b71d0d000d3bd9","560b13cbafa0990d00979545","560b5cbec341310d00de2a01","560b5cd0c341310d00de2a02","566a35b81e08750d00a0c49b","566a3e8503b4b20d00d02a4a","567889d307bf6a0d0083edc8","569c8b7c15bb390d00db6f9d","56b254dc65ddf50d0076ba8f","57a8ebc4cdeea20e001d2a63","57e48a4000c8680e00fae6e7","5808216773557d0f00a1e428","58105ad54a8aa50f00aa4cba","58105bf298aea40f00afa3ba","58105f548a4aed0f00d67536","581061b898aea40f00afa3be","584b3de7e5f3a42300df6ef7","596839a75965d400155bb750"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"category":{"_id":"581061b898aea40f00afa3be","__v":0,"project":"55a6e72e8cc73e0d00096635","version":"55a6e72f8cc73e0d00096638","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-10-26T07:56:40.278Z","from_sync":false,"order":12,"slug":"conditional-logic-examples","title":"Conditional-Logic Examples"},"user":"55a6caa022cfa321008e01d6","__v":0,"parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-09-08T23:00:57.610Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":3,"body":"As shown in an [earlier Quick Start example](/docs/configjsonhandlebarsfront-matter-interactions), you can reference variables from `config.json` in a theme template's front matter. But you can also call any `config.json` variable within a template's HTML/Handlebars body, by using a Handlebars expression that precedes the variable with `theme_settings.` \n\nBelow, from Cornerstone's `templates/pages/home.html`, is a code snippet that provides three examples (line-wrapped and bolded here for emphasis):\n[block:html]\n{\n  \"html\": \"<pre>\\n&lt;div class=\\\"main full\\\"&gt;\\n    {{#if products.featured}}\\n        {{> components/products/featured products=products.featured\\n            columns=<b>theme_settings.homepage_featured_products_column_count</b>}}\\n    {{/if}}\\n\\n    {{#if products.top_sellers}}\\n        {{> components/products/top products=products.top_sellers\\n            columns=<b>theme_settings.homepage_top_products_column_count</b>}}\\n    {{/if}}\\n\\n    {{#if products.new}}\\n        {{> components/products/new products=products.new \\n            columns=<b>theme_settings.homepage_new_products_column_count</b>}}\\n    {{/if}}\\n&lt;/div&gt; </pre>\"\n}\n[/block]\nAbove, each `if` conditional statement tests whether one of the three products attributes (Featured&#160;Products, Top&#160;Sellers/Popular&#160;Brands, or New&#160;Products) is declared within this template's front matter. If so, for the corresponding section on this page, it sets the local column count to match the theme-wide `theme_settings...._column_count` value defined in `config.json`.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Related Topics\",\n  \"body\": \"See also this example:\\n* [Bringing Handlebars Context Values into JavaScript](https://stencil.bigcommerce.com/docs/customizing-javascript#HBintoJS)\\n\\nYou can also reference `config.json` values in templates' [front matter](/docs/using-yaml-front-matter) – see:\\n* [config.json–Resource Interactions](/docs/configjsonhandlebarsfront-matter-interactions#NewProductsEx).\"\n}\n[/block]","excerpt":"","slug":"theme-wide-variables-via-handlebars","type":"basic","title":"Calling Theme-Wide Variables via Handlebars"}

Calling Theme-Wide Variables via Handlebars


As shown in an [earlier Quick Start example](/docs/configjsonhandlebarsfront-matter-interactions), you can reference variables from `config.json` in a theme template's front matter. But you can also call any `config.json` variable within a template's HTML/Handlebars body, by using a Handlebars expression that precedes the variable with `theme_settings.` Below, from Cornerstone's `templates/pages/home.html`, is a code snippet that provides three examples (line-wrapped and bolded here for emphasis): [block:html] { "html": "<pre>\n&lt;div class=\"main full\"&gt;\n {{#if products.featured}}\n {{> components/products/featured products=products.featured\n columns=<b>theme_settings.homepage_featured_products_column_count</b>}}\n {{/if}}\n\n {{#if products.top_sellers}}\n {{> components/products/top products=products.top_sellers\n columns=<b>theme_settings.homepage_top_products_column_count</b>}}\n {{/if}}\n\n {{#if products.new}}\n {{> components/products/new products=products.new \n columns=<b>theme_settings.homepage_new_products_column_count</b>}}\n {{/if}}\n&lt;/div&gt; </pre>" } [/block] Above, each `if` conditional statement tests whether one of the three products attributes (Featured&#160;Products, Top&#160;Sellers/Popular&#160;Brands, or New&#160;Products) is declared within this template's front matter. If so, for the corresponding section on this page, it sets the local column count to match the theme-wide `theme_settings...._column_count` value defined in `config.json`. [block:callout] { "type": "info", "title": "Related Topics", "body": "See also this example:\n* [Bringing Handlebars Context Values into JavaScript](https://stencil.bigcommerce.com/docs/customizing-javascript#HBintoJS)\n\nYou can also reference `config.json` values in templates' [front matter](/docs/using-yaml-front-matter) – see:\n* [config.json–Resource Interactions](/docs/configjsonhandlebarsfront-matter-interactions#NewProductsEx)." } [/block]