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.

You can use a conditional script with the variable checkout.shipping_method.title to display content on the order status page when a particular shipping method has been used for an order.

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.
2. Scroll down to the Additional scripts section.
3. 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.