> For the complete documentation index, see [llms.txt](https://docs.theshoppad.com/tracktor/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.theshoppad.com/tracktor/customize-tracktor/customize-your-tracktor-page.md).

# Customize your Tracktor Page

Adjust the layout of your Tracktor tracking page, add your own HTML, or apply custom CSS so the page matches your store's branding.

There are a few ways to customize how your tracking page looks and works. Whether you want to adjust the layout, add your own HTML, or apply custom CSS, the options below walk you through each approach.

If you're not sure where to start or want help making your tracking page match your store's branding, reach out to our support team, and we'll point you in the right direction.

***

### **CSS and HTML customization availability by plan**

Some customization options require a specific Tracktor plan:

* **Basic:** CSS and HTML customization are not available on this plan.
* **Starter and above:** Reach out to our support team, and we can make CSS adjustments for you.
* **Essential and above:** You can add CSS and HTML directly in the Tracking Page Editor yourself.

:::note
Not sure which plan you're on? You can check from your Shopify admin under Apps > Tracktor.
:::

### Option 1: Use the Customizable Tracking Page Layout

The Customizable layout is built with Liquid code, which means you can fully edit the template to control how your tracking page looks and what it displays.

It comes with a default template that works out of the box, so you don't need to make any changes to get started.

#### **To enable it:**

1. From the Tracktor dashboard, go to the **Tracking Page** section.
2. Select the **Customizable** layout and save your changes.
3. Use the **Preview** button at the top of the page to see how it looks.

#### **To edit the layout:**

If you're comfortable with Shopify theme code, click **Open Editor** to customize the underlying markup. Tracktor exposes a Liquid object with all the order and fulfillment data you need. For example, to display the order name on the tracking page:

<figure><img src="https://docs.theshoppad.com/tracktor/assets/image%20%2824%29.png" alt=""><figcaption></figcaption></figure>

### **To edit the layout:**

If you're comfortable with Shopify theme code, click **Open Editor** to customize the underlying markup. Tracktor exposes a Liquid object with all the order and fulfillment data you need. For example, to display the order name on the tracking page:

```
{{ tracktor.order.order_name }}
```

For a full list of available Liquid variables, [check out this resource](https://theshoppad.com/apps/tracktor/api/docs/liquid).

### Option 2: Adding Header and Footer HTML

_Available on the **Essential plan and above.** On Starter, contact support, and we can help._

You can add custom HTML to the top or bottom of your tracking page, which is useful for adding banners, messaging, or additional content.

1. From the Tracktor dashboard, go to the **Tracking Page Editor** tab.
2. Scroll to the bottom of the page and find the **Custom HTML** section.

<figure><img src="https://docs.theshoppad.com/tracktor/assets/Tracktor_customtopbottom_AS.png" alt=""><figcaption></figcaption></figure>

3. Add your HTML to the Header or Footer field.
4. Save your changes.

### Option 3: Centering your Tracking Page

_Available on **Essential plan and above**. On Starter, contact support and we can help._

If your tracking page content appears left-aligned and you'd like it centered, you can fix that with a quick CSS snippet.

1. From the Tracktor dashboard, go to the **Tracking Page Editor** tab.
2. Scroll down to the **Custom CSS** section.

<figure><img src="https://docs.theshoppad.com/tracktor/assets/Tracktor_customcss_AS.png" alt=""><figcaption></figcaption></figure>

3. Paste in the following CSS:&#x20;

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

If you want to add content around your tracking form, like additional instructions or branding, you can create a new page in Shopify and embed the Tracktor form there.

Add the code below to a new page in your Shopify store, along with any additional content you want to include. When a customer clicks **Track**, they'll be redirected to the default Tracktor tracking 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>
```

![](https://docs.theshoppad.com/tracktor/assets/docsassets555e25e4e4b027e1978e1c9aimages5f10d6a904286306f806f5f8file-gb8u4nxr9m.png)