How can we define twig template based on checkout flow in Commerce 2.x?
I found out the answer. Share here if someone needed in the future.

I think if we want to define the twig template based on the checkout flow, we shouldn't create ones using the same plugin. (default is Multistep - Default)

Instead, we need to create a new plugin for the checkout flow. I followed the instruction here. https://docs.drupalcommerce.org/commerce2/developer-guide/checkout/create-custom-checkout-flow

After I finished the custom checkout flow plugin, we can create another flow based on the custom one.

Therefore, we can use Implements hook_theme_suggestions_HOOK_alter() to implement what we need.


/**
 * Implements hook_theme_suggestions_HOOK_alter().
 */
function bootstrap_sass_theme_suggestions_commerce_checkout_form_alter(array &amp;$suggestions, array $variables) {
  $suggestions[] = $variables["form"]["#form_id"];
}