CSS styling in checkout.liquid

You can make style enhancements to your checkout pages by adding CSS to the checkout.liquid file of your theme. Consider the following best practices when adding CSS to your checkout.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

Avoid using !important

Your checkout stylesheet is loaded after the base stylesheet, so you don't 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.

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

Main breakpoints

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

  • Small: 0px and up – doesn't require a media query
  • Medium: 750px and up
  • Large: 1000px and up
  • Large Desktop: 1300px and up.

Custom webfonts and additional scripts

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