{"__v":29,"_id":"56904ba86c49d70d00f181b5","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-01-08T23:52:08.335Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":true,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":6,"body":"[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"1. Create your Shopify Site\"\n}\n[/block]\nBefore creating your Embeddable Crowdfunding campaign with Tilt Pro, head to [Shopify.com](https://www.shopify.com/?ref=tilt-com) and create the store where you'll embed the campaign.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/VzLPtHatS9WsrXe3Mx02_shopify_signup.gif\",\n        \"shopify_signup.gif\",\n        \"1000\",\n        \"625\",\n        \"#af8488\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Tilt recommends the Shopify \\\"Pro\\\" plan\",\n  \"body\": \"While Tilt Pro works with any Shopify plan, Tilt recommends​ signing up for Shopify's Pro plan to take full advantage of their powerful platform and analytics tools.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"2. Create an Embeddable Crowdfunding campaign on Tilt Pro\"\n}\n[/block]\nOnce you've created your Shopify site, head to [tilt.com/pro](https://tilt.com/pro) to create your Tilt Pro account and an Embeddable Crowdfunding campaign for your product.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/cQyc59tCQsWQVVcshrTo_select_embeddable_crowdfunding.png\",\n        \"select_embeddable_crowdfunding.png\",\n        \"2120\",\n        \"902\",\n        \"#09a2dc\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nAfter creating your Embeddable Crowdfunding campaign, you'll land on the Tilt Pro Embed Instructions page.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Pro Tip!\",\n  \"body\": \"On the embed instructions page, you can play with a full working demo of your Embeddable Campaign.\\n\\nWhen you're in test mode, we pre-fill the checkout payment form with a test credit card. With this test card, you can test the full contributor experience -- from reward selection to [custom confirmation and referral notification emails](https://docs.tilt.com/docs/customizing-your-emails).\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"3. Add the Tilt installation code to your Shopify product page\"\n}\n[/block]\nAfter creating your Embeddable Crowdfunding campaign, you'll land on the Tilt Pro Embed Instructions page.\n\nOn the right side of this page are both the simplified and advanced installation instructions. Both installation methods allow for full customization of the visual styling via [the admin panel](https://docs.tilt.com/docs/customization).\n\nClick the \"Copy to clipboard\" link next to the respective installation instructions to prepare them for entry on your Shopify site.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/sCV4EWRViK0r2fBnCJYg_Screen%20Shot%202016-01-11%20at%207.12.53%20PM.png\",\n        \"Screen Shot 2016-01-11 at 7.12.53 PM.png\",\n        \"2548\",\n        \"1554\",\n        \"#d72a2d\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nOnce copied to your clipboard, head to the \"Themes\" section of your Shopify store and click on the \"Customize Theme\" button.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/FuBsI3IpSYHdhbsegXng_Screen%20Shot%202016-01-11%20at%207.14.34%20PM.png\",\n        \"Screen Shot 2016-01-11 at 7.14.34 PM.png\",\n        \"2560\",\n        \"1554\",\n        \"#e04e46\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nNext, select \"Edit HTML/CSS\" from the \"Theme Options\" dropdown to enter the code editor.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/1u91m4ZgRJC9Fi8BzDbR_Screen%20Shot%202016-01-11%20at%207.16.31%20PM.png\",\n        \"Screen Shot 2016-01-11 at 7.16.31 PM.png\",\n        \"2560\",\n        \"1550\",\n        \"#6a4231\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nThe last step here is to paste your Tilt Pro-provided embed code into the template where you'd like your Embeddable Crowdfunding campaign to appear.\n\nFor example, to render the Embeddable Crowdfunding progress bar on the product page, we'll add the Tilt embed code to the respective ```product.liquid``` template.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/26HEBcX6QR2Xk74sKFQH_Screen%20Shot%202016-01-11%20at%207.23.05%20PM.png\",\n        \"Screen Shot 2016-01-11 at 7.23.05 PM.png\",\n        \"2776\",\n        \"1778\",\n        \"#9f3c31\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nOnce installed, additional styles can be added to customize the crowdfunding elements to match your underlying Shopify site styles and branding.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/Gz4DAUUaTRSVlhzAkOEe_example%20CF%20final.gif\",\n        \"example CF final.gif\",\n        \"1000\",\n        \"625\",\n        \"#a4634f\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"Your progress bar will update in real time\",\n  \"body\": \"When a successful contribution is made, the progress bar for your item will update instantly - no need to refresh the page to see contributions appear.\"\n}\n[/block]","excerpt":"Add a Tilt Pro Embeddable Crowdfunding campaign to your existing Shopify store in just a few minutes.","slug":"shopify-installation-instructions","type":"basic","title":"Shopify Installation (Embeddable Crowdfunding)"}

Shopify Installation (Embeddable Crowdfunding)

Add a Tilt Pro Embeddable Crowdfunding campaign to your existing Shopify store in just a few minutes.

[block:api-header] { "type": "basic", "title": "1. Create your Shopify Site" } [/block] Before creating your Embeddable Crowdfunding campaign with Tilt Pro, head to [Shopify.com](https://www.shopify.com/?ref=tilt-com) and create the store where you'll embed the campaign. [block:image] { "images": [ { "image": [ "https://files.readme.io/VzLPtHatS9WsrXe3Mx02_shopify_signup.gif", "shopify_signup.gif", "1000", "625", "#af8488", "" ] } ] } [/block] [block:callout] { "type": "info", "title": "Tilt recommends the Shopify \"Pro\" plan", "body": "While Tilt Pro works with any Shopify plan, Tilt recommends​ signing up for Shopify's Pro plan to take full advantage of their powerful platform and analytics tools." } [/block] [block:api-header] { "type": "basic", "title": "2. Create an Embeddable Crowdfunding campaign on Tilt Pro" } [/block] Once you've created your Shopify site, head to [tilt.com/pro](https://tilt.com/pro) to create your Tilt Pro account and an Embeddable Crowdfunding campaign for your product. [block:image] { "images": [ { "image": [ "https://files.readme.io/cQyc59tCQsWQVVcshrTo_select_embeddable_crowdfunding.png", "select_embeddable_crowdfunding.png", "2120", "902", "#09a2dc", "" ] } ] } [/block] After creating your Embeddable Crowdfunding campaign, you'll land on the Tilt Pro Embed Instructions page. [block:callout] { "type": "info", "title": "Pro Tip!", "body": "On the embed instructions page, you can play with a full working demo of your Embeddable Campaign.\n\nWhen you're in test mode, we pre-fill the checkout payment form with a test credit card. With this test card, you can test the full contributor experience -- from reward selection to [custom confirmation and referral notification emails](https://docs.tilt.com/docs/customizing-your-emails)." } [/block] [block:api-header] { "type": "basic", "title": "3. Add the Tilt installation code to your Shopify product page" } [/block] After creating your Embeddable Crowdfunding campaign, you'll land on the Tilt Pro Embed Instructions page. On the right side of this page are both the simplified and advanced installation instructions. Both installation methods allow for full customization of the visual styling via [the admin panel](https://docs.tilt.com/docs/customization). Click the "Copy to clipboard" link next to the respective installation instructions to prepare them for entry on your Shopify site. [block:image] { "images": [ { "image": [ "https://files.readme.io/sCV4EWRViK0r2fBnCJYg_Screen%20Shot%202016-01-11%20at%207.12.53%20PM.png", "Screen Shot 2016-01-11 at 7.12.53 PM.png", "2548", "1554", "#d72a2d", "" ] } ] } [/block] Once copied to your clipboard, head to the "Themes" section of your Shopify store and click on the "Customize Theme" button. [block:image] { "images": [ { "image": [ "https://files.readme.io/FuBsI3IpSYHdhbsegXng_Screen%20Shot%202016-01-11%20at%207.14.34%20PM.png", "Screen Shot 2016-01-11 at 7.14.34 PM.png", "2560", "1554", "#e04e46", "" ] } ] } [/block] Next, select "Edit HTML/CSS" from the "Theme Options" dropdown to enter the code editor. [block:image] { "images": [ { "image": [ "https://files.readme.io/1u91m4ZgRJC9Fi8BzDbR_Screen%20Shot%202016-01-11%20at%207.16.31%20PM.png", "Screen Shot 2016-01-11 at 7.16.31 PM.png", "2560", "1550", "#6a4231", "" ] } ] } [/block] The last step here is to paste your Tilt Pro-provided embed code into the template where you'd like your Embeddable Crowdfunding campaign to appear. For example, to render the Embeddable Crowdfunding progress bar on the product page, we'll add the Tilt embed code to the respective ```product.liquid``` template. [block:image] { "images": [ { "image": [ "https://files.readme.io/26HEBcX6QR2Xk74sKFQH_Screen%20Shot%202016-01-11%20at%207.23.05%20PM.png", "Screen Shot 2016-01-11 at 7.23.05 PM.png", "2776", "1778", "#9f3c31", "" ] } ] } [/block] Once installed, additional styles can be added to customize the crowdfunding elements to match your underlying Shopify site styles and branding. [block:image] { "images": [ { "image": [ "https://files.readme.io/Gz4DAUUaTRSVlhzAkOEe_example%20CF%20final.gif", "example CF final.gif", "1000", "625", "#a4634f", "" ] } ] } [/block] [block:callout] { "type": "success", "title": "Your progress bar will update in real time", "body": "When a successful contribution is made, the progress bar for your item will update instantly - no need to refresh the page to see contributions appear." } [/block]