Customize your Tracktor Page

 Here are some ways to customize your tracking page.

If your tracking page needs more styling to more closely match your brand, you can contact our customer support team and we would be happy to help.

Option 1: Use the Customizable Tracking Page Layout

The Customizable tracking page layout is built with liquid code, allowing you to fully customize the layout by editing the template.

Note: The Customizable tracking page layout comes with a default template that works out of the box.

1. To use the Customizable tracking page layout, first navigate to the  Tracking Page section from the Tracktor dashboard.

2. Select the Customizable layout, then save your changes. After saving your changes, it's best to preview the new tracking layout using the  Preview button at the top of the page.

Editing the layout

If you're comfortable with Shopify theme code, you can change the underlying markup to suit your needs. Click on the Open Editor button to get started.

Tracktor exposes a liquid object containing all the order and fulfillment data needed to build out the tracking page. For example, if you want to display the order name on the tracking page, you would include the tag:

{{ tracktor.order.order_name }}

Check out this resource for a detailed explanation of all of the liquid variables exposed by Tracktor.

Option 2: Adding Header and Footer HTML

1. Navigate to the Tracking Page Editor tab from the Tracktor dashboard. 

2. Scroll down to the very bottom of the page to the Custom HTML section. 

3. Add HTML code to Header or Footer accordingly.

4. Save your changes!

Option 3: Centering your Tracking Page

1. Navigate to the Tracking Page Editor tab from the Tracktor dashboard.

2. Scroll down to the Custom CSS section.

3. Copy the following CSS and paste it into the section.

#tracktorOrderForm {
  text-align: center;
}

#tracktorOrderForm label {
  text-align: center;
}

#tracktorOrderForm .field.recaptcha > div {
  margin: 0 auto;
}

4. Save your changes!

Option 4: Create a new Tracking Page

In some cases, the Tracktor page needs to be edited in order to add additional content. Although you can't add content directly to the page, there is a work around. Simply add the following code to a new page that you've created on your Shopify store, along with any additional information you need, and it will display the Tracktor form.

Once a customer clicks on the Track button, they will be redirected to the default Tracktor page.

<center>
  <form id="tracktorOrderForm" class="tracktorCustomTrackingPage" method="GET" action="/apps/tracktor">
    <h1>Track Your Order</h1>
      <div>
        <label for="tracktorOrderName">Order Number</label>
        <br>
        <input id="tracktorOrderName" type="text" name="order" style="min-width: 250px; max-width: 450px;">
      </div>
      <br>
      <div>
        <label for="tracktorOrderEmail">Email</label>
        <br>
        <input id="tracktorOrderEmail" type="text" name="email" style="min-width: 250px; max-width: 450px;">
      </div>
      <br>
    <button id="tracktorTrack" class="button-enter btn styled-submit">Track</button>
  </form>
</center>

Related Articles