Which Part of the Shopify Code Edit is the Checkout?

Table of Contents

1. Introduction
2. Core Concepts of Shopify Checkout
3. Editing Checkout for Shopify Plus Merchants
4. Customizing the Checkout Experience
5. Conclusion
6. FAQ Section

Introduction

Imagine the thrill of finally launching your e-commerce store on Shopify, only to realize that you need to customize the checkout experience. How do you navigate the intricate nuances of Shopify's code to make these changes? If you’re puzzled about which part of the Shopify code edit is the checkout, you're not alone. This post aims to guide you through the relevant parts of Shopify's code that are crucial for editing the checkout process.

With online shopping becoming more prevalent, ensuring a seamless checkout experience is vital. Shopify provides numerous ways to customize this critical stage, especially for Shopify Plus merchants who have more advanced customization options. By the end of this blog post, you'll understand which parts of the Shopify code are involved in editing the checkout and how to make meaningful modifications that enhance user experience.

Core Concepts of Shopify Checkout

Checkout.Liquid and Its Deprecation

Historically, checkout customizations for Shopify Plus users have been managed through the checkout.liquid file, located in the layout directory of the theme. However, it's important to note that checkout.liquid is being deprecated:

• August 13, 2024: Sunsetting for Information, Shipping, and Payment checkout steps.
• August 28, 2025: Sunsetting for Thank You and Order Status pages.

As it phases out, Shopify urges merchants to migrate to Checkout Extensibility, offering a more robust and scalable way of customizing checkout experiences.

Checkout Extensibility

Shopify’s Checkout Extensibility is the new standard, especially compelled for merchants who wish to future-proof their stores. It provides several benefits:

• Upgrade-Safe: Ensures that customizations won't break with new Shopify updates.
• Code-Free Customizations: Many changes can be made without delving into complex coding.
• Integration with Shop Pay: Allows for seamless transactions with Shopify's payment solution.

Editing Checkout for Shopify Plus Merchants

Accessing the Checkout Code

To begin editing checkout.liquid file before it’s fully deprecated:

1. From Shopify Admin, navigate to Online Store > Themes.
2. Find the theme you want to edit, and click ... > Edit code.
3. In the layout directory, locate the checkout.liquid file.

Currently, Shopify Plus merchants must request access from Shopify Support. Once authorized, they can add and modify the checkout.liquid layout by integrating necessary objects and scripts.

Checkout Objects

The checkout.liquid layout renders various objects depending on the checkout step:

• Customer Information: Captures basic details like name and contact info.
• Shipping Method: Displays shipping options and fees.
• Payment Method: Details payment options and order confirmation.

Merchants can utilize JavaScript to identify the current checkout step (Shopify.Checkout.step) and tailor the user experience accordingly.

Customizing the Checkout Experience

Branding and Visual Customizations

To ensure your checkout pages align with your brand, Shopify allows multiple customizations directly through the admin panel:

1. Adding a Logo: Easily upload your business logo during the checkout.
2. Background Images and Colors: Enhance the visual appeal by adding custom background images or colors.
3. Fonts: Change the fonts to match your business theme.

For instance, to add a logo:

• Go to Settings > Checkout.
• In the configurations section, click Customize.
• Upload or select an existing image from your library and configure its alignment.

Practical Customizations via Checkout UI Extensions

If you need to introduce custom fields or extend functionalities, building a Shopify App for Checkout UI Extensions becomes necessary. Using the Extension Points and fitting APIs, merchants can:

• Implement Custom Fields: Add fields like order notes, gift wrap options, etc.
• Upsell Products: Show related products during the checkout process to increase cart value.

Here’s a simple example for adding a custom message field using Checkout UI Extensions:

extensions.UIExtension.map((checkout) => {
    return {
        title: "Leave a Note",
        html: '<input type="text" name="checkout[note]" placeholder="Add a note for your order">',
        placement: "order-summary"
    }
});

Capturing and Preserving Checkout Attributes

To preserve contextual data throughout the checkout:

• Capture checkout attributes by including inputs in the main checkout form.
• Preserve cart attributes using the checkout.attributes Liquid object to loop through and save data.

Example:

  var checkoutAttributes = {
      notes: document.querySelector('input[name="checkout[note]"]').value
  };
  Shopify.Checkout.saveAttributes(checkoutAttributes);

Optimizing Checkout Flow

A smoothly functioning checkout flow can be the difference between a sale and an abandoned cart. Consider these enhancements:

• Multiple Payment Options: Support different payment methods and express options (e.g., Shop Pay, PayPal).
• Minimize Required Fields: Only ask for essential information to streamline the process.

Conclusion

Customizing the checkout experience on Shopify offers a way to significantly improve your customer’s journey and potentially increase conversion rates. While the checkout.liquid file is being deprecated, the introduction of Checkout Extensibility provides a more flexible and future-proof solution. For merchants on Shopify Plus, leveraging the advanced customization options available ensures that even as Shopify evolves, your store's checkout experience remains top-notch.

FAQ Section

What is Checkout Extensibility?

Checkout Extensibility is Shopify's new way to customize the checkout experience safely and effectively without the need for heavy coding, allowing for seamless updates and integrations.

How Can I Access Checkout Code for Shopify Plus?

You must request access from Shopify Support to edit the checkout.liquid file. Once granted, you can modify this file within the layout directory of your theme.

Can Non-Shopify Plus Users Customize the Checkout?

Non-Shopify Plus users have limited customization options but can change visual aspects like logos, fonts, and colors through the theme editor.

What Happens After checkout.liquid is Deprecated?

Post the deprecation dates, merchants will need to transition to Checkout Extensibility to maintain customizations. Any stores not updated will revert to the standard Shopify Checkout.

How Do Checkout UI Extensions Work?

Checkout UI Extensions allow you to extend checkout functionalities by adding custom fields or extra features, integrating seamlessly with Shopify's checkout components and APIs.

By following these guidelines and understanding each part of Shopify's checkout customization, you can enhance your store's checkout process, making it both user-friendly and efficient.