Customizing Your Track Your Order Page

Trackable gives you several ways to customize the look and feel of your order tracking page. This guide covers both the in-app settings and advanced HTML customizations.

In-App Customization

The easiest way to customize your tracking page is through the Trackable dashboard in your Shopify admin.

Page Title

Change the heading that appears at the top of your tracking page. The default is "Track Your Order" but you can set it to anything you like, such as "Where's My Order?" or "Order Status".

Additional Text

The description text shown below the title. Use this to provide helpful instructions or set expectations for your customers.

Button & Accent Color

The button color setting controls the appearance of the Track Order button on the form and all accent elements on the tracking results page. This includes:

  • The Track Order submit button
  • The delivery progress bar
  • Tracking timeline dots
  • Carrier icon badges
  • "Track with Carrier" link buttons
  • The greeting icon on the results page
  • Error page action buttons

You can choose from six preset colors:

  • Green (#008060) — default
  • Blue (#2c6ecb)
  • Black (#1a1a1a)
  • Purple (#7c3aed)
  • Red (#dc2626)
  • Orange (#ea580c)

Or use the Custom color picker to select any color that matches your brand.

After making changes, click Save in the top right corner to apply them to your tracking page.

Advanced HTML Customization

For more control, you can edit the tracking page HTML directly in your Shopify admin.

Accessing the HTML Editor

  1. Log in to your Shopify admin
  2. Navigate to Online Store > Pages
  3. Find the page titled "Track Your Order" (or your custom page title)
  4. Click on the page to open it
  5. In the editor, click the HTML button (<>) to access the HTML code

What You Can Customize

Page Text and Layout

You can modify the description text, add sections, or adjust the layout around the tracking form. For example, you might add shipping FAQs, return policy links, or customer service contact information.

Styling with CSS

The page includes an embedded <style> block that you can modify to change fonts, spacing, colors, and other visual properties. The form container has a max-width of 600px by default.

Form Field Labels

You can change the labels and placeholder text for the form fields (e.g., change "Email" to "Email Address" or update placeholder text).

Important Elements to Preserve

When customizing your page, make sure to keep these elements intact for the tracking functionality to work:

  1. Form Action: The form must keep its action attribute pointing to /a/enb-lookup/lookup
  2. Form ID: The form must retain id="enb-lookup-form"
  3. Input Field Names: The input fields must keep their original names:
    • name="order[email]" for the email field
    • name="order[phone]" for the phone field
    • name="order[order_name]" for the order number field
  4. Hidden Accent Color Field: The hidden input <input type="hidden" name="accent_color" value="..." /> passes your button color to the tracking results page
  5. Script Reference: Keep the script tag at the bottom: <script src="/a/enb-lookup/scripts/lookup-script.js"></script>
  6. Validation Script: The validateForm() function ensures customers provide at least an email or phone number, plus an order number

Adding Additional Content

You can add your own content around the tracking form, such as:

  • FAQ sections about shipping and tracking
  • Links to your shipping policy
  • Return and exchange information
  • Customer service contact details
  • Estimated shipping timeframes

Best Practices

  1. Back Up First: Before editing HTML, copy the original code to a text file so you can restore it if needed.
  2. Test After Changes: After customizing, test the form with a real order to make sure it still works correctly.
  3. Check Mobile: Make sure your customizations look good on mobile devices.
  4. Keep It Simple: A clean, straightforward design leads to the best customer experience.

Note: When you update settings in the Trackable app and click Save, the tracking page HTML is regenerated. This will overwrite any manual HTML customizations. Always back up your custom HTML before saving app settings.

Still need help? Contact Us Contact Us