checkout.liquid

Shopify Plus

The checkout.liquid asset is available to Shopify Plus merchants only. If your store isn't on Shopify Plus, then you can customize your checkout pages on the Customize theme page of your Shopify admin.

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 gateways 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 gateway. 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).

Tip

If your theme uses a checkout.scss.liquid, it will be rendered inside the checkout.liquid layout template.

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.

Tip

If you don't have these two objects in your theme.liquid template, an error will occur in the Liquid rendering engine and you will not be able to save.

Optional objects

You also have access to 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). Most notably, this object includes the checkout.scss.liquid.
  • {{ 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.

Want to discuss this page?

Visit the Shopify Community