# Customize your Tracktor Page

Here are some ways to customize your tracking page.

* [Use the Customizable Tracking Page Layout](#t0)
* [Adding Header and Footer HTML](#t1)
* [Centering your Tracking Page](#t2)
* [Create a new Tracking Page](#t3)

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 <a href="#t0" id="t0"></a>

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.

<figure><img src="/files/ZjxrwAQ0Lu81nrhk7Hgd" alt=""><figcaption></figcaption></figure>

#### 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](https://theshoppad.com/apps/tracktor/api/docs/liquid) for a detailed explanation of all of the liquid variables exposed by Tracktor.

### Option 2: Adding Header and Footer HTML <a href="#t1" id="t1"></a>

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.

<figure><img src="/files/uizumrfVTbOicxU0a3YR" alt=""><figcaption></figcaption></figure>

3\. Add HTML code to Header or Footer accordingly.

4\. Save your changes!

### Option 3: Centering your Tracking Page <a href="#t2" id="t2"></a>

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

2\. Scroll down to the **Custom CSS** section.

<figure><img src="/files/bpoM2lLlUR2Cu1xHNYbE" alt=""><figcaption></figcaption></figure>

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 <a href="#t3" id="t3"></a>

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>
```

![](/files/PCWku6HbPTJHFQspcD4B)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shoppad.gitbook.io/tracktor/customize-tracktor/customize-your-tracktor-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.