> Deprecated:
> `checkout.liquid` is now unsupported for the Information, Shipping, and Payment checkout steps. 'checkout.liquid', additional scripts, and script tags are deprecated for the **Thank you** and **Order status** pages and will be sunset on August 28, 2025.
> Stores that currently use `checkout.liquid` for the **Thank you** and **Order status** pages need to [upgrade to Checkout Extensibility](https://www.shopify.com/plus/upgrading-to-checkout-extensibility) before the deadline. [Shopify Scripts](/docs/api/liquid/objects#script) will continue to work alongside Checkout Extensibility until August 28, 2025.
> Learn [how to build checkout extensions](/docs/apps/build/checkout/technologies) that extend the functionality of Shopify checkout.
<!---->
<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/manual/customize/checkout-customizations-1-7ced5ea43d7f1ffcfdff73fc36086fca6c4202f0d0214911de3d5e3712a0c797.jpg" class="lazyload" width="1024" height="430"></figure>
You can make style enhancements to your checkout pages by adding CSS to the [`checkout.liquid`](/docs/storefronts/themes/architecture/layouts/checkout-liquid) file of your theme. Consider the following best practices when adding CSS to your `checkout.liquid` file.
> Shopify Plus:
> The `checkout.liquid` layout is available to [Shopify Plus](https://www.shopify.com/plus?utm_source=shopify&utm_medium=docs&utm_campaign=checkout_scss_liquid_template) merchants only.
<h2 id="checkout-pages">Checkout pages</h2>
When you're styling your checkout, remember to consider its [component pages](/docs/storefronts/themes/architecture/layouts/checkout-liquid#checkout-pages). Depending on checkout settings, there are at least four checkout pages, and at most six.
<h2 id="bem-syntax">BEM Syntax</h2>
Checkout uses the [BEM syntax](http://bem.info/) 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:
<table>
<col style="width:50%">
<col style="width:50%">
<thead>
<tr>
<th>Use this</th>
<th>Instead of this</th>
</tr>
</thead>
<tbody>
<tr>
<td><p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script type="text/plain" data-language="css">
.product__info__name {
color: green;
}
</script>
</div>
</p>
</td>
<td><p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script type="text/plain" data-language="css">
.order-summary .order-summary__section .product_list .product_info .product__info__name {
color: red;
}
</script>
</div>
</p>
</td>
</tr>
</tbody>
</table>
<h2 id="important">Avoid using !important</h2>
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.
<h2 id="buttons">Button examples</h2>
Consider designing buttons for all states: `disabled`, `normal`, and `hover`.
<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/manual/customize/checkout-customizations-2-431fa2837e2bbc6994e93693dd0d9bb317c0f927658b42616413732cf377c69e.jpg" class="lazyload" width="758" height="428"></figure>
Customize your classes to provide button styles that match your theme.
<h2 id="breakpoints">Main breakpoints</h2>
<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/manual/customize/checkout-customizations-3-8eb6966963fa5290ff6d856f7e898339a9fdee9a772a908698139f001641bf78.jpg" class="lazyload" width="741" height="142"></figure>
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.
<h2 id="scripts">Custom webfonts and additional scripts</h2>
You can load your self-hosted webfonts directly from the CSS style tags in the `checkout.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, then these assets need to be served over `https://` to be rendered on the page. When possible, you should use the [Shopify CDN](/docs/storefronts/themes/best-practices/performance/platform#shopify-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**: [Modernizr](https://modernizr.com/) is used 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.
<h2 id="fields-modals-notices">Fields, modals, and notices</h2>
Some other components you can customize in the CSS of the `checkout.liquid` are [fields](#field-states-classes), [modals](#modals), [warnings](#warnings), and [error messages](#error-msg)
<h3 id="field-states-classes">Field states and classes</h3>
Use the classes in your tables to style the three field states to fit your theme.
<table>
<col style="width:40%">
<col style="width:30%">
<thead>
<tr>
<th>Field state</th>
<th>CSS class</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>No class required</td>
</tr>
<tr>
<td>Focus</td>
<td><kbd>field--focus</kbd></td>
</tr>
<tr>
<td>Error</td>
<td><kbd>field--error</kbd></td>
</tr>
</tbody>
</table>
<h3 id="modals">Modals</h3>
Policies (refund, privacy, and terms of service) and processing/forwarding pages are presented in a full-screen modal.
<h3 id="warnings">Warnings</h3>
Use warnings to notify the user that the total cost of their order changed before they completed their purchase. For example, you might add a warning if inventory is automatically adjusted.
<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/manual/customize/checkout-customizations-4-e487bec4c5f1bcbe3fd346f85ea46856e2eb23635fd346f1a1cf30c8d8255943.jpg" class="lazyload" width="879" height="113"></figure>
<h3 id="error-msg">Error messages</h3>
Use clear error messages to communicate errors to the user.
<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/manual/customize/checkout-customizations-5-76e168811edaaf5eaa3707c6575537977824fcebdbb5594ee3a5df46739ae30c.jpg" class="lazyload" width="877" height="112"></figure>