How to show content based on shipping method

show
content,
shipping
method

Many shop owners on Shopify also have their brick and mortar stores. In other words, they have not only the online shop but also the physical shop in real life. Hence, if the customers want to get the product, they have two options. They can add the item to their carts and pay for the shipping cost. However, it’s not a good idea if they live close to your physical store.

Therefore, I recommend you to give them the second option. It’s to inform the customers of the retail address on the order status page. Of course, the information is only shown when they select the local pickup option. This tutorial will help you to show content based on shipping method.

How to show content based on shipping method

To show content based on shipping method on desktop

Step 1: Go to Checkout

Log in your Shopify account. At the bottom of the admin page, click on Setting. Then, choose the Checkout button.

how to show content based on shipping method

Step 2: Go to Additional scripts

Scroll down to look at the Order processing section. Make sure to find out Additional scripts which is the last option in the four ones.

how to show content based on shipping method

Step 3: Copy the code

You can copy the following code in two ways. The first way is using Ctrl + C. The other way is using right click and taping on Copy.


<script>
    <!-- DEBUG {{ checkout.shipping_method.title }} has been used -->
    {% if checkout.shipping_method.title == 'Pick-up at the store' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        `<p>Your stuff has already arrived. Come and get it as soon as possible. Our brick and mortar is open from 8am to 6pm. Our                   address is 102 Tran Phu, Ha Dong, Ha Noi (on the 11th floor).</p>`
      )
    {% endif %}
</script>

Step 4: Paste in the Additional scripts section

Paste the script into the Additional scripts text box after you’ve copied it.

how to show content based on shipping method

Step 5: Click Save

Finally, click Save button to complete.

how to show content based on shipping method

To show content based on shipping method on Iphone

Step 1: Click Setting

Log in your Shopify app, click Store. Tap on Setting.

how to show content based on shipping method

Step 2: Go to the Checkout section

Choose the Checkout button in the Store setting field.

how to show content based on shipping method

Step 3: Find the Additional scripts

Scroll down and take a view of the Order processing. Look at the Additional scripts and click on the text box under it.

how to show content based on shipping method

Step 4: Copy the code

Select the entire code and taping on Copy to copy the following code.


<script>
    <!-- DEBUG {{ checkout.shipping_method.title }} has been used -->
    {% if checkout.shipping_method.title == 'Pick-up at the store' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        `<p>Your stuff has already arrived. Come and get it as soon as possible. Our brick and mortar is open from 8am to 6pm. Our                   address is 102 Tran Phu, Ha Dong, Ha Noi (on the 11th floor).</p>`
      )
    {% endif %}
</script>

Step 5: Paste the code

After copying the code, make sure to paste it into the Additional scripts text box.

how to show content based on shipping method

Step 6: Click Save

Scroll down and make sure to select Save after you’ve done.

how to show content based on shipping method

To show content based on shipping method on Android

Step 1: Click Setting

Make sure to log in your Shopify account, go to Store. Then, choose Setting.

Step 2: Go to the Checkout section

Select Checkout in the Store setting field.

Step 3: Find the Additional scripts

You can find the Order processing by scrolling down. Four options will come out . View the Additional scripts field and tap on the text box.

Step 4: Copy the code

In this step, make sure to copy the following code.


<script>
    <!-- DEBUG {{ checkout.shipping_method.title }} has been used -->
    {% if checkout.shipping_method.title == 'Pick-up at the store' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        `<p>Your stuff has already arrived. Come and get it as soon as possible. Our brick and mortar is open from 8am to 6pm. Our                   address is 102 Tran Phu, Ha Dong, Ha Noi (on the 11th floor).</p>`
      )
    {% endif %}
</script>

Step 5: Paste the code

After copying the code, paste it into the Additional scripts section.

Step 6: Save

Select Save to make sure that you’ve followed this guide successfully.

Summary

Above are some simple steps to show content based on shipping method. It just takes you about five minutes to have it done. Hope you will get the trust from the customers’ thanks to doing such a thoughtful affair like this.

Enjoyed the tutorial? Spread it to your friends!