{"_id":"5660daef89e82f0d008f6823","parentDoc":null,"__v":45,"user":"55a6caa022cfa321008e01d6","version":{"_id":"55a6e72f8cc73e0d00096638","project":"55a6e72e8cc73e0d00096635","hasReference":false,"__v":29,"hasDoc":true,"createdAt":"2015-07-15T23:05:19.125Z","releaseDate":"2015-07-15T23:05:19.125Z","categories":["55a6e7308cc73e0d00096639","55b7ed07aea7c8190058badb","5604567c0c78b00d0039b191","5605e6f23a93940d002b3e4a","5605f2bba4574a0d00811365","5605f309a4574a0d00811366","5608e3b98aedf50d0004cf8f","5608e4318aedf50d0004cf90","5608e6b5a7cc2f0d00d9754d","5608e6d331beb60d001b6560","5608f879a7cc2f0d00d97580","560b097887b71d0d000d3bd9","560b13cbafa0990d00979545","560b5cbec341310d00de2a01","560b5cd0c341310d00de2a02","566a35b81e08750d00a0c49b","566a3e8503b4b20d00d02a4a","567889d307bf6a0d0083edc8","569c8b7c15bb390d00db6f9d","56b254dc65ddf50d0076ba8f","57a8ebc4cdeea20e001d2a63","57e48a4000c8680e00fae6e7","5808216773557d0f00a1e428","58105ad54a8aa50f00aa4cba","58105bf298aea40f00afa3ba","58105f548a4aed0f00d67536","581061b898aea40f00afa3be","584b3de7e5f3a42300df6ef7","596839a75965d400155bb750"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"category":{"_id":"560b5cbec341310d00de2a01","pages":["560b5d0b3616ac17004f1c99","560b5d405148ba0d009bd0c9","560b5d62af40a70d003df332","560b5d953bcbd80d0077d0fd","560b5fa83616ac17004f1c9d","569c8c15d326c80d0068f7b7","56d37d35d3f4650b007495ea","56d4ed5f8001e30b0089700c"],"__v":8,"project":"55a6e72e8cc73e0d00096635","version":"55a6e72f8cc73e0d00096638","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-30T03:53:34.449Z","from_sync":false,"order":14,"slug":"templates-required-directory","title":"Templates Reference"},"project":"55a6e72e8cc73e0d00096635","updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-12-04T00:14:39.957Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":11,"body":"[block:html]\n{\n  \"html\": \"<!-- Split this page!\\n\\nBoth Checkout & Order Confirmation [note chg'd. name!] work the same way. You still can't \\\"directly modify their layouts.\\\"\\n\\n...If you <a href=\\\"https://support.bigcommerce.com/articles/Public/Checkout-Settings\\\" target=\\\"_blank\\\">enable</a> BigCommerce's <a href=\\\"https://support.bigcommerce.com/articles/Public/Optimized-Single-Page-Checkout\\\" target=\\\"_blank\\\">Optimized One-Page Checkout</a> option,... -->\\n\\n<A NAME=\\\"CustomChkHd\\\"></a>This page covers:<br>\\n\\n<ul>\\n <li><a href=\\\"#options\\\">Customization Options</a></li>\\n <li><a href=\\\"#bg-only\\\">Background Color Example</a></li>\\n <li><a href=\\\"#bg+text\\\">Background and Text Colors Example</a></li>\\n  <li><a href=\\\"#cust_family\\\">Custom Font Family Example</a></li>\\n  <li><a href=\\\"#cust_sz+wt\\\">Custom Font Size/Weight Example</a></li>\\n</ul>\\n\\nThe following pages in this subsection cover:\\n\\n<ul>\\n <li><a href=\\\"/docs/checkout-objects\\\">Checkout Objects</a></li>\\n <li><a href=\\\"/docs/optimized-checkout-prereqs\\\">Preparing Stencil Themes for Optimized One-Page Checkout</a></li>\\n <li><a href=\\\"/docs/optimized-checkout-customization\\\">Optimized One-Page Checkout Restyling</a></li>\\n <li><a href=\\\"/docs/multi-currency-checkout\\\">Currency-Conversion Options</a></li>\\n <li><a href=\\\"/docs/multi-language-checkout\\\">Multi-Language Checkout</a></li>\\n <li><a href=\\\"/docs/checkout-injection\\\">Checkout/Confirmation Injection Options</a></li>\\n<li><a href=\\\"/docs/apple-pay-styling\\\">Styling the Apple Pay Button</a></li>\\n<li><a href=\\\"/docs/customizing-printable-invoices\\\">Customizing Printable Invoices</a></li>\\n<li><a href=\\\"/docs/customizing-printable-packing-slips\\\">Customizing Printable Packing Slips</a></li> \\n<!-- <li><a href=\\\"/docs/customizing-email-templates\\\">Customizing Email Templates</a></li> -->\\n</ul>\\n\\n<h2> <A NAME=\\\"options\\\"></a>Customization Options</h2>\\n\\nYour theme's checkout and order confirmation page each have a standard layout, which you cannot directly modify like other theme templates. However, you still have certain options for customizing these pages' appearance: \\n\\n<ul>\\n  <li>If you <a href=\\\"/docs/optimized-checkout-prereqs\\\">enable</a> BigCommerce's <a href=\\\"https://support.bigcommerce.com/articles/Public/Optimized-Single-Page-Checkout\\\" target=\\\"_blank\\\">Optimized One-Page Checkout</a> option, you can style the checkout page independently, as outlined <a href=\\\"/docs/optimized-checkout-customization\\\">here</a>. <p></p>\\n  </li>\\n\\n  <li>\\nOtherwise, you can style both the checkout and order confirmation pages, by inserting custom CSS into their shared stylesheet, located here:<p></p>\\n<pre>\\n&lt;theme-name&gt;/assets/scss/checkout.scss\\n</pre><p></p>\\n\\nBelow are some examples of customizing the checkout page via this shared <span class=\\\"inline-code\\\">checkout.scss</span> file. <p></p>\\n  </li>\\n\\n  <li>You can set up <a href=\\\"/docs/multi-currency-checkout\\\">currency-conversion</a> and <a href=\\\"/docs/multi-language-checkout\\\">multi-language</a> display options on your checkout and order confirmation pages. (These options require that you first <a href=\\\"/docs/optimized-checkout-prereqs\\\">enable</a> Optimized One-Page Checkout.)<p></p>\\n  </li>\\n  \\n <li>You can <a href=\\\"/docs/checkout-injection\\\">inject</a> trust seals, custom JavaScript, and app scripts onto either or both pages. You can also add sitewide headers, footers, and/or styling. (These options also require that you first <a href=\\\"/docs/optimized-checkout-prereqs\\\">enable</a> <NOBR>Optimized One-Page Checkout.</nobr></li>\\n\\n</ul>\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"As of March 5, 2017, BigCommerce renamed the former \\\"thank-you\\\" page to \\\"order confirmation.\\\" \\nFor themes based on Cornerstone, the corresponding template's new path/file name is: \\n`<theme-name>/templates/pages/order-confirmation.html.`\\n\\nThis also changes the customer-facing URL route from `.../checkout/thank-you` to: \\n`.../checkout/order-confirmation`.\",\n  \"title\": \"Thank-You Page Renamed to Order Confirmation\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<h2> <A NAME=\\\"bg-only\\\"></a>Background Color Example</h2>\\n\\nThis first example changes the checkout header's background color. You could add this basic CSS snippet to the above stylesheet:\\n\\n<p></p><pre>#header {\\n  background: stencilColor(\\\"color-secondary\\\");\\n}</pre>\\n\\nThis CSS calls Stencil's custom <a href=\\\"/docs/custom-sass-functions#Color\\\"><span class=\\\"inline-code\\\">stencilColor</span></a> function to reference the value defined in your <a href=\\\"/docs/configjson-reference\\\"><span class=\\\"inline-code\\\">config.json</span></a> file's <span class=\\\"inline-code\\\">\\\"color-secondary\\\"</span> key.<br><p></p>\\n\\nAssuming your Stencil server is running on the default port 3000, you can check the result by opening this page:\\n<p></p><pre>https://localhost:3000/checkout.php</pre><p></p>\\n\\nFor a customized order confirmation page, you would instead check this page:\\n<p></p><pre>https://localhost:3000/finishorder.php</pre>\\n\\n\\n<h2> <A NAME=\\\"bg+text\\\"></a>Background and Text Colors Example</h2>\\n\\nThis second example calls the same custom function twice, to also change the header's text color. It sets the <span class=\\\"inline-code\\\">h1</span></a> style to the value defined in <a href=\\\"/docs/configjson-reference\\\"><span class=\\\"inline-code\\\">config.json</span></a>'s <span class=\\\"inline-code\\\">\\\"color-textBase\\\"</span> key:\\n\\n<p></p><pre>#header {\\n  background: stencilColor(\\\"color-secondary\\\");\\n  h1 {\\n    color: stencilColor(\\\"color-textBase\\\");\\n  }\\n}</pre>\\n\\n<h2> <A NAME=\\\"cust_family\\\"></a>Custom Font Family Example</h2>\\n\\nThis next example defines a custom font family named <span class=\\\"inline-code\\\">'Shadows Into Light'</span>, by reference to a Google Web font with a similar name:<p></p>\\n\\n<pre>:::at:::font-face {\\n  font-family: 'Shadows Into Light';\\n  font-style: normal;\\n  font-weight: 400;\\n  src: url(https://fonts.gstatic.com/s/shadowsintolight/v6/clhLqOv7MXn459PTh0gXYKkG_nMAIv3PPZbC2XDns-o.woff2) format('woff2');\\n}</pre>\\n\\nThis definition is scoped to the checkout and order-confirmation pages. However, once you've defined the family, you can call it elsewhere in these pages' CSS, as shown here:<p></p>\\n\\n<pre>.TitleHeading {\\n  font-family: 'Shadows Into Light';\\n}</pre>\\n\\n<h2> <A NAME=\\\"cust_sz+wt\\\"></a>Custom Font Size/Weight Example</h2>\\n\\nThis example customizes the checkout page's styling by calling three of Stencil's custom Sass functions (<a href=\\\"/docs/custom-sass-functions#Number\\\"><span class=\\\"inline-code\\\">stencilNumber</span></a>, <a href=\\\"/docs/custom-sass-functions#FontFamily\\\"><span class=\\\"inline-code\\\">stencilFontFamily</span></a>, and <a href=\\\"/docs/custom-sass-functions#FontWeight\\\"><span class=\\\"inline-code\\\">stencilWeight</span></a>) on appropriate <a href=\\\"/docs/configjson-reference\\\"><span class=\\\"inline-code\\\">config.json</span></a> keys:<p></p>\\n\\n<pre>body {\\n  background-color: #fff;\\n  font-size: stencilNumber(\\\"fontSize-root\\\", \\\"px\\\") * 2;\\n  font-family: stencilFontFamily(\\\"body-font\\\");\\n  font-weight: stencilFontWeight(\\\"headings-font\\\");\\n  -webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */\\n}</pre>\"\n}\n[/block]","excerpt":"","slug":"checkout-header-customization","type":"basic","title":"Checkout, Order-Confirmation, and Related Customizations"}

Checkout, Order-Confirmation, and Related Customizations


[block:html] { "html": "<!-- Split this page!\n\nBoth Checkout & Order Confirmation [note chg'd. name!] work the same way. You still can't \"directly modify their layouts.\"\n\n...If you <a href=\"https://support.bigcommerce.com/articles/Public/Checkout-Settings\" target=\"_blank\">enable</a> BigCommerce's <a href=\"https://support.bigcommerce.com/articles/Public/Optimized-Single-Page-Checkout\" target=\"_blank\">Optimized One-Page Checkout</a> option,... -->\n\n<A NAME=\"CustomChkHd\"></a>This page covers:<br>\n\n<ul>\n <li><a href=\"#options\">Customization Options</a></li>\n <li><a href=\"#bg-only\">Background Color Example</a></li>\n <li><a href=\"#bg+text\">Background and Text Colors Example</a></li>\n <li><a href=\"#cust_family\">Custom Font Family Example</a></li>\n <li><a href=\"#cust_sz+wt\">Custom Font Size/Weight Example</a></li>\n</ul>\n\nThe following pages in this subsection cover:\n\n<ul>\n <li><a href=\"/docs/checkout-objects\">Checkout Objects</a></li>\n <li><a href=\"/docs/optimized-checkout-prereqs\">Preparing Stencil Themes for Optimized One-Page Checkout</a></li>\n <li><a href=\"/docs/optimized-checkout-customization\">Optimized One-Page Checkout Restyling</a></li>\n <li><a href=\"/docs/multi-currency-checkout\">Currency-Conversion Options</a></li>\n <li><a href=\"/docs/multi-language-checkout\">Multi-Language Checkout</a></li>\n <li><a href=\"/docs/checkout-injection\">Checkout/Confirmation Injection Options</a></li>\n<li><a href=\"/docs/apple-pay-styling\">Styling the Apple Pay Button</a></li>\n<li><a href=\"/docs/customizing-printable-invoices\">Customizing Printable Invoices</a></li>\n<li><a href=\"/docs/customizing-printable-packing-slips\">Customizing Printable Packing Slips</a></li> \n<!-- <li><a href=\"/docs/customizing-email-templates\">Customizing Email Templates</a></li> -->\n</ul>\n\n<h2> <A NAME=\"options\"></a>Customization Options</h2>\n\nYour theme's checkout and order confirmation page each have a standard layout, which you cannot directly modify like other theme templates. However, you still have certain options for customizing these pages' appearance: \n\n<ul>\n <li>If you <a href=\"/docs/optimized-checkout-prereqs\">enable</a> BigCommerce's <a href=\"https://support.bigcommerce.com/articles/Public/Optimized-Single-Page-Checkout\" target=\"_blank\">Optimized One-Page Checkout</a> option, you can style the checkout page independently, as outlined <a href=\"/docs/optimized-checkout-customization\">here</a>. <p></p>\n </li>\n\n <li>\nOtherwise, you can style both the checkout and order confirmation pages, by inserting custom CSS into their shared stylesheet, located here:<p></p>\n<pre>\n&lt;theme-name&gt;/assets/scss/checkout.scss\n</pre><p></p>\n\nBelow are some examples of customizing the checkout page via this shared <span class=\"inline-code\">checkout.scss</span> file. <p></p>\n </li>\n\n <li>You can set up <a href=\"/docs/multi-currency-checkout\">currency-conversion</a> and <a href=\"/docs/multi-language-checkout\">multi-language</a> display options on your checkout and order confirmation pages. (These options require that you first <a href=\"/docs/optimized-checkout-prereqs\">enable</a> Optimized One-Page Checkout.)<p></p>\n </li>\n \n <li>You can <a href=\"/docs/checkout-injection\">inject</a> trust seals, custom JavaScript, and app scripts onto either or both pages. You can also add sitewide headers, footers, and/or styling. (These options also require that you first <a href=\"/docs/optimized-checkout-prereqs\">enable</a> <NOBR>Optimized One-Page Checkout.</nobr></li>\n\n</ul>" } [/block] [block:callout] { "type": "warning", "body": "As of March 5, 2017, BigCommerce renamed the former \"thank-you\" page to \"order confirmation.\" \nFor themes based on Cornerstone, the corresponding template's new path/file name is: \n`<theme-name>/templates/pages/order-confirmation.html.`\n\nThis also changes the customer-facing URL route from `.../checkout/thank-you` to: \n`.../checkout/order-confirmation`.", "title": "Thank-You Page Renamed to Order Confirmation" } [/block] [block:html] { "html": "<h2> <A NAME=\"bg-only\"></a>Background Color Example</h2>\n\nThis first example changes the checkout header's background color. You could add this basic CSS snippet to the above stylesheet:\n\n<p></p><pre>#header {\n background: stencilColor(\"color-secondary\");\n}</pre>\n\nThis CSS calls Stencil's custom <a href=\"/docs/custom-sass-functions#Color\"><span class=\"inline-code\">stencilColor</span></a> function to reference the value defined in your <a href=\"/docs/configjson-reference\"><span class=\"inline-code\">config.json</span></a> file's <span class=\"inline-code\">\"color-secondary\"</span> key.<br><p></p>\n\nAssuming your Stencil server is running on the default port 3000, you can check the result by opening this page:\n<p></p><pre>https://localhost:3000/checkout.php</pre><p></p>\n\nFor a customized order confirmation page, you would instead check this page:\n<p></p><pre>https://localhost:3000/finishorder.php</pre>\n\n\n<h2> <A NAME=\"bg+text\"></a>Background and Text Colors Example</h2>\n\nThis second example calls the same custom function twice, to also change the header's text color. It sets the <span class=\"inline-code\">h1</span></a> style to the value defined in <a href=\"/docs/configjson-reference\"><span class=\"inline-code\">config.json</span></a>'s <span class=\"inline-code\">\"color-textBase\"</span> key:\n\n<p></p><pre>#header {\n background: stencilColor(\"color-secondary\");\n h1 {\n color: stencilColor(\"color-textBase\");\n }\n}</pre>\n\n<h2> <A NAME=\"cust_family\"></a>Custom Font Family Example</h2>\n\nThis next example defines a custom font family named <span class=\"inline-code\">'Shadows Into Light'</span>, by reference to a Google Web font with a similar name:<p></p>\n\n<pre>@font-face {\n font-family: 'Shadows Into Light';\n font-style: normal;\n font-weight: 400;\n src: url(https://fonts.gstatic.com/s/shadowsintolight/v6/clhLqOv7MXn459PTh0gXYKkG_nMAIv3PPZbC2XDns-o.woff2) format('woff2');\n}</pre>\n\nThis definition is scoped to the checkout and order-confirmation pages. However, once you've defined the family, you can call it elsewhere in these pages' CSS, as shown here:<p></p>\n\n<pre>.TitleHeading {\n font-family: 'Shadows Into Light';\n}</pre>\n\n<h2> <A NAME=\"cust_sz+wt\"></a>Custom Font Size/Weight Example</h2>\n\nThis example customizes the checkout page's styling by calling three of Stencil's custom Sass functions (<a href=\"/docs/custom-sass-functions#Number\"><span class=\"inline-code\">stencilNumber</span></a>, <a href=\"/docs/custom-sass-functions#FontFamily\"><span class=\"inline-code\">stencilFontFamily</span></a>, and <a href=\"/docs/custom-sass-functions#FontWeight\"><span class=\"inline-code\">stencilWeight</span></a>) on appropriate <a href=\"/docs/configjson-reference\"><span class=\"inline-code\">config.json</span></a> keys:<p></p>\n\n<pre>body {\n background-color: #fff;\n font-size: stencilNumber(\"fontSize-root\", \"px\") * 2;\n font-family: stencilFontFamily(\"body-font\");\n font-weight: stencilFontWeight(\"headings-font\");\n -webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */\n}</pre>" } [/block]