Getting Started
About Stencil
Transitioning to Stencil
Installing Stencil
Authentication & Tokens
Running Stencil Locally
Advanced Installation Options
Handlebars and Stencil
Handlebars.js Overview
Handlebars Helpers
Stencil Object Model
Stencil Objects

Restyle Optimized One-Page Checkout

Working with the Optimized Checkout SCSS File

Cornerstone includes an 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 (Github). 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.

Customizing Checkout Restrictions

When customizing the checkout page, you are free to change classes’ contents, however, do not nest elements or change any class names. 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

Within the optimized-checkout.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");
}

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:
.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.

Providing Customizable Options in Store Design

You can determine which aspects of Optimized One-Page Checkout merchants will be able to customize with the Store Design 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 Store Design options.