> This page is for Developer. > For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://docs.bigcommerce.com/llms.txt. > For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server. # Optimized One-Page Checkout This article covers styling and display options for Optimized One-Page Checkout. ## Working with the optimized checkout SCSS file Cornerstone includes a SCSS file that styles the Optimized Checkout page. In your local installation, this file is located at `cornerstone/assets/scss/optimized-checkout.scss`. You can access the most recent version of this file in the [Cornerstone repository](https://github.com/bigcommerce/cornerstone/blob/master/assets/scss/optimized-checkout.scss). All themes share the same stylesheet for the Optimized One-Page checkout, even those not based on Cornerstone, so this stylesheet applies universally across Stencil themes. On a headless channel, the control panel hides the **Themes** section. To reach this file, see [Accessing Checkout Theme Files](/developer/docs/storefront/headless/theme-files). > **Note** > > #### Customizing checkout restrictions > > When customizing the checkout page, you are free to change classes' contents; however, **do not** nest elements, change any class names, or use class selectors other than those provided in the file. BigCommerce imposes these restrictions because each class here maps to multiple optimized checkout elements. Changing the structure or naming would break updates available in future optimized checkout enhancements. ## Configuring the desktop viewport To set up optimized checkout's responsive features within the `optimized-checkout.scss` file, you should configure the following breakpoint to define your preferred desktop viewport size. The media query is nested inside `.optimizedCheckout-header` and applies the `optimizedCheckout-logo-position` theme setting to align the header logo at desktop widths (801px and wider by default): ```css showLineNumbers={false} .optimizedCheckout-header { // TODO: // Configure media query to be 'desktop' breakpoint size // ----------------------------------------------------------------------------- @media (min-width: 801px) { text-align: stencilString("optimizedCheckout-logo-position"); } } ``` ## Classes available for customization Below are the classes provided in Cornerstone's `optimized-checkout.scss`, 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 | | :------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `*:focus` | Outline color of any element that has keyboard focus. | | `.optimizedCheckout-header` | Page header – background color, background image, border color, text color, and logo position. | | `.optimizedCheckout-headingPrimary` | Top-level headings. | | `.optimizedCheckout-headingSecondary` | Certain lower-level elements, such as descriptions of cart items. | | `body` | Page background color. | | `.optimizedCheckout-overlay` | Shipping Method box. | | `.optimizedCheckout-contentPrimary` | Body text in the `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 Order Summary. | | `.optimizedCheckout-buttonPrimary` | `CONTINUE` button for each step and the final `PAY` button, including hover, focus, active, and disabled states. | | `.optimizedCheckout-buttonSecondary` | `Edit` button for each step, including hover, focus, active, and disabled states. | | `a` | Link text color and typography, including the hover color. | | `.optimizedCheckout-orderSummary` | Background, border, and shadow colors in the `Order Summary` mobile drawer/modal. | | `.optimizedCheckout-orderSummary-cartSection` | Border color of the cart sections in the `Order Summary`. | | `.optimizedCheckout-checkoutStep` | Border color of each checkout step. | | `.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. | | `.form-field--error` | Error color applied to form-field labels and inline error messages. | | `.optimizedCheckout-form-input` | Styles form fields like `Email Address` – the entry box's background, border, shadow, text, and placeholder colors, including focus and error states. | | `.optimizedCheckout-form-select` | Drop-down lists – the same background, border, shadow, text, and placeholder colors as `.optimizedCheckout-form-input`, including focus, hover, and error states. | | `.optimizedCheckout-form-radio` | Radio buttons – background, border, and shadow colors, including checked and focus states. | | `.optimizedCheckout-form-checkbox` | Check boxes – background, border, and shadow colors, including checked and focus states. | | `.optimizedCheckout-discountBanner` | Discount banners – background, text, and icon colors, and typography. | | `.optimizedCheckout-form-checklist` | Shipping and payment method lists – background, border, and text colors. | | `.optimizedCheckout-form-checklist-item` | Individual items in the shipping and payment method lists. | | `.optimizedCheckout-form-checklist-item--selected` | The selected (or hovered) item in the shipping and payment method lists. | | `.optimizedCheckout-form-checklist-checkbox` | Radio-style selectors in the shipping and payment method lists, including checked and focus states. | | `.optimizedCheckout-loadingToaster` | Loading toaster – background and text colors. | ## Enhanced checkout styles When the **Enhanced Checkout** option is enabled in the control panel, checkout applies the `.enhancedThemeV1` class. Cornerstone's `optimized-checkout.scss` scopes a set of overrides to this class so that the enhanced checkout UI, including dark theme variations, uses your existing `optimizedCheckout-*` theme settings. | Selector within `.enhancedThemeV1` | Styles this enhanced checkout element | | :------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `.enhancedThemeV1` | Page background – uses the `optimizedCheckout-header-backgroundColor` setting. | | `.optimizedCheckout-form-checklist-checkbox:checked ~ .optimizedCheckout-form-label` | Selected radio indicator in the shipping and payment method lists – uses the `optimizedCheckout-formChecklist-color` setting, with an inner dot in the `optimizedCheckout-formField-backgroundColor` setting. | | `.optimizedCheckout-form-checklist-item` | Border color of items in the shipping and payment method lists. | | `.optimizedCheckout-form-checklist-item--selected` | Selected list item – border in the `optimizedCheckout-formChecklist-color` setting and background in the `optimizedCheckout-formChecklist-backgroundColorSelected` setting. | | `.optimizedCheckout-checkoutStep` | Checkout steps – a semi-transparent version of the body background color. | | `.optimizedCheckout-checkoutStep.checkout-step--current` | The current checkout step – the full body background color. | | `.optimizedCheckout-checkoutStep:not(.checkout-step--current) .optimizedCheckout-buttonSecondary` | `Edit` buttons on steps that are not current – a transparent background. | | `.optimizedCheckout-orderSummary-toggle` | `Order Summary` toggle – text and icon use the `optimizedCheckout-link-color` setting. | ## Providing customizable options in Page Builder You can determine which aspects of Optimized One-Page Checkout merchants will customize with the Page Builder tool. In Cornerstone's `optimized-checkout.scss`, each SCSS class and property available has a corresponding key/value pair in the `config.json` file, which can be used as the `id` value in schema.json when [creating customizable Page Builder options](https://github.com/bigcommerce/cornerstone/blob/master/schema.json). ## Currency conversion options You can enable the display of alternate currencies on your Stencil theme's Optimized One-Page Checkout and order confirmation pages. > **Note** > > #### Restrictions > > The options on this page require that you first enable Optimized One-Page Checkout. Find instructions on how to do this in [Optimized One-Page Checkout](https://support.bigcommerce.com/s/article/Optimized-Single-Page-Checkout). Note that regardless of the display options you set below, you will always process transactions in the store's single default currency. To change that setting, see [Changing Your Default Currency](https://support.bigcommerce.com/s/article/Managing-Currencies#default). To allow shoppers to view prices in multiple currencies, you will need to add the desired currencies in the store control panel. Shoppers will then be able to use the Currency drop-down list throughout the storefront to switch displayed prices among the enabled currencies. At checkout, the shopper still receives the bill in the store's default currency. As shown below, the checkout and cart templates will show an annotation about this while flagging any converted total (in a shopper's selected alternate currency) as an Estimated Total: ![checkout template](/_fern-img/0d739ad1b1a4c3dfc8fd54ec094e69db9ff17f485555ce435d9fabe88412bf39.webp) ## Related resources * [The Complete Guide to Checkout Customization on BigCommerce (Developer Blog)](https://medium.com/bigcommerce-developer-blog/the-complete-guide-to-checkout-customization-on-bigcommerce-6b566bc36fa9)