checkout.scss.liquid

Shopify Plus

The checkout.scss.liquid asset is available to Shopify Plus merchants only.

Checkout customizations 1

You can make additional style enhancements to your checkout pages by creating a checkout.scss.liquid asset for your theme. For Plus merchants, the checkout.scss.liquid file is automatically included in the checkout.liquid layout. There are some best practices to keep in mind when you're writing your checkout.scss.liquid file.

Checkout pages

When you're styling your checkout, remember to consider its component pages. Depending on checkout settings, there are at least four checkout pages, and at most six.

BEM Syntax

Checkout uses the BEM syntax to minimize nesting. You should avoid deep nesting of selectors, and use the simplest selector that meets your needs.

For example, to style the name of the products inside the order summary:

Use this Instead of this
  .product__info__name {
    color: green;
  }
  
  .order-summary .order-summary__section .product_list .product_info .product__info__name {
    color: red;
  }
  

Avoid using !important

Your checkout stylesheet is loaded after the base stylesheet, so there's no need to add !important to every property. Reserve the use of !important for cases where it's absolutely necessary.

Button examples

Consider designing buttons for all states, disabled, normal, and hover.

Checkout customizations 2

Customize your classes to provide button styles that match your theme.

Main breakpoints

Checkout customizations 3

The default stylesheet has four breakpoints, which you can use in your stylesheet:

  • Small: 0px and up – does not require a media query
  • Medium: 750px and up
  • Large: 1000px and up
  • Large Desktop: 1300px and up.

Custom webfonts & additional scripts

You can load your self-hosted webfonts directly from the checkout.scss.liquid using an @font-face declaration.

External assets

Checkout uses SSL encryption to ensure a safe buying experience for your customers. If you do load images or additional content, it must be served via https:// to be rendered on the page. We recommend that you use our CDN to host all your assets.

Feature detection

A few utility classes are included on the <html> element:

  • Javascript: js/no-js lets you know whether the browser supports javascript or not.

  • Browser and OS: for example, a user running Chrome on OS X would have the classes: mac chrome.

  • Modernizr: we use Modernizr to detect if the browser supports certain CSS properties like RGBA, multiple background images, box-shadows, pseudo-elements, and inline SVG.

You can use these classes to provide an improved checkout experience on older browsers.

Fields, modals, and notices

Some other components you can customize in the checkout.scss.liquid are fields, modals, warnings, and error messages

Field states and classes

Use the classes in your tables to style the three field states to fit your theme.

Field state CSS class
Default No class required
Focus field--focus
Error field--error

Modals

Policies (refund, privacy, and terms of service) and processing/forwarding pages are presented in a full-screen modal.

Warnings

Use warnings to notify the user that the total cost of their order changed before they completed their purchase. For example if inventory is automatically adjusted.

Checkout customizations 4

Error messages

Use clear error messages to communicate errors to the user.

Checkout customizations 5

Want to discuss this page?

Visit the Shopify Community