Customize your tracking page with CSS

The Tracking Page settings let you change theme colors, fonts, and layout without touching code. But when you need pixel-level control — hiding an element, matching an exact button style from your theme, adjusting spacing — custom CSS is the tool.

Where to add custom CSS

1. From your Shopify admin, go to Apps → Parcel Track → Tracking Page.
2. Scroll to the Advanced section.
3. Paste your rules into the Custom CSS editor.
4. Click Save, then open your tracking page (yourstore.com/apps/parcel-track by default) to check the result.

Your CSS loads after Parcel Track’s own styles, so your rules win in most cases without needing !important. It applies everywhere the tracking page renders: the proxy URL, HTML page embeds, and the order lookup widget.

Tip: Before reaching for CSS, check the built-in options. Theme colors, fonts, corner radius, and section visibility toggles cover the most common changes — and they survive design updates with zero maintenance.

Finding the right selectors

Parcel Track uses stable, prefixed class names (all starting with .pt-) so your customizations don’t break between app updates. To find a selector:

1. Open your tracking page in Chrome or Firefox.
2. Right-click the element you want to change and choose Inspect.
3. Look for the nearest class starting with pt- and use that in your rule.

Common snippets

Hide an element

Hide the map:

.pt-map {
  display: none;
}

Hide the “Powered by” footer line:

.pt-footer-branding {
  display: none;
}

Change the lookup button color

.pt-lookup-button {
  background-color: #1a1a1a;
  color: #ffffff;
  border-radius: 4px;
}

.pt-lookup-button:hover {
  background-color: #333333;
}

Override fonts

Match your theme’s typography (the font must already be loaded by your theme or a standard web-safe font):

.pt-page {
  font-family: "Futura", "Helvetica Neue", sans-serif;
}

.pt-heading {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

Adjust the status timeline

/* Make completed timeline steps green */
.pt-timeline-step--done .pt-timeline-icon {
  background-color: #1e8e3e;
}

/* Larger status labels */
.pt-timeline-label {
  font-size: 15px;
}

Style the recommendations block

.pt-recommendations-title {
  font-size: 20px;
  text-align: center;
}

.pt-recommendation-card {
  border: 1px solid #eaeaea;
  border-radius: 8px;
}

See Drive sales with product recommendations for configuring the block itself.

Mobile-specific rules

Most tracking page visits happen on phones. Scope mobile tweaks with a media query:

@media (max-width: 640px) {
  .pt-map {
    display: none; /* hide the map on small screens */
  }
}

A few cautions

Note: Custom CSS is powerful, and with power comes the ability to hide the wrong thing. Keep these in mind:

• Don’t hide functional elements like the lookup form inputs or error messages — customers need them, especially when an order can’t be found.
• Test in more than one state. Check the page with a delivered shipment, an in-transit one, and an empty lookup form. See shipment statuses for the full list of states.
• Keep a copy. Save your CSS somewhere outside the app so you can restore it if you experiment and want to roll back.
• Prefer .pt- classes. Generic selectors like div > span can match unintended elements and may break as the page evolves.

We’ll style it for you

Not comfortable with CSS, or fighting a stubborn theme conflict? Email support@parcel-track.com with your store URL and a description (or screenshot mockup) of what you want — our team writes and installs the CSS for you, free on all plans.