{"__v":60,"_id":"556f6b6a9893290d00988cad","category":{"__v":12,"_id":"556f6216ebba950d008e94e6","pages":["556f6a29fc3aa80d00e1ac1a","556f6a58ebba950d008e9514","556f6a67ebba950d008e9516","556f6aee9893290d00988caa","556f76669893290d00988cf8","5581e3cc8625220d00429ec0","5583149fea39a9390022436a","5584a55bbb43b42300f11c78","5592041c5248431900977161","5631081d242cda1900198b50","5647785436961e0d005c6278","56c1f006d9e8a90d00f8890f"],"project":"555e500957fe0a0d00c8f1e7","version":"555e500957fe0a0d00c8f1ea","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-06-03T20:22:46.897Z","from_sync":false,"order":6,"slug":"advanced-setup","title":"Advanced Customization & Integrations"},"project":"555e500957fe0a0d00c8f1e7","user":"550c941bd1063b2d00359239","version":{"__v":12,"_id":"555e500957fe0a0d00c8f1ea","project":"555e500957fe0a0d00c8f1e7","createdAt":"2015-05-21T21:37:13.474Z","releaseDate":"2015-05-21T21:37:13.474Z","categories":["555e500957fe0a0d00c8f1eb","555e5fcedf54680d001800db","555e60d7df54680d001800fb","555e6766df54680d00180118","556f4d5debba950d008e9462","556f60959893290d00988c5b","556f6216ebba950d008e94e6","556f6b2aebba950d008e951a","556f71b6fc3aa80d00e1ac55","5570a30bcc189a21001ab44c","56ba3656ce5d540d00e2d789","56bce73a3ad5140d00055345"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-06-03T21:02:34.976Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Looking for Help with Crowdfunding?\",\n  \"body\": \"The customization guide for crowdfunding pages is located [here](http://tiltopen.readme.io/v1.0/docs/customizing-your-page).\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Intro\"\n}\n[/block]\n* Customizations are done via custom CSS\n* It's not possible to edit the html elements of the pre-order form directly\n* If you don't have access to someone comfortable with CSS, contact us (questions:::at:::tilt.com) and we'll get you setup with a preferred developer to lend a hand.\n\n**Here's an example of a pre-order form customized with CSS:**\n[block:image]\n{\n  \"images\": [\n    {\n      \"caption\": \"www.lily.camera\",\n      \"image\": [\n        \"https://files.readme.io/ifQQaTkZTZ2Pp1GpnuOS_Screen%20Shot%202015-06-04%20at%204.29.12%20PM.png\",\n        \"Screen Shot 2015-06-04 at 4.29.12 PM.png\",\n        \"2544\",\n        \"1410\",\n        \"#054cc4\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nTo update CSS styling, visit the \"Customize CSS\" tab from your menu bar and click on \"Embed form.\"\n\n![Customize Form](https://s3-us-west-2.amazonaws.com/sandbox-matt/customize_form.png)\n\nStyles added here will be loaded on both the checkout payment page and on the checkout confirmation page.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Themes\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"85% of teams choose to use our one of our provided themes\"\n}\n[/block]\nIn addition to our default pre-order template, we've designed several themes based on some iconic pre-order forms.\n\nFeel free to use them as-is or as starting points for further customization by your team.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Applying themes\",\n  \"body\": \"To apply a theme, paste all code from the respective theme's snippet into the \\\"Customize Embed Form\\\" section of your admin panel.\"\n}\n[/block]\n# \"Tilted\" (our default theme)\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"/*  No custom code required */\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\nExample:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/1A1zWEutR62md5ro9dEG_classic.png\",\n        \"classic.png\",\n        \"924\",\n        \"1364\",\n        \"#08a2d8\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n# \"Clean\" (inspired by Lily)\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"/* \\\"Clean\\\" theme from Tilt/Open */\\n\\n.tilt_content {\\n  background-color: #ffffff;\\n  padding-bottom: 0px;\\n}\\n\\n.tilt_content_bottom {\\n  border-top: none;\\n}\\n\\ninput {\\n  box-shadow: none;\\n  -moz-box-shadow: none;\\n  -webkit-box-shadow: none;\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\nExample:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/XDLDXYyWQIOqaNysygU1_Screen%20Shot%202015-06-04%20at%205.07.37%20PM.png\",\n        \"Screen Shot 2015-06-04 at 5.07.37 PM.png\",\n        \"926\",\n        \"1300\",\n        \"#04a4dc\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n# \"Slim\" (inspired by Coin)\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"/* \\\"Slim\\\" theme from Tilt/Open */\\n\\n.tilt_modal {\\n  max-width: 350px;\\n}\\n\\n.tilt_content {\\n  background-color: #ffffff;\\n  padding: 0px 10px 0px 10px;\\n}\\n\\n.tilt_content_bottom {\\n  border-top: none;\\n  padding-top: 0px;\\n}\\n\\n#expiration_year {\\n  margin-right: 16px;\\n}\\n\\ninput {\\n  box-shadow: none;\\n  -moz-box-shadow: none;\\n  -webkit-box-shadow: none;\\n}\\n\\n@media only screen and (max-width: 479px) {\\n  #expiration_year {\\n    margin-right: 0px;\\n  }\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\nExample:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/ZDay7GEaTGiJrTTJwTNE_Screen%20Shot%202015-06-04%20at%205.19.03%20PM.png\",\n        \"Screen Shot 2015-06-04 at 5.19.03 PM.png\",\n        \"730\",\n        \"1200\",\n        \"#04a4dc\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"A note on further customizations\",\n  \"body\": \"Our default and provided themes are designed to look great everywhere -- on desktop computers, laptops, tablets, and mobile devices.\\n\\nIf your team should choose to add additional styles, be sure to check for any changes in appearance on mobile devices -- especially if you're moving large blocks of elements around or relying on absolute positioning.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Commonly used snippets\"\n}\n[/block]\n**Below you will find a collection of commonly used CSS snippets for popular customizations:**\n\n# Charge shipping, but collect address later\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/SuDeNmGSTWK9cWbQkfj4_Screen%20Shot%202015-06-04%20at%204.31.15%20PM.png\",\n        \"Screen Shot 2015-06-04 at 4.31.15 PM.png\",\n        \"858\",\n        \"432\",\n        \"#cbcbcb\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"#payment_address_one, #payment_address_two, #payment_city, .state_input {\\n  display: none !important;\\n}\",\n      \"language\": \"css\",\n      \"name\": \"Charge shipping, but collect address later\"\n    }\n  ]\n}\n[/block]\n-------\n\n# Change the button color\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \".btn {\\n  background: #FF7754;\\n}\\n\\n.btn:active, .btn:focus {\\n  background: #FF7754;\\n}\\n\\n.btn:hover {\\n  background: #FF7754;\\n  opacity: .90;\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/0Z2GcZx2RXCzOh7vZVsT_Screen%20Shot%202015-06-04%20at%205.42.14%20PM.png\",\n        \"Screen Shot 2015-06-04 at 5.42.14 PM.png\",\n        \"876\",\n        \"484\",\n        \"#c43c34\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n# Hiding checkout calculator\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \".new-checkout-summary {\\n  display:none;\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/vyUp7Ux4SDqDEvF0lcwj_Screen%20Shot%202015-06-04%20at%205.42.41%20PM.png\",\n        \"Screen Shot 2015-06-04 at 5.42.41 PM.png\",\n        \"936\",\n        \"1210\",\n        \"#08a2d9\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n# Updating the background color of the entire form\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"\\n.tilt_content {\\n  background-color: #ADD8E6;\\n  border-radius: 0px;\\n  -webkit-border-radius: 0xp;\\n  -moz-border-radius: 0px;\\n}\\n\\n.tilt_content_bottom {\\n  border-top: none;\\n  background-color: #ADD8E6;\\n}\\n\\n.tilt_modal {\\n  border: none;\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/zmTMUDdDQEWAxTnnmlaq_Screen%20Shot%202015-06-04%20at%205.45.37%20PM.png\",\n        \"Screen Shot 2015-06-04 at 5.45.37 PM.png\",\n        \"924\",\n        \"1346\",\n        \"#0d90be\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n# Hiding the quantity selector\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"#quantity-fieldset {\\n  display:none;\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/bug9s1GiSceVHRmqJ9JR_Screen%20Shot%202015-06-04%20at%205.45.57%20PM.png\",\n        \"Screen Shot 2015-06-04 at 5.45.57 PM.png\",\n        \"930\",\n        \"1216\",\n        \"#08a2d9\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n# Updating the color of the text above & below the form\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"\\n.iframe-header-text {\\n  color: #00000;\\n}\\n\\n.iframe-subheader-text {\\n  color: #00000;\\n}\\n\\n.iframe-footer-text {\\n  color: #00000;\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\n# Adding an image to the top of your checkout form\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"coming soon!\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {}\n  ]\n}\n[/block]","excerpt":"","slug":"customization","type":"basic","title":"Pre-Order Customizations"}

Pre-Order Customizations


[block:callout] { "type": "warning", "title": "Looking for Help with Crowdfunding?", "body": "The customization guide for crowdfunding pages is located [here](http://tiltopen.readme.io/v1.0/docs/customizing-your-page)." } [/block] [block:api-header] { "type": "basic", "title": "Intro" } [/block] * Customizations are done via custom CSS * It's not possible to edit the html elements of the pre-order form directly * If you don't have access to someone comfortable with CSS, contact us (questions@tilt.com) and we'll get you setup with a preferred developer to lend a hand. **Here's an example of a pre-order form customized with CSS:** [block:image] { "images": [ { "caption": "www.lily.camera", "image": [ "https://files.readme.io/ifQQaTkZTZ2Pp1GpnuOS_Screen%20Shot%202015-06-04%20at%204.29.12%20PM.png", "Screen Shot 2015-06-04 at 4.29.12 PM.png", "2544", "1410", "#054cc4", "" ] } ] } [/block] To update CSS styling, visit the "Customize CSS" tab from your menu bar and click on "Embed form." ![Customize Form](https://s3-us-west-2.amazonaws.com/sandbox-matt/customize_form.png) Styles added here will be loaded on both the checkout payment page and on the checkout confirmation page. [block:api-header] { "type": "basic", "title": "Themes" } [/block] [block:callout] { "type": "success", "title": "85% of teams choose to use our one of our provided themes" } [/block] In addition to our default pre-order template, we've designed several themes based on some iconic pre-order forms. Feel free to use them as-is or as starting points for further customization by your team. [block:callout] { "type": "info", "title": "Applying themes", "body": "To apply a theme, paste all code from the respective theme's snippet into the \"Customize Embed Form\" section of your admin panel." } [/block] # "Tilted" (our default theme) [block:code] { "codes": [ { "code": "/* No custom code required */", "language": "css" } ] } [/block] Example: [block:image] { "images": [ { "image": [ "https://files.readme.io/1A1zWEutR62md5ro9dEG_classic.png", "classic.png", "924", "1364", "#08a2d8", "" ] } ] } [/block] # "Clean" (inspired by Lily) [block:code] { "codes": [ { "code": "/* \"Clean\" theme from Tilt/Open */\n\n.tilt_content {\n background-color: #ffffff;\n padding-bottom: 0px;\n}\n\n.tilt_content_bottom {\n border-top: none;\n}\n\ninput {\n box-shadow: none;\n -moz-box-shadow: none;\n -webkit-box-shadow: none;\n}", "language": "css" } ] } [/block] Example: [block:image] { "images": [ { "image": [ "https://files.readme.io/XDLDXYyWQIOqaNysygU1_Screen%20Shot%202015-06-04%20at%205.07.37%20PM.png", "Screen Shot 2015-06-04 at 5.07.37 PM.png", "926", "1300", "#04a4dc", "" ] } ] } [/block] # "Slim" (inspired by Coin) [block:code] { "codes": [ { "code": "/* \"Slim\" theme from Tilt/Open */\n\n.tilt_modal {\n max-width: 350px;\n}\n\n.tilt_content {\n background-color: #ffffff;\n padding: 0px 10px 0px 10px;\n}\n\n.tilt_content_bottom {\n border-top: none;\n padding-top: 0px;\n}\n\n#expiration_year {\n margin-right: 16px;\n}\n\ninput {\n box-shadow: none;\n -moz-box-shadow: none;\n -webkit-box-shadow: none;\n}\n\n@media only screen and (max-width: 479px) {\n #expiration_year {\n margin-right: 0px;\n }\n}", "language": "css" } ] } [/block] Example: [block:image] { "images": [ { "image": [ "https://files.readme.io/ZDay7GEaTGiJrTTJwTNE_Screen%20Shot%202015-06-04%20at%205.19.03%20PM.png", "Screen Shot 2015-06-04 at 5.19.03 PM.png", "730", "1200", "#04a4dc", "" ] } ] } [/block] [block:callout] { "type": "warning", "title": "A note on further customizations", "body": "Our default and provided themes are designed to look great everywhere -- on desktop computers, laptops, tablets, and mobile devices.\n\nIf your team should choose to add additional styles, be sure to check for any changes in appearance on mobile devices -- especially if you're moving large blocks of elements around or relying on absolute positioning." } [/block] [block:api-header] { "type": "basic", "title": "Commonly used snippets" } [/block] **Below you will find a collection of commonly used CSS snippets for popular customizations:** # Charge shipping, but collect address later [block:image] { "images": [ { "image": [ "https://files.readme.io/SuDeNmGSTWK9cWbQkfj4_Screen%20Shot%202015-06-04%20at%204.31.15%20PM.png", "Screen Shot 2015-06-04 at 4.31.15 PM.png", "858", "432", "#cbcbcb", "" ] } ] } [/block] [block:code] { "codes": [ { "code": "#payment_address_one, #payment_address_two, #payment_city, .state_input {\n display: none !important;\n}", "language": "css", "name": "Charge shipping, but collect address later" } ] } [/block] ------- # Change the button color [block:code] { "codes": [ { "code": ".btn {\n background: #FF7754;\n}\n\n.btn:active, .btn:focus {\n background: #FF7754;\n}\n\n.btn:hover {\n background: #FF7754;\n opacity: .90;\n}", "language": "css" } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/0Z2GcZx2RXCzOh7vZVsT_Screen%20Shot%202015-06-04%20at%205.42.14%20PM.png", "Screen Shot 2015-06-04 at 5.42.14 PM.png", "876", "484", "#c43c34", "" ] } ] } [/block] # Hiding checkout calculator [block:code] { "codes": [ { "code": ".new-checkout-summary {\n display:none;\n}", "language": "css" } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/vyUp7Ux4SDqDEvF0lcwj_Screen%20Shot%202015-06-04%20at%205.42.41%20PM.png", "Screen Shot 2015-06-04 at 5.42.41 PM.png", "936", "1210", "#08a2d9", "" ] } ] } [/block] # Updating the background color of the entire form [block:code] { "codes": [ { "code": "\n.tilt_content {\n background-color: #ADD8E6;\n border-radius: 0px;\n -webkit-border-radius: 0xp;\n -moz-border-radius: 0px;\n}\n\n.tilt_content_bottom {\n border-top: none;\n background-color: #ADD8E6;\n}\n\n.tilt_modal {\n border: none;\n}", "language": "css" } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/zmTMUDdDQEWAxTnnmlaq_Screen%20Shot%202015-06-04%20at%205.45.37%20PM.png", "Screen Shot 2015-06-04 at 5.45.37 PM.png", "924", "1346", "#0d90be", "" ] } ] } [/block] # Hiding the quantity selector [block:code] { "codes": [ { "code": "#quantity-fieldset {\n display:none;\n}", "language": "css" } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/bug9s1GiSceVHRmqJ9JR_Screen%20Shot%202015-06-04%20at%205.45.57%20PM.png", "Screen Shot 2015-06-04 at 5.45.57 PM.png", "930", "1216", "#08a2d9", "" ] } ] } [/block] # Updating the color of the text above & below the form [block:code] { "codes": [ { "code": "\n.iframe-header-text {\n color: #00000;\n}\n\n.iframe-subheader-text {\n color: #00000;\n}\n\n.iframe-footer-text {\n color: #00000;\n}", "language": "css" } ] } [/block] # Adding an image to the top of your checkout form [block:code] { "codes": [ { "code": "coming soon!", "language": "css" } ] } [/block] [block:image] { "images": [ {} ] } [/block]