How to show tracking link and number easily based on order tag in Shopify

Getting tracking link and number on orders based on tags in Shopify can be tricky. So this blog guides you about showing tracking url and number based on order tag.

Let imagine a situation where you have two shipping conditions, where if order is from your city, you deliver it from your store so no tracking link required . Second scenario is when order is out from your city and you use any shipping company to deliver the product and they provide you tracking link.

Scenario

So in this case, you can tag your city orders as “other” so no tracking link and number will be generated. Same condition will be applied on customer account. So if customer order is from your city , then no tracking url and number will show . If order is out of your city, Tracking link and number will be visible.

Shopify Order Objects

So we use Shopify order_tag attribute to create a condition to show tracking link and number. Here we use “other” tag for same city orders, you can use any tag on your orders.

Make sure in below code tag matches with your order tag. its case sensitive.

Complete Code

{%- assign tracking_url = '' -%}
{%- assign tracking_number = '' -%}

{%- if order.tags contains 'Others' -%}  <!-- Show tracking only if the tag is 'Others' -->
  {%- for line_item in order.line_items -%}
    {%- if line_item.fulfillment.tracking_number != blank and tracking_number == '' -%}
      {%- assign tracking_url = line_item.fulfillment.tracking_url -%}
      {%- assign tracking_number = line_item.fulfillment.tracking_number -%}
      {%- break -%}  <!-- Stops the loop after the first tracking number is found -->
    {%- endif -%}
  {%- endfor -%}

  {%- if tracking_number != '' and tracking_url != '' -%}
    <h3 class="singleOrder__id">Tracking No.: <a href="{{ tracking_url }}" target="_blank">{{ tracking_number }}</a></h3>
  {%- else -%}
    <h3 class="singleOrder__id">Tracking No.: <a href="https://demosite.com">No Tracking Available</a></h3>
  {%- endif -%}
{%- else -%}
  <!-- Do nothing here if the tag is not 'Others' -->
{%- endif -%}

Key Logic:

1. Show Tracking if Tag is “Others”: The code checks if the order contains the tag “Others”. If it does, it shows the tracking link.
2. Do Nothing Otherwise: If the tag is not “Others”, nothing is displayed.

This ensures that the tracking information is displayed only when the order has the tag “Others”, and for all other orders, no tracking link or URL is shown.

Step-by-Step Breakdown:

Variable Initialization: The code starts by assigning two empty strings to tracking_url and tracking_number. These will later be used to store the URL and tracking number of the order’s fulfillment, if available

{%- assign tracking_url = '' -%}
{%- assign tracking_number = '' -%}

Check Order Tags: The core of the logic is the condition{%- if order.tags contains 'Others' -%} This checks if the order contains the tag “Others”. If the tag is present, the code inside the if block will execute, meaning the tracking information will be displayed. If the tag is missing, no tracking link will be shown.

Loop Through Line Items: If the tag is “Others”, the code loops through all the line_items in the order

{%- for line_item in order.line_items -%}

Within this loop, the code checks if the line_item has a valid fulfillment.tracking_number. If it exists and the tracking_number variable is still empty, the tracking URL and number are assigned.

{%- if line_item.fulfillment.tracking_number != blank and tracking_number == '' -%}
  {%- assign tracking_url = line_item.fulfillment.tracking_url -%}
  {%- assign tracking_number = line_item.fulfillment.tracking_number -%}

The loop breaks after the first valid tracking number is found.

Display Tracking Information: Once the tracking information is found, the code checks if both the tracking_url and tracking_number are not empty

{%- if tracking_number != '' and tracking_url != '' -%}
  <h3 class="singleOrder__id">Tracking No.: <a href="{{ tracking_url }}" target="_blank">{{ tracking_number }}</a></h3>

If both are available, it displays the tracking number as a clickable link. If not, it shows a message stating “No Tracking Available”

<h3 class="singleOrder__id">Tracking No.: <a href="https://shakehands.co.in">No Tracking Available</a></h3>

If No “Others” Tag: If the order does not contain the “Others” tag, the else block remains empty

{%- else -%}
<!-- Do nothing here if the tag is not 'Others' -->
{%- endif -%}

Summary:

The logic ensures that only orders tagged as “Others” (typically for out of city deliveries) will display the tracking link. For orders without this tag, the tracking information is hidden. This provides a seamless experience for customers while adhering to the website’s delivery policies.