Show content based on shipping method

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, JavaScript, and Liquid is required. We suggest hiring a Shopify expert if you are not comfortable proceeding with the following tutorial.

Learn how to use a conditional with the variable checkout.shipping_method.title.

For example, you might have a local pickup option for customers who live close enough to your brick and mortar store. You can give them the retail address of your store on the order status page if they select the "local pickup option".

Steps:

Desktop

1. From your Shopify admin, go to Settings > Checkout.

iPhone

1. From the Shopify app, go to Store > Settings.
2. Under Store settings, tap Checkout.

Android

1. From the Shopify app, go to Store > Settings.
2. Under Store settings, tap Checkout.

1. Scroll down to the Additional scripts section.

2. Copy the following code to your clipboard (command + c on a Mac, ctrl + c on a PC).

  <script>
    // DEBUG {{ checkout.shipping_method.title }} has been used
    {% if checkout.shipping_method.title == 'Pick-up at the store' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        `<p>Okay, we're ready for you to collect your products from 17 Mapple Crescent, Toronto. Our store is open 9:00 to 5:00 every day.</p>`
      )
    {% endif %}
  </script>

1. Paste the code into the Additional scripts box. (command + v on a Mac, ctrl + v on a PC)

2. Complete a test order to view your order status page.