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: 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 2: Centering your Tracking Page

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

2. Scroll down to the Custom CSS section.

If you are on the Basic Plan, you can follow this article to add CSS into your theme.

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 3: 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>

Still need help? Contact Us Contact Us