{"__v":0,"_id":"58112e72ded0340f0085d046","api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"body":"Cratejoy themes give you the scaffolding to create a fully customizable subscription or e-commerce store. Our themes are ready to serve your customers from the moment you publish them, but if you’re the kind of person who likes to stand apart from the pack, we’ve got you covered.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Theme Structure\"\n}\n[/block]\nCratejoy themes are built with basic HTML, CSS, and JavaScript organized into small blocks that we call components. Each page on your site is simply a list of components, which each have their own code.\n\nIf you open the code editor for you theme, under the `components` folder you will see a directory for each page. Each of these subdirectories container folders for each of the components that make up that page.\n\n### Minimal File Structure\n\nA minimal theme follows this structure:\n\n* components/\n  * index/\n    * Hero/\n      * component.html\n      * component.css\n      * component.js (optional)\n   * ...\n* images/\n* html/\n  * base.html\n* js/\n* css/\n\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Theme Page Routes\"\n}\n[/block]\nCratejoy automatically translates urls to html templates on disk.\n\nSo for instance when a visitor to your site goes to _yourstore.com/subscribe_ Cratejoy automatically loads and displays the contents of the HTML file in your theme ``html/subscribe.html``\n\n# Default Routes\n\nThese are the default routes that are provided and expected on every Cratejoy theme.\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"URL\",\n    \"h-1\": \"Template File Rendered\",\n    \"0-0\": \"_yourstore.com_\",\n    \"0-1\": \"``/html/index.html``\",\n    \"1-0\": \"_yourstore.com/checkout_\",\n    \"1-1\": \"``/html/checkout.html``\",\n    \"2-0\": \"_yourstore.com/subscribe_\",\n    \"2-1\": \"``/html/subscribe.html``\",\n    \"3-0\": \"_yourstore.com/customer/login_\",\n    \"3-1\": \"``/html/customer/login.html``\",\n    \"4-0\": \"_yourstore.com/customer/order_\",\n    \"4-1\": \"``/html/customer/order.html``\",\n    \"5-0\": \"_yourstore.com/customer/thank_\\\\__you_\",\n    \"5-1\": \"``/html/customer/thank_you.html``\",\n    \"6-0\": \"_yourstore.com/customer/edit_\",\n    \"6-1\": \"``/html/customer/edit.html``\",\n    \"7-0\": \"_yourstore.com/customer/account_\",\n    \"7-1\": \"``/html/customer/account.html``\",\n    \"8-0\": \"_yourstore.com/customer/forgot_\\\\__password_\",\n    \"8-1\": \"``/html/customer/forgot_password.html``\",\n    \"9-0\": \"_yourstore.com/customer/password_\\\\__reset_\",\n    \"9-1\": \"``/html/customer/password_reset.html``\",\n    \"10-0\": \"_yourstore.com/customer/change_\\\\__password_\",\n    \"10-1\": \"``/html/customer/change_password.html``\",\n    \"11-0\": \"_yourstore.com/shop_\",\n    \"11-1\": \"``/html/shop/listing.html``\",\n    \"12-0\": \"_yourstore.com/shop/all/_\",\n    \"12-1\": \"``/html/shop/listing.html``\"\n  },\n  \"cols\": 2,\n  \"rows\": 13\n}\n[/block]\n# Component List URLs\n\nEach subdirectory in the `components` directory also represents a page, built from the components inside inside that directory. For example the `components/about` directory has a folder for each component in that is on the about page at the _yourstore.com/about_ URL.\n\n# Arguments\n\nCertain routes accept arguments which modify the behavior of the page. Of note are the subscribe and product routes. Their arguments specify which products are loaded and displayed in the template file.\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"_yourstore.com/subscribe/2353_\\\\__Basic+Plan_\",\n    \"h-0\": \"URL\",\n    \"h-1\": \"Arguments\",\n    \"1-0\": \"_yourstore.com/shop/product/44941_\\\\__Product+One_\",\n    \"h-2\": \"Template File Rendered\",\n    \"0-1\": \"2353_Basic+Plan\",\n    \"0-2\": \"``/html/subscribe.html``\",\n    \"1-1\": \"44941_Product+One\",\n    \"0-3\": \"2353_Basic+Plan\",\n    \"1-2\": \"``/html/shop/product.html``\"\n  },\n  \"cols\": 3,\n  \"rows\": 2\n}\n[/block]","category":"58112e72ded0340f0085d02b","createdAt":"2015-04-03T12:21:19.980Z","excerpt":"This document describes the overall file structure of a Cratejoy theme","githubsync":"","hidden":false,"isReference":false,"link_external":false,"link_url":"","next":{"pages":[],"description":""},"order":0,"parentDoc":null,"project":"551e85be610f400d00837db7","slug":"getting-started","sync_unique":"","title":"Theme Structure","type":"basic","updates":[],"user":"551e85707ca3030d00be0c07","version":"58112e71ded0340f0085d02a","childrenPages":[]}

Theme Structure

This document describes the overall file structure of a Cratejoy theme

Cratejoy themes give you the scaffolding to create a fully customizable subscription or e-commerce store. Our themes are ready to serve your customers from the moment you publish them, but if you’re the kind of person who likes to stand apart from the pack, we’ve got you covered. [block:api-header] { "type": "basic", "title": "Theme Structure" } [/block] Cratejoy themes are built with basic HTML, CSS, and JavaScript organized into small blocks that we call components. Each page on your site is simply a list of components, which each have their own code. If you open the code editor for you theme, under the `components` folder you will see a directory for each page. Each of these subdirectories container folders for each of the components that make up that page. ### Minimal File Structure A minimal theme follows this structure: * components/ * index/ * Hero/ * component.html * component.css * component.js (optional) * ... * images/ * html/ * base.html * js/ * css/ [block:api-header] { "type": "basic", "title": "Theme Page Routes" } [/block] Cratejoy automatically translates urls to html templates on disk. So for instance when a visitor to your site goes to _yourstore.com/subscribe_ Cratejoy automatically loads and displays the contents of the HTML file in your theme ``html/subscribe.html`` # Default Routes These are the default routes that are provided and expected on every Cratejoy theme. [block:parameters] { "data": { "h-0": "URL", "h-1": "Template File Rendered", "0-0": "_yourstore.com_", "0-1": "``/html/index.html``", "1-0": "_yourstore.com/checkout_", "1-1": "``/html/checkout.html``", "2-0": "_yourstore.com/subscribe_", "2-1": "``/html/subscribe.html``", "3-0": "_yourstore.com/customer/login_", "3-1": "``/html/customer/login.html``", "4-0": "_yourstore.com/customer/order_", "4-1": "``/html/customer/order.html``", "5-0": "_yourstore.com/customer/thank_\\__you_", "5-1": "``/html/customer/thank_you.html``", "6-0": "_yourstore.com/customer/edit_", "6-1": "``/html/customer/edit.html``", "7-0": "_yourstore.com/customer/account_", "7-1": "``/html/customer/account.html``", "8-0": "_yourstore.com/customer/forgot_\\__password_", "8-1": "``/html/customer/forgot_password.html``", "9-0": "_yourstore.com/customer/password_\\__reset_", "9-1": "``/html/customer/password_reset.html``", "10-0": "_yourstore.com/customer/change_\\__password_", "10-1": "``/html/customer/change_password.html``", "11-0": "_yourstore.com/shop_", "11-1": "``/html/shop/listing.html``", "12-0": "_yourstore.com/shop/all/_", "12-1": "``/html/shop/listing.html``" }, "cols": 2, "rows": 13 } [/block] # Component List URLs Each subdirectory in the `components` directory also represents a page, built from the components inside inside that directory. For example the `components/about` directory has a folder for each component in that is on the about page at the _yourstore.com/about_ URL. # Arguments Certain routes accept arguments which modify the behavior of the page. Of note are the subscribe and product routes. Their arguments specify which products are loaded and displayed in the template file. [block:parameters] { "data": { "0-0": "_yourstore.com/subscribe/2353_\\__Basic+Plan_", "h-0": "URL", "h-1": "Arguments", "1-0": "_yourstore.com/shop/product/44941_\\__Product+One_", "h-2": "Template File Rendered", "0-1": "2353_Basic+Plan", "0-2": "``/html/subscribe.html``", "1-1": "44941_Product+One", "0-3": "2353_Basic+Plan", "1-2": "``/html/shop/product.html``" }, "cols": 3, "rows": 2 } [/block]