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
Partner if you are not comfortable proceeding with
the following tutorial.
Note
Additional scripts to customize the order status page are deprecated.
Merchants on the Basic, Shopify, and Advanced plans can make customizations to the order status page using the checkout and accounts editor . Shopify Plus merchants can use Checkout Extensibility to customize their order status page.
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 pickup in store 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 in-store pickup option.
Steps:
Desktop
From your Shopify admin, go to Settings > Checkout .
Scroll down to the Additional scripts section.
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>
Paste the code into the Additional scripts box. (command + v
on a Mac, ctrl + v
on a PC)
Complete a test order to view your order status page.