checkout.liquid

For merchants on Shopify Plus, the checkout process is rendered by the checkout.liquid file. Unlike theme.liquid, checkout.liquid is self-contained and does not render any additional template files. The checkout process includes the following steps:

Step Description
Inventory issues This 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.
Customer 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, the customer will be shown a shipping address form. Otherwise, the customer is shown a billing address form.
Shipping method The customer selects a shipping option or edits shipping info. 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.
Review order Optional based on checkout settings. The customer confirms their order total, shipping and billing addresses, and payment details by clicking Complete order.
This step may be required if operating in the European Union. Learn more ›
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, 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 (collapses on mobile).

Template considerations

Required objects

There are two Liquid objects that are required in checkout.liquid:

  1. The {{ content_for_header }} variable must be placed between the opening and closing <head> tag. It inserts the necessary Shopify scripts into the <head> which includes scripts for Google Analytics, Shopify analytics, for Shopify apps, and more.

  2. The {{ content_for_layout }} variable must be placed between the opening and closing <body> tag. It dynamically outputs the form fields and content for each step of the checkout process.

Optional objects

You can also reference the following objects in the checkout.liquid template:

  • {{ checkout_html_classes }}: a string that should be added to the HTML tag to benefit from our default CSS.
  • {{ checkout_stylesheets }}: Shopify's stylesheets (need some serious overrides if removed).
  • {{ checkout_scripts }}: Shopify's Javascript files.
  • Properties of the {{ checkout }} liquid object.
  • {{ content_for_logo }}: your shop logo, as determined by your theme customizations.
  • {{ order_summary_toggle }}: the markup necessary to show / hide the order summary on mobile devices.
  • {{ content_for_order_summary }}: the content summary, including line items, discounts, taxes and totals.
  • {{ breadcrumb }}: the list of steps required to complete the checkout.
  • {{ alternative_payment_methods }}: the list of express methods available, such as PayPal.
  • {{ content_for_footer }}: the list of your shop policies or, if empty, a copyright notice.
  • {{ tracking_code }}: required javascript code to track the checkout with Google Analytics.

Required checkout flow

The {{ content_for_layout }} object outputs all the necessary forms to complete checkout. The markup rendered by {{ content_for_layout }} is dependent on which step of checkout the customer is on.

Aside from translation settings and some options made available in the store's admin, the forms generated by {{ content_for_layout }} cannot be edited before being rendered. For a successful checkout, Shopify must capture specific customer information in a predetermined sequence.

Step Identification

The checkout is all hosted on one page, so the URL remains the same regardless of which step of the process a customer is on. There are Javascript objects which help define where in the checkout process you are. These can be viewed using tools such as Inspect Element in Google Chrome or the Page Inspector in Firefox.

Shopify.Checkout.step

The object that shows what step of the checkout you’re on. It is only present the first time you land on the “Order Status” page. This object will give one of the below results:

  • contact_information
  • shipping_method
  • payment_method
  • processing (between payment page and thank you page)
  • review (optional step set in the Admin)

Shopify.Checkout.page

Defines what “type” of page you’re on, and will return one of the results listed here:

  • show : page template for various steps of the checkout process.
  • stock_problems : page shown when there is an inventory issue with any cart items.
  • processing : page shown while processing payment.
  • forward : when you are taken off-site by PayPal or another 3rd party gateway.
  • thank_you

Shopify.Checkout.OrderStatus

While the “Order Status” page can be considered a “checkout” page, the Shopify.Checkout.step and Shopify.Checkout.page objects are only defined here the first time you land on the page; at this point, it’s a “Thank You” page. If the customer revisits or reloads the page, this “checkout” is converted to an “order”, and the page loads as an “Order Status” page.

Upon reload, both the Shopify.Checkout.step and Shopify.Checkout.page objects will return as undefined, while the Shopify.Checkout.OrderStatus will still show as an object.

Page Events

All the steps of checkout are technically hosted by a single page; the content is simply pulled in/out depending on what the current step of the checkout may be. With this, there are 2 main page events that are triggered during this process.

Page:load

This event is triggered when the content of each step is loaded, showing a new "page". This should be the default event you use when adding content into the page on load.

$(document).on(‘page:load’, function() {
  // add content
});

Page:change

This is triggered when the page is still the same, but sections have been “re-painted” (ie. the discount form is submitted).

$(document).on(‘page:load page:change’, function() {
  // add content
});

The trouble with adding content to the Document Object Model (DOM) with only page:load is that there’s a risk that it could be wiped out onpage:change. With this, you may want to watch for both events when adding content into your checkout.

Ready to start selling with Shopify?

Try it free