Advanced: Guide To Tracking Page CSS

CSS Class documentation for configuring and styling your tracking page

Wonderment's tracking block comes with many user-configurable styling options for things like colors, fonts, and border styles on the tracking block for the most frequently edited items. Beyond those, the block can be deeply styled and configured using HTML & CSS to adapt it. We have added extensive CSS classes throughout the block to help make this as straightforward as possible.

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 Tracking History Block:

Description

Page Style CSS

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

.tp-content-wrapper

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

.tp-steps

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

The div containing the complete tracking history of the order.

.tp-tracker-block

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-last-event

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

.tp-collapsible-events

The button that shows/hides the tracking history.

.tp-btn-show-history

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-empty-state

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

.tp-no-details-available

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

.tp-no-details-message

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

.tp-date-display

Each individual shipment event is are wrapped in this class.

.tp-shipment-event

The date portion of each shipment event is wrapped in this class.

.tp-shipment-event-date

The detail portion of each shipment event is wrapped in this class.

.tp-shipment-event-details

The headline of the detail portion of each shipment event is wrapped in this class.

.tp-shipment-event-details-event

The location in the detail portion of each shipment event is wrapped in this class.

.tp-shipment-event-details-location

In the three column tracking layout, the location in the detail portion of each shipment event is wrapped in this class.

.tp-three-column-tracking-block

In the three column tracking layout, the hero image is wrapped in this class.

.tp-three-column-hero-image

In the three column tracking layout, the ETA is wrapped in this class.

.tp-three-column-eta

In the three column tracking layout, the entire tracking block is wrapped in this class.

.tp-three-column-order-details

If the status is "Waiting for Pickup", the ETA status will have this class on it.

.tp-eta-waiting-for-pickup

If the status is "Delivered", the ETA status will have this class on it.

.tp-eta-delivered

If the status is "pending", the ETA status will have this class on it.

.tp-eta-pending

If the status is "not delivered", the ETA status will have this class on it.

.tp-eta-notdelivered

The formatted portion of an ETA.

.tp-eta-status-day, .tp-eta-status-month, .tp-eta-status-date

The page body and tracking form:

Description

Page Style CSS

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

.tp-tracking-page

The div inside the tp-tracking-page class

.tp-tracking-details

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-error-message

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

.tp-form-wrapper

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

.tp-form-header

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

.tp-track-your-package

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

.tp-loading-indicator

The tracking input form element.

.tp-form

The input on the tracker form.

.tp-search-input

The button on the tracker form

.tp-track-button

If no results are returned for the tracking or order number, a short error will be displayed.

.tp-search-order-not-found, .tp-order-not-found

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

.tp-carrier-details


How did we do?