{"__v":3,"_id":"56ba37bbc275570d00ce7066","category":{"__v":5,"_id":"56ba3656ce5d540d00e2d789","pages":["56ba379a8fce0e1900d992c3","56ba37bbc275570d00ce7066","56ba37ccb77e261700bc148d","56ba3a63984f030d00713a49","56ba46b18cf7c921000966d0"],"project":"555e500957fe0a0d00c8f1e7","version":"555e500957fe0a0d00c8f1ea","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-02-09T18:56:22.257Z","from_sync":false,"order":2,"slug":"installation-instructions","title":"Installation Instructions"},"parentDoc":null,"project":"555e500957fe0a0d00c8f1e7","user":"550c941bd1063b2d00359239","version":{"__v":13,"_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","592874f7bdc27e1b00e571b1"],"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":"2016-02-09T19:02:19.134Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":true,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"You’ll use the '[Code Block](http://help.squarespace.com/guides/using-the-code-block)' feature of Squarespace to add in your pre-order button.\n\n# Step 1: Add a code block on the Squarespace page where you’d like to add a pre-order button\n\nInside the code block, create a button or link element with the custom data attribute found in step 1 of the Embed Instructions in your admin panel.\n\nExample:\n```<button data-ct-checkout=\"site.your-unique-campaign-slug\">Preorder Now!</button>```\n\nIf you'd like to use a pre-styled button, you can use the below format instead:\n\n```\n<button data-ct-checkout=\"site.your-unique-campaign-slug\" style=\"box-shadow: rgb(41, 187, 255) 0px -3px 7px 0px inset; border-radius: 5px; border: 1px solid rgb(11, 14, 7); display: inline-block; cursor: pointer; color: rgb(255, 255, 255); font-family: Arial; font-size: 20px; padding: 17px 58px; text-decoration-line: none; text-shadow: rgb(38, 54, 102) 0px 1px 0px; background: linear-gradient(rgb(45, 171, 249) 5%, rgb(6, 136, 250) 100%) rgb(45, 171, 249);\">Preorder Now!</button>\n```\n\nRepeat this process of adding your customized data attribute for each button in your code block site that you'd like to trigger your Tilt Pro Pre-Orders form.\n\n# Step 2: Include the following snippet at the bottom of your code block content\n\n```<script type=\"text/javascript\" src=\"https://open.tilt.com/checkout-1-1-0.js\"></script>```\n\n\nAll done! Make sure to save the updates to your template and head to your Squarespace page to check out the integration.\n\nRunning into any issues? [Shoot us a note](mailto:questions:::at:::tilt.com) and we'll be able to help you finish the installation.","excerpt":"","slug":"squarespace-installation","type":"basic","title":"Squarespace Installation (Pre-Orders)"}

Squarespace Installation (Pre-Orders)


You’ll use the '[Code Block](http://help.squarespace.com/guides/using-the-code-block)' feature of Squarespace to add in your pre-order button. # Step 1: Add a code block on the Squarespace page where you’d like to add a pre-order button Inside the code block, create a button or link element with the custom data attribute found in step 1 of the Embed Instructions in your admin panel. Example: ```<button data-ct-checkout="site.your-unique-campaign-slug">Preorder Now!</button>``` If you'd like to use a pre-styled button, you can use the below format instead: ``` <button data-ct-checkout="site.your-unique-campaign-slug" style="box-shadow: rgb(41, 187, 255) 0px -3px 7px 0px inset; border-radius: 5px; border: 1px solid rgb(11, 14, 7); display: inline-block; cursor: pointer; color: rgb(255, 255, 255); font-family: Arial; font-size: 20px; padding: 17px 58px; text-decoration-line: none; text-shadow: rgb(38, 54, 102) 0px 1px 0px; background: linear-gradient(rgb(45, 171, 249) 5%, rgb(6, 136, 250) 100%) rgb(45, 171, 249);">Preorder Now!</button> ``` Repeat this process of adding your customized data attribute for each button in your code block site that you'd like to trigger your Tilt Pro Pre-Orders form. # Step 2: Include the following snippet at the bottom of your code block content ```<script type="text/javascript" src="https://open.tilt.com/checkout-1-1-0.js"></script>``` All done! Make sure to save the updates to your template and head to your Squarespace page to check out the integration. Running into any issues? [Shoot us a note](mailto:questions@tilt.com) and we'll be able to help you finish the installation.