checkout.liquid layout renders the checkout.
checkout.liquid layout is located in the
layout directory of the theme:
checkout.liquid layout has the following format by default:
The checkout has the following steps:
|Inventory issues||This step is displayed if one or more of the cart items is out of stock, or the inventory level is below what the customer has requested. Customers are shown a confirmation button that will update their cart with the available item quantities.|
|Contact information||The customer enters their email address and will have the option to log in if customer accounts are enabled for the store. If any cart items require shipping, then the customer is shown a shipping address form. Otherwise, the customer is shown a billing address form.|
|Shipping method||The customer selects a shipping option or edits their shipping information. This step is skipped when none of the cart items require shipping. Skipping the shipping method is common for merchants selling digital products or services. Clicking Edit shipping information returns the visitor to the Customer information step.|
|Payment method||The customer chooses a payment method and, if applicable, enters payment information. Some payment providers require the customer to complete payment information on a different site. Customers can also specify a different billing address during this step.|
Optional based on checkout settings. The customer confirms their order total, shipping and billing addresses, and payment details by clicking Complete order.
This step might be required if the store is operating in the European Union.
|Processing/forwarding||A temporary page shown to customers as their order is being processed, or as they are being redirected to an off-site payment provider. The message displayed during this step depends on your checkout's translation settings.|
|Order status||The last step of checkout. This step is displayed after an order is complete. Learn more ›|
On every step, an Order summary showing the products, price, taxes, and shipping costs is displayed in the right column. This column collapses at mobile breakpoints.
|content_for_header||The scripts from Shopify for features like Google Analytics, Shopify Analytics, Shopify apps, and more. You need to add a reference to this object between the
|content_for_layout||The form fields and content for each step of the checkout process. You need to add a reference to this object between the
|locale||The currently-selected locale.||No|
|direction||The CSS direction of the content. For example,
|page_title||The page title. Commonly wrapped in
|skip_to_content_link||A hidden link for accessibility that allows users to skip to the main content.||No|
|checkout_html_classes||A string that should be added to the
|checkout_stylesheets||Shopify's checkout stylesheets. It's recommended that you don't remove this, even if you have your own stylesheets, as it requires extensive work to replace the default styling.||No|
|content_for_logo||The store logo, as determined by the checkout settings.||No|
|breadcrumb||The list of steps required to complete the checkout. The breadcrumb doesn't display on the final review step during checkout.||No|
|order_summary_toggle||The markup necessary to show and hide the order summary on mobile devices.||No|
|content_for_order_summary||The content summary, including line items, discounts, taxes, and totals.||No|
|alternative_payment_methods||The list of available express payment methods, such as PayPal.||No|
|content_for_footer||The list of your store policies or, if the list is empty, a copyright notice.||No|
|checkout||The checkout object.||No|
When working with
checkout.liquid, you should familiarize yourself with the following concepts:
- How to access
- Considerations for customizing checkout content
- How to identify the current checkout step
- Page events
- Checkout jQuery
- How to capture checkout attributes
To enable or disable access to
checkout.liquid, Shopify Plus merchants must contact support.
Before requesting access to
checkout.liquid, you should be familiar with the following versions of checkout and their implications:
|Standard||The default checkout. It's used if access to
Used when access to
Customize checkout content
You can't edit the content generated by any of the checkout objects, required or optional, before they're rendered. The only exceptions to this are for translation settings, theme editor settings, and some options made available in the Shopify admin.
An object that shows which step of the checkout the customer is on. It returns one of the following results:
processing- This is the step between the
payment_methodstep and the
review- This is an optional step set in the Shopify Admin.
An object that shows which type of page the customer is on. It returns one of the following results:
show- A page template for various steps of the checkout process.
stock_problems- A page that displays if there's an inventory issue with any cart items.
processing- A page that displays while the payment is being processed.
forward- A page from PayPal or another third-party gateway.
An object that can be used for adding content to the Order Status page. It can also help determine whether the customer is on a Thank You page or an Order Status page.
The Order Status page is usually considered as a
checkout page. However, the first time a customer visits the page, it's considered as a Thank You page, where the
Shopify.Checkout.page objects are defined.
If the customer revisits or reloads the page, then this
checkout is converted to an
order, and the page loads as an Order Status page, where the
Shopify.Checkout.page objects are undefined and the
Shopify.Checkout.OrderStatus object is defined.
All of the checkout steps are hosted on a single page, where the content is loaded dynamically depending on the current step. There are two main page events that are triggered during this process:
page:load event is triggered when the content of each step is loaded. This is the default event that you should use when adding content into the page on load.
page:change event is triggered when the customer is on the same checkout step, but part of the content has changed. For example, this event triggers when the discount form is submitted.
If you add content to the Document Object Model (DOM) with only
page:load, then there’s a risk that it could be overwritten by a
page:change event. To avoid this issue, you should watch for both events when adding content.
The checkout contains its own version of jQuery, which can be accessed using
Capture checkout attributes
You can capture checkout attributes in a similar way to capturing cart attributes.
To capture a checkout attribute, include an input with an attribute of
attribute-name is the desired name of your attribute, inside the main checkout form.
Note that capturing checkout attributes will remove any existing cart attributes. To learn how to avoid this issue, refer to Preserve cart attributes below.
Preserve cart attributes
When capturing checkout attributes, you can preserve any cart attributes with the
checkout.attributes Liquid object, which contains the cart attribute values. You can loop through the attributes to add them as checkout attribute inputs with names and values defined by the existing attribute data.