{"_id":"582ab3012a7b651b005e7bfc","__v":0,"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"},"parentDoc":null,"user":"55a6caa022cfa321008e01d6","project":"55a6e72e8cc73e0d00096635","updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-11-15T07:02:25.144Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":14,"body":"[block:html]\n{\n  \"html\": \"<!-- To support stores that [enable](https://support.bigcommerce.com/articles/Public/Checkout-Settings) BigCommerce's [Optimized One-Page Checkout](https://support.bigcommerce.com/articles/Public/Optimized-Single-Page-Checkout) option,\\n-->\"\n}\n[/block]\nTo support stores that [enable](/docs/optimized-checkout-prereqs) BigCommerce's [Optimized One-Page Checkout](https://support.bigcommerce.com/articles/Public/Optimized-Single-Page-Checkout) option, this page explains how to customize the Optimized Checkout page's styling:\n\n  * [Working with the Theme SCSS File](#scss)\n  * [Configuring the Desktop Viewport](#viewport)\n  * [Classes Available for Customization](#classes)\n  * [Providing User Options in Theme Editor](#theme-ed)\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"The options on this page require that you first [enable](/docs/optimized-checkout-prereqs) Optimized One-Page Checkout.\\n\\nTo customize checkout styling for stores/themes that do _not_ use Optimized Checkout, please see \\n[Checkout and Order-Confirmation Page Customization Options](/docs/checkout-header-customization#options).\",\n  \"title\": \"Optimized or Basic Checkout Customization?\"\n}\n[/block]\n## <span id=\"scss\"> Working with the Theme SCSS File </span>\n\nStencil's base Cornerstone theme includes an SCSS file that styles the Optimized Checkout page. In your local installation, this file is located at: \n\n```\n<theme-name>/assets/scss/optimized-checkout.scss\n```\n\nYou can access the most recent version of this file in the Cornerstone public repo [here](https://github.com/bigcommerce/cornerstone/blob/master/assets/scss/optimized-checkout.scss), even if your theme is not based on Cornerstone.\n\nTo customize the checkout page, you are free to change classes' contents. However:\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Restrictions\",\n  \"body\": \"Do not nest elements, nor change any class names. BigCommerce imposes these restrictions because each class here maps to multiple Optimized Checkout elements. So changing the structure or naming would break updates available in future Optimized Checkout enhancements.\"\n}\n[/block]\n## <span id=\"viewport\"> Configuring the Desktop Viewport </span>\n\nWithin the SCSS file, to set up Optimized Checkout's responsive features, you should configure the following breakpoint to define your preferred desktop viewport size:\n\n```\n    // TODO:\n    // Configure media query to be 'desktop' breakpoint size\n    // -----------------------------------------------------------------------------\n    :::at:::media (min-width: 801px) {\n        text-align: stencilString(\"optimizedCheckout-logo-position\");\n    }\n```\n\n## <span id=\"classes\"> Classes Available for Customization </span>\n\nBelow are the classes provided in Cornerstone's `optimized-checkout.scss` file, with the corresponding page elements that they style. (These class names and mappings are subject to change, so please check the inline comments in the `optimized-checkout.scss` file that you downloaded with your current Cornerstone release:)\n\n| **Class** | **Styles This Optimized One-Page Checkout Element:** |\n|---|---|\n| .optimizedCheckout-header | Page header. |\n| .optimizedCheckout-headingPrimary | Top-level headings. |\n| .optimizedCheckout-headingSecondary | Certain lower-level elements, such as descriptions of cart items. |\n| .optimizedCheckout-overlay | Shipping Method box. |\n| .optimizedCheckout-contentPrimary | Body text in the desktop `Order Summary`/`Order Confirmation` (cart contents); drop-down-list items; and text that summarizes completed steps. |\n| .optimizedCheckout-contentSecondary | Text labels on check boxes, and lower-level text in the desktop Order Summary. |\n| .optimizedCheckout-button--primary | `CONTINUE` button and final `PAY` button. |\n| .optimizedCheckout-button--secondary | `Edit` buttons.\n| .optimizedCheckout-orderSummary | Colors in the `Order Summary` mobile drawer/modal.\n| .optimizedCheckout-step | Large step-number indicators on the page's left side. |\n| .optimizedCheckout-form-label | Styles form fields like `Email Address` – the field's text-label color. | \n| .optimizedCheckout-form-input | Styles form fields like `Email Address` – the entry box's background and border colors. |\n\n## <span id=\"theme-ed\"> Providing User Options in Theme Editor </span>\n\nAs with other aspects of your theme's styling, you can determine which aspects of Optimized One-Page Checkout users will be able to customize in Theme Editor. \n\nIn Stencil's Cornerstone base theme, each class/property available in `optimized-checkout.scss` has a corresponding key/value pair in the `config.json` file. For examples of these key/value pairs, see [this section](/docs/schemajson-metadata-for-theme-editor#schema-json-OptImage).\n\nFor examples of Theme Editor graphical controls exposed to users through elements included in Cornerstone's `schema.json` file, please see [this section](/docs/configjson-reference#config-uco).","excerpt":"","slug":"optimized-checkout-customization","type":"basic","title":"Optimized One-Page Checkout Restyling"}

Optimized One-Page Checkout Restyling


[block:html] { "html": "<!-- To support stores that [enable](https://support.bigcommerce.com/articles/Public/Checkout-Settings) BigCommerce's [Optimized One-Page Checkout](https://support.bigcommerce.com/articles/Public/Optimized-Single-Page-Checkout) option,\n-->" } [/block] To support stores that [enable](/docs/optimized-checkout-prereqs) BigCommerce's [Optimized One-Page Checkout](https://support.bigcommerce.com/articles/Public/Optimized-Single-Page-Checkout) option, this page explains how to customize the Optimized Checkout page's styling: * [Working with the Theme SCSS File](#scss) * [Configuring the Desktop Viewport](#viewport) * [Classes Available for Customization](#classes) * [Providing User Options in Theme Editor](#theme-ed) [block:callout] { "type": "warning", "body": "The options on this page require that you first [enable](/docs/optimized-checkout-prereqs) Optimized One-Page Checkout.\n\nTo customize checkout styling for stores/themes that do _not_ use Optimized Checkout, please see \n[Checkout and Order-Confirmation Page Customization Options](/docs/checkout-header-customization#options).", "title": "Optimized or Basic Checkout Customization?" } [/block] ## <span id="scss"> Working with the Theme SCSS File </span> Stencil's base Cornerstone theme includes an SCSS file that styles the Optimized Checkout page. In your local installation, this file is located at: ``` <theme-name>/assets/scss/optimized-checkout.scss ``` You can access the most recent version of this file in the Cornerstone public repo [here](https://github.com/bigcommerce/cornerstone/blob/master/assets/scss/optimized-checkout.scss), even if your theme is not based on Cornerstone. To customize the checkout page, you are free to change classes' contents. However: [block:callout] { "type": "warning", "title": "Restrictions", "body": "Do not nest elements, nor change any class names. BigCommerce imposes these restrictions because each class here maps to multiple Optimized Checkout elements. So changing the structure or naming would break updates available in future Optimized Checkout enhancements." } [/block] ## <span id="viewport"> Configuring the Desktop Viewport </span> Within the SCSS file, to set up Optimized Checkout's responsive features, you should configure the following breakpoint to define your preferred desktop viewport size: ``` // TODO: // Configure media query to be 'desktop' breakpoint size // ----------------------------------------------------------------------------- @media (min-width: 801px) { text-align: stencilString("optimizedCheckout-logo-position"); } ``` ## <span id="classes"> Classes Available for Customization </span> Below are the classes provided in Cornerstone's `optimized-checkout.scss` file, with the corresponding page elements that they style. (These class names and mappings are subject to change, so please check the inline comments in the `optimized-checkout.scss` file that you downloaded with your current Cornerstone release:) | **Class** | **Styles This Optimized One-Page Checkout Element:** | |---|---| | .optimizedCheckout-header | Page header. | | .optimizedCheckout-headingPrimary | Top-level headings. | | .optimizedCheckout-headingSecondary | Certain lower-level elements, such as descriptions of cart items. | | .optimizedCheckout-overlay | Shipping Method box. | | .optimizedCheckout-contentPrimary | Body text in the desktop `Order Summary`/`Order Confirmation` (cart contents); drop-down-list items; and text that summarizes completed steps. | | .optimizedCheckout-contentSecondary | Text labels on check boxes, and lower-level text in the desktop Order Summary. | | .optimizedCheckout-button--primary | `CONTINUE` button and final `PAY` button. | | .optimizedCheckout-button--secondary | `Edit` buttons. | .optimizedCheckout-orderSummary | Colors in the `Order Summary` mobile drawer/modal. | .optimizedCheckout-step | Large step-number indicators on the page's left side. | | .optimizedCheckout-form-label | Styles form fields like `Email Address` – the field's text-label color. | | .optimizedCheckout-form-input | Styles form fields like `Email Address` – the entry box's background and border colors. | ## <span id="theme-ed"> Providing User Options in Theme Editor </span> As with other aspects of your theme's styling, you can determine which aspects of Optimized One-Page Checkout users will be able to customize in Theme Editor. In Stencil's Cornerstone base theme, each class/property available in `optimized-checkout.scss` has a corresponding key/value pair in the `config.json` file. For examples of these key/value pairs, see [this section](/docs/schemajson-metadata-for-theme-editor#schema-json-OptImage). For examples of Theme Editor graphical controls exposed to users through elements included in Cornerstone's `schema.json` file, please see [this section](/docs/configjson-reference#config-uco).