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

Custom CSS (PRO Plan)

For PRO plan subscribers, Trackable offers a built-in Custom CSS editor that lets you style the tracking results page without editing any HTML directly.

Accessing Custom CSS

1. Open the Trackable app in your Shopify admin
2. Click Settings in the left sidebar navigation
3. You will see the Custom CSS editor with a text area for your styles
4. Write your CSS and click Save

If you are on the FREE plan, the Custom CSS section will show a prompt to upgrade to PRO.

How It Works

Your custom CSS is injected after the default tracking page styles. This means your styles take priority and can override any built-in styling. The CSS applies to the tracking results page that customers see after looking up their order.

CSS Class Reference

All tracking page elements use classes prefixed with .enb-. Here are the most common classes you can target:

• .enb-tracking-page — Main page container
• .enb-order-header — Order header card with greeting and status
• .enb-greeting-text — Customer greeting text
• .enb-status-badge — Order status badge
• .enb-notes-card — Order notes card
• .enb-fulfillment-card — Shipment tracking card
• .enb-progress-bar — Delivery progress bar
• .enb-carrier-info — Carrier information row
• .enb-timeline — Tracking event timeline
• .enb-items-card — Order items card
• .enb-address-card — Shipping address card
• .enb-map-card — Map section
• .enb-summary — Order summary totals

Example: Custom Font and Background

`.enb-tracking-page { font-family: “Helvetica Neue”, sans-serif; background: #fafafa; }

.enb-order-header { border-radius: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }`

Tip: Use your browser’s DevTools (right-click → Inspect) on your tracking page to explore all available classes and test styles before saving.

Order Notes Display

If you add notes to an order in your Shopify admin, those notes will automatically appear on the tracking results page in a highlighted card below the order header. This is useful for communicating special instructions, gift messages, or status updates to your customers.

Advanced HTML Customization

For more control beyond Custom CSS, 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.

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 HTML, 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
4. name=“order[phone]” for the phone field
5. name=“order[order_name]” for the order number field
6. Hidden Accent Color Field: The hidden input passes your button color to the tracking results page
7. Script Reference: Keep the script tag at the bottom:
8. Validation Script: The validateForm() function ensures customers provide at least an email or phone number, plus an order number

Best Practices

1. Use Custom CSS first: For styling changes, use the built-in Custom CSS editor (PRO plan) rather than editing HTML directly. It is safer and will not be overwritten when you save app settings.
2. Back Up First: Before editing HTML, copy the original code to a text file so you can restore it if needed.
3. Test After Changes: After customizing, test the form with a real order to make sure it still works correctly.
4. Check Mobile: Make sure your customizations look good on mobile devices.
5. 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. Custom CSS entered in the Settings page is not affected by this — it is stored separately and always applied.