Guide To Tracking Page CSS

All user-facing CSS classes begin with `tp-` to give them their own namespace. This avoids any collisions or conflicts in existing CSS styles, or other pages on the website.

This list will grow over time as we expand the functionality of these pages - our goal is to provide a great-looking default, while we also make it easy to configure tracking pages as tightly as you want. We will expose more WYSIWYG features in the editor as it grows, but in the meantime you can write CSS statements to change the page style layout. CSS can be added in our editor to only expose it on your tracking page to further narrow the scope. In a future release, we will also expose template tags for modifying the specific text and language on the page. At this time, this text cannot be edited.

We appreciate the page speed is critical to a good website experience and search rankings, and treat your website with great respect. Where's My Order adds no site-wide javascript or CSS, or Shopify ScriptTags. As such, we do not affect your site's page speed or render times. Our code is only delivered on the /apps/wonderment page. Uninstalling our app removes all of our code cleanly.

The page body and tracking form:

.tp-tracking-page

The div wrapper for the entire tracking page, inside the Shopify header and footer.

.tp-tracking-details

The div inside the tp-tracking-page class.

.tp-error-message

If an HTTP error is returned from a search query or our tracking service, a short error message ("Something went wrong.") will be displayed.

.tp-form-wrapper

The div that wraps the Search block on the page empty state.

.tp-form-header

The div that wraps the welcome header on the empty state. ("Track your package")

.tp-track-your-package

The H1 element containing the headline text "Track your package"

.tp-loading-indicator

The progress indicator when retrieving shipment information. You can style or hide this indicator with this class.

.tp-form

The tracking input form element.

.tp-search-input

The input on the tracker form.

.tp-track-button

The button on the tracker form.

.tp-order-not-found

If no results are returned for the tracking or order number, a short error will be displayed. This message can be styled here.

.tp-carrier-details

The div underneath the estimated date of arrival, showing the carrier name, service level, and tracking number.

The Tracking History Block:

.tp-content-wrapper: 

The div wrapping the tracking history block below the carrier-details div.

.tp-steps

The div wrapping the pre transit->delivered stepper at the top of the tracking history block.

.tp-step

Each individual step inside the stepper block. You can access the completed version of the step with .tp-step-completed, and the paragraph text inside the step with .tp-step-label.

.tp-tracker-block

The div containing the complete tracking history of the order.

.tp-last-event

This div wraps the most recent tracking event, shown at the top of the tracking history block. By default, the page will show only the most recent tracking event, and then a button to expand and show the full history.

.tp-collapsible-events

This div contains events that are hidden under the "Show Shipment Journey" button are wrapped in this class.

.tp-btn-show-history

The button that shows/hides the tracking history.

.tp-empty-state

If there are no updates available for a package yet, we will show a short message "No details available. Details will be available when the carrier provides an update". This div wraps this message.

.tp-no-details-available

This is the class for the headline of the no details empty state mesage.

.tp-no-details-message

This is the class for the paragraph text on the empty state message.

.tp-date-display

Dates shown in the tracking history block are wrapped in this class.

Have questions or need help? Reach us at help@wonderment.cc for assistance.

Your cart