[Shopify]checkout.liquidで3つの各ページステップごとにJS処理を出し分ける方法

The checkout page of Shopify is divided into three steps

1. Shipping address input page
2. Shipping Method Selection Page
3. Payment Method Selection Page

Each step is divided into steps as shown in the following table.

This section describes how to use JavaScript to separate the information for each step.

Note that checkout.liquid can only be edited with the Shopify Plus plan and must be activated in advance by Shopify support.

Specific areas that can be edited in checkout.liquid

First, let's talk specifically about where the checkout page is and what can be edited in checkout.liquid.

The checkout page refers to the area after the cart (/cart) screen.

• Add products to the cart on the product detail page (store URL/products/)
• Go to the cart screen (store URL/cart)
• Click a button like "Continue Purchase" to proceed to the next screen.
• Shipping address" input screen ←Checkout page ①.
• Shipping method selection screen ←Checkout page ②
• Payment Method Selection Screen ← Checkout Page ③.

The part of the cart screen that is advanced is generally called the checkout page, as in the following example. And those pages are the parts that can be edited in checkout.liquid.

If you have a large project, you may want to add elements to the checkout page, or you may want to add some processing to the checkout page. If you have a large project, you may want to add elements to the checkout page, or add some processing on the checkout screen.

1. Upgrade your Shopify plan to Plus
2. Contact Shopify Support to activate checkout.liquid
3. Write the process in checkout.liquid

This is the process to be followed.

Three types of checkout pages

Next, we will look specifically at the three types of checkout pages (three steps) that were briefly introduced earlier. (We will use our own Orion Beer's checkout page as a reference.)

Checkout page 1: "Shipping Address

This is where you enter your shipping address. This is the first page of the checkout page.

Checkout Page 2 "Shipping Method Selection".

This is where you select your shipping method. Basically, the shipping cost should be determined by the amount and weight of the purchase. This is the second page of the checkout page.

Checkout Page 3: "Payment Method Selection".

The final checkout page is the payment method selection screen.

These are the screens that can be edited in the checkout.liquid file for each checkout process.

How to separate each step of the process in Shopify.Checkout.step

And now for the main topic, how to separate the process at each checkout step. Why is this separation necessary for each process?

By the way, the three types of checkout pages are

1. Shipping address input page
2. Shipping Method Selection Page
3. Payment Method Selection Page

The following is a list of the most important features of the system.

What happens if we simply write the process in JavaScript using checkout.liquid without first separating the processes? The result is that the process is applied to all checkout pages.

For example, let's say you added an input field called "desired delivery time" using the DOM in checkout.liquid. Then, each checkout page would display the desired delivery time, so the customer would have to enter it three times. Moreover, it would be uncomfortable for the customer to be asked for the desired delivery time even on the payment page (3).

What is needed, therefore, is to add a "desired delivery time" field to (2) "Shipping Method Selection".

The way to do this is to add the following line to the

The code can be written as follows to apply the process only to a specific checkout page.

Note that the above code is for shipping_information, which is the second checkout page. You can change the relevant part of the code to

1. Shipping address page (contact_information)
2. Shipping method page (shipping_method)
3. Payment method page (payment_method)

to apply the process to each page.

How to separate the JS processing for each of the three page steps in [Shopify]checkout.liquid Conclusion

The above is how to separate the checkout process for each checkout screen on checkout.liquid. checkout.liquid is only available with the Shopify Plus plan, so you will not have the opportunity to use it often. However, since there is not much information available in Japanese, I thought it would be a good opportunity to summarize it. I'm glad you found it useful!

Thank you for reading to the end! Have a great day!