{"_id":"58112e73ded0340f0085d06e","user":"56439928549c4d0d00d7e910","version":{"_id":"58112e71ded0340f0085d02a","project":"551e85be610f400d00837db7","__v":4,"createdAt":"2016-10-26T22:30:09.862Z","releaseDate":"2016-10-26T22:30:09.862Z","categories":["58112e72ded0340f0085d02b","58112e72ded0340f0085d02c","58112e72ded0340f0085d02d","58112e72ded0340f0085d02e","58112e72ded0340f0085d02f","58112e72ded0340f0085d030","58112e72ded0340f0085d031","58112e72ded0340f0085d032","58112e72ded0340f0085d033","58112e72ded0340f0085d034","581137cc604d3c230048b7e4","58dc367221742d0f00a73f98","590768e54669da0f00db5c0b"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"new designer","version_clean":"2.0.0","version":"2.0"},"__v":0,"category":{"_id":"58112e72ded0340f0085d02c","project":"551e85be610f400d00837db7","__v":0,"version":"58112e71ded0340f0085d02a","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-04-07T18:58:09.521Z","from_sync":false,"order":2,"slug":"theme-logic","title":"Theme Logic & Components"},"parentDoc":null,"project":"551e85be610f400d00837db7","updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-06-29T22:05:02.546Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":6,"body":"[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Heads up!\",\n  \"body\": \"Theme settings are only used by the new designer launched in June 2016. Not sure which designer you're using? [Check here](https://help.cratejoy.com/hc/en-us/articles/211679366-Do-I-have-the-new-designer-or-the-old-designer-).\"\n}\n[/block]\nThe Cratejoy Designer customizes all site content and styles via simple, configurable strings that we call \"settings\". These string settings can be accessed in any HTML or CSS file and can be reused across your theme.\n\n# Using Settings\n\nSettings can be used in any HTML and CSS file as a Jinja templated value. All settings are available in the `settings` variable on all HTML pages and CSS files. You can access the settings via the `id` specified in the `settings_schema.json` file.\n\n## HTML\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<body>\\n  <h1>{{ settings.index_header }}<h1>\\n  {{ settings.index_content }}\\n</body>\\n\\n<!-- Will render into -->\\n\\n<body>\\n  <h1>Buy our great box now!<h1>\\n  <p>\\n    You should subscribe to Boxshop today while we still have\\n    <h3>50% off your first month!</h3>\\n  </p>\\n</body>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n## CSS\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"/* Settings can be accessed using their ids */\\nbody {\\n  background-color: {{ settings.primary_color }};\\n}\\n\\n/* Settings with slashes in their ids must be accessed using [] notation */\\n.btn {\\n  color: {{ settings['primary_button/text_color']}};\\n}\\n\\n/*** Will render into ***/\\n\\nbody {\\n  background-color: #FFFFFF;\\n}\\n\\n.btn {\\n  color: #1BF402;\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\nCSS setting values cannot be used as partial values, you should use them as the full values of properties instead.\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"title\": \"Bad\",\n  \"body\": \"```\\nbody {\\n  border: 1px solid {{ settings['border_color'] }};\\n}\\n```\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"Good\",\n  \"body\": \"```\\nbody {\\n  border: 1px solid;\\n  border-color: {{ settings['border_color'] }};\\n}\\n```\"\n}\n[/block]\n## Images\n\nThe Cratejoy designer supports automatic resizing and cropping guides for images used in your designs. In order to use this feature you must use the special helper to define image areas.\n\nThis helper generates a `<div>` with a `background-image` style rather than an `<img>` tag. This ensures that the size of the image uploaded by the merchant never changes the layout of the page, even on responsive layouts. For this to work you will have to define CSS styles that set a `width` and `height`.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<body>\\n  {{ setting_helpers.image_tag('hp_hero_image', class_name='hero flex-item') }}\\n</body>\\n\\n<!-- Will render into -->\\n\\n<body>\\n  <div class=\\\"hero flex-item\\\" style=\\\"background-image: url(...)\\\"></div>\\n</body>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"settings","type":"basic","title":"Theme Component Settings"}

Theme Component Settings


[block:callout] { "type": "info", "title": "Heads up!", "body": "Theme settings are only used by the new designer launched in June 2016. Not sure which designer you're using? [Check here](https://help.cratejoy.com/hc/en-us/articles/211679366-Do-I-have-the-new-designer-or-the-old-designer-)." } [/block] The Cratejoy Designer customizes all site content and styles via simple, configurable strings that we call "settings". These string settings can be accessed in any HTML or CSS file and can be reused across your theme. # Using Settings Settings can be used in any HTML and CSS file as a Jinja templated value. All settings are available in the `settings` variable on all HTML pages and CSS files. You can access the settings via the `id` specified in the `settings_schema.json` file. ## HTML [block:code] { "codes": [ { "code": "<body>\n <h1>{{ settings.index_header }}<h1>\n {{ settings.index_content }}\n</body>\n\n<!-- Will render into -->\n\n<body>\n <h1>Buy our great box now!<h1>\n <p>\n You should subscribe to Boxshop today while we still have\n <h3>50% off your first month!</h3>\n </p>\n</body>", "language": "html" } ] } [/block] ## CSS [block:code] { "codes": [ { "code": "/* Settings can be accessed using their ids */\nbody {\n background-color: {{ settings.primary_color }};\n}\n\n/* Settings with slashes in their ids must be accessed using [] notation */\n.btn {\n color: {{ settings['primary_button/text_color']}};\n}\n\n/*** Will render into ***/\n\nbody {\n background-color: #FFFFFF;\n}\n\n.btn {\n color: #1BF402;\n}", "language": "css" } ] } [/block] CSS setting values cannot be used as partial values, you should use them as the full values of properties instead. [block:callout] { "type": "danger", "title": "Bad", "body": "```\nbody {\n border: 1px solid {{ settings['border_color'] }};\n}\n```" } [/block] [block:callout] { "type": "success", "title": "Good", "body": "```\nbody {\n border: 1px solid;\n border-color: {{ settings['border_color'] }};\n}\n```" } [/block] ## Images The Cratejoy designer supports automatic resizing and cropping guides for images used in your designs. In order to use this feature you must use the special helper to define image areas. This helper generates a `<div>` with a `background-image` style rather than an `<img>` tag. This ensures that the size of the image uploaded by the merchant never changes the layout of the page, even on responsive layouts. For this to work you will have to define CSS styles that set a `width` and `height`. [block:code] { "codes": [ { "code": "<body>\n {{ setting_helpers.image_tag('hp_hero_image', class_name='hero flex-item') }}\n</body>\n\n<!-- Will render into -->\n\n<body>\n <div class=\"hero flex-item\" style=\"background-image: url(...)\"></div>\n</body>", "language": "html" } ] } [/block]