{"__v":2,"_id":"56ba37ccb77e261700bc148d","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"},"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":"2016-02-09T19:02:36.296Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":5,"body":"[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"In order to install the Tilt Pro pre-orders form, you'll be touching the Liquid template code of your Shopify site directly. It's a straightforward process, but you should feel comfortable copying and pasting HTML snippets onto the page and tweaking the HTML of existing elements.\",\n  \"title\": \"Template modification required\"\n}\n[/block]\n# Step 1: Grab your customized data attribute from your Tilt Pro admin panel\n\nYou can find this on your pre-order form's \"/embed-instructions\" page. (It's #1 under the \"Embed Instructions\" header).\n\nKeep this tab open, we'll refer to your customized data attribute later.\n\n# Step 2. Log into your Shopify admin panel and click the \"Themes\" tab in the navigation bar.\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/pfMoNaGEQ5ey5rQ8N0pp_themes.png\",\n        \"themes.png\",\n        \"362\",\n        \"456\",\n        \"#31333a\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n# Step 3: Open up the theme.liquid (or your site's equivalent layout) template\n\nThis is the file that contains the HTML structure of your page. If you see some form of \"<!doctype html>\" at the top of the page, you're in the right spot!\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/HnUQOP1iTLCYjLldO5wL_Screen%20Shot%202015-02-03%20at%2011.05.02%20AM.png\",\n        \"Screen Shot 2015-02-03 at 11.05.02 AM.png\",\n        \"436\",\n        \"188\",\n        \"#37658b\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nIn theme.liquid, paste the following code snippet immediately before the closing </body> tag:\n\n```<script type=\"text/javascript\" src=\"https://pro.tilt.com/checkout-1-3-0.js\"></script>```\n\nIt should look something like this:\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/tQKcfvsCRJqSMoV6A1v1_Screen%20Shot%202015-02-03%20at%2011.05.06%20AM.png\",\n        \"Screen Shot 2015-02-03 at 11.05.06 AM.png\",\n        \"1726\",\n        \"486\",\n        \"#af1f1f\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nSave the file and we're halfway there!\n\n*Note: You won't see any visual change to your site from adding this snippet.* \n\n# Step 4: Adding the button trigger\n\nOpen up the file which holds the code for the button you'd like to have trigger your Tilt Pro Pre-Orders form. Depending on how you've set up your site, this is usually a template named \"product.liquid\" or similar.\n\nLook for an input with an attribute of type=\"submit.\" Once you find this, grab the customized data attribute from step 1 above and copy and paste it into the input tag.\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/ofBHZIXQIWoKsaw5LADA_Screen%20Shot%202015-02-03%20at%2011.05.19%20AM.png\",\n        \"Screen Shot 2015-02-03 at 11.05.19 AM.png\",\n        \"1622\",\n        \"196\",\n        \"#ae2324\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nRepeat this process of adding your customized data attribute for each button on your Shopify site that you'd like to trigger your Tilt Pro Pre-Orders form.\n\nAll done! Make sure to save the updates to your template and head to your Shopify 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":"shopify-installation-pre-orders","type":"basic","title":"Shopify Installation (Pre-Orders)"}

Shopify Installation (Pre-Orders)


[block:callout] { "type": "warning", "body": "In order to install the Tilt Pro pre-orders form, you'll be touching the Liquid template code of your Shopify site directly. It's a straightforward process, but you should feel comfortable copying and pasting HTML snippets onto the page and tweaking the HTML of existing elements.", "title": "Template modification required" } [/block] # Step 1: Grab your customized data attribute from your Tilt Pro admin panel You can find this on your pre-order form's "/embed-instructions" page. (It's #1 under the "Embed Instructions" header). Keep this tab open, we'll refer to your customized data attribute later. # Step 2. Log into your Shopify admin panel and click the "Themes" tab in the navigation bar. [block:image] { "images": [ { "image": [ "https://files.readme.io/pfMoNaGEQ5ey5rQ8N0pp_themes.png", "themes.png", "362", "456", "#31333a", "" ] } ] } [/block] # Step 3: Open up the theme.liquid (or your site's equivalent layout) template This is the file that contains the HTML structure of your page. If you see some form of "<!doctype html>" at the top of the page, you're in the right spot! [block:image] { "images": [ { "image": [ "https://files.readme.io/HnUQOP1iTLCYjLldO5wL_Screen%20Shot%202015-02-03%20at%2011.05.02%20AM.png", "Screen Shot 2015-02-03 at 11.05.02 AM.png", "436", "188", "#37658b", "" ] } ] } [/block] In theme.liquid, paste the following code snippet immediately before the closing </body> tag: ```<script type="text/javascript" src="https://pro.tilt.com/checkout-1-3-0.js"></script>``` It should look something like this: [block:image] { "images": [ { "image": [ "https://files.readme.io/tQKcfvsCRJqSMoV6A1v1_Screen%20Shot%202015-02-03%20at%2011.05.06%20AM.png", "Screen Shot 2015-02-03 at 11.05.06 AM.png", "1726", "486", "#af1f1f", "" ] } ] } [/block] Save the file and we're halfway there! *Note: You won't see any visual change to your site from adding this snippet.* # Step 4: Adding the button trigger Open up the file which holds the code for the button you'd like to have trigger your Tilt Pro Pre-Orders form. Depending on how you've set up your site, this is usually a template named "product.liquid" or similar. Look for an input with an attribute of type="submit." Once you find this, grab the customized data attribute from step 1 above and copy and paste it into the input tag. [block:image] { "images": [ { "image": [ "https://files.readme.io/ofBHZIXQIWoKsaw5LADA_Screen%20Shot%202015-02-03%20at%2011.05.19%20AM.png", "Screen Shot 2015-02-03 at 11.05.19 AM.png", "1622", "196", "#ae2324", "" ] } ] } [/block] Repeat this process of adding your customized data attribute for each button on your Shopify site that you'd like to trigger your Tilt Pro Pre-Orders form. All done! Make sure to save the updates to your template and head to your Shopify 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.