Opening an external link in a popup window in Order history section to display shipment activity

Technical Q&A
, , ,
1

Hello, I have implemented the API for shipment tracking provided by my shipping partner on a subdomain tracking.mysite.com.

I want to add a link in Order history section for each order, that opens inside a popup to display content of the page ( Similar to Size Chart and other links that open in popups on product page ).

I am able to add link to redirect to the external tracking page but not successful in making it open as a popup using the resources available online. ( I pass Order ID as a hyperlink Parameter )

I am using Shella Theme.

1 Like
2

Hi @devansh_wsdn ,

This is Amelia from PageFly - a Landing Page Builder App

You can use a combination of JavaScript and Liquid code. Here’s a step-by-step guide to help you achieve this:

Step 1: Create a Popup Template1. Create a new snippet:

  • In your Shopify admin, go to Online Store > Themes.

  • Click on Actions > Edit code.

  • Under the Snippets folder, click Add a new snippet and name it order-tracking-popup.

  1. Add HTML and JavaScript for the Popup:

    • Add the following code to the order-tracking-popup.liquid snippet:

  

    Ă—
    <iframe id="tracking-iframe" src="" width="100%" height="400px"></iframe>

Step 2: Add the Popup Snippet to Your Order History Template1. Locate the Order History Template:

  • In the Sections folder, find the template file that renders the order history. This might be account-orders.liquid or a similar file.

  1. Include the Popup Snippet:

    • Add the following code where you want the “Order Tracking” link to appear:
{% for order in customer.orders %}
  
  [Track Order](https://tracking.mysite.com?order_id={{ order.id }})
{% endfor %}

{% include 'order-tracking-popup' %}

Step 3: Test the Implementation- Save your changes and test the implementation by going to the Order history section and clicking on the “Track Order” link. The tracking page should open in a popup.

I hope that my solution works for you.

Best regards,

Amelia | PageFly