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.
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 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 firstname.lastname@example.org for assistance.