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.

During the checkout process, the checkout.liquid takes over the job of the theme.liquid and renders everything the visitor sees, including the following components:

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. It gives instructions that certain cart item quantities will be updated.
Customer information The customer enters his/her email address and shipping address (if required).
Shipping method The customer selects a shipping option or chooses to edit the 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 payment method, enters payment information, and specifies a separate billing address if needed.
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 step showing "We're processing your order" with an animation by default.
Order status The last step of checkout, displayed after an order is complete.

On every step, an Order summary showing the products, price, taxes, and shipping costs, is displayed in the right column (collapses on mobile).

Did you know?

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

Template Considerations

content_for_header and content_for_layout

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 outputs dynamic content generated by all of the other templates (index.liquid, product.liquid, and so on).

Did you know?

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

You cannot alter the primary flow of the checkout process (displayed below).

In order for checkout to work, {{ content_for_layout }} is treated as one object and the primary portion of your checkout flow exists here. Your checkout needs to execute in the following order as controlled by {{ content_for_layout }}:

  1. Customer email address – if the customer has an account this will be used to retrieve their shipping information for the order. This is also used to generate an abandoned cart if the customer does not complete checkout.

  2. Customer Address.

  3. Shipping.

  4. Payment.

Want to discuss this page?

Visit the Shopify Community