Need help changing text/button colors on tracking page?

Store Design
, , , ,

Topic summary

A user needs to customize the color scheme of their order tracking page, which is powered by a third-party app with custom CSS capabilities.

Specific requests:

  • Change text color above the tracking search bar to white
  • Make the search bar itself white
  • Style the search button with black background and white text

Solutions provided:

Multiple respondents offered CSS code targeting specific class selectors:

  • .pp_tracking_title for header text color
  • .PP-TextField__Input for search input styling
  • .pp-button-enter for button background and text colors
  • Additional selectors for tracking result text elements

One solution suggests adding the CSS to base.css file via Online Store > Themes > Actions > Edit Code, with !important flags to ensure style precedence. Another responder requested access to an account with an actual order to test the changes in context.

The discussion remains open pending implementation and verification of the proposed solutions.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Password: Welcome1

Menu drawer, left side > Order Status

All issues on “Order Status” tracking page. The tracking information provided is not authentic.

Few things

  1. How can I change the text color to white above the tracking number search bar?

  2. How can I change the search bar color itself to white, and the button to black with the white text?

The app that is embedded in the store has it’s own section of a custom CSS. Willing to use which ever as long as it works.

Thank you SO much for taking the time to assist me.

Screenshot 2025-01-05 at 5.46.28 PM.png
Screenshot 2025-01-05 at 5.46.28 PM.png2768×1520 197 KB

2

Hi @VictoriaNguyen

.pp_tracking_title {
  color: #fff;
}

.PP-TextField__Input.field__input.pp_Dawn_input {
  color: #fff;
}

.pp-button-enter.button-enter.btn.button.styled-submit.pp_enter_submit1 {
  background-color: #000;
  color: #fff;
}

.pp_tracking_result_title {
  color: #fff;
}

.pp_num_status_show {
  color: #fff;
}
3

Hi @VictoriaNguyen

Please provide us with an account that has the order so we can view it from your perspective to test and make the necessary adjustments.

Best,

Daisy

4

Hello @VictoriaNguyen ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
.PP-TextField__Input.field__input.pp_Dawn_input {
    background-color: #fff !important;
}

.button:after, .shopify-challenge__button:after, .customer button:after, .shopify-payment-button__button--unbranded:after {
    content: "";
    position: absolute;
    top: var(--buttons-border-width);
    right: var(--buttons-border-width);
    bottom: var(--buttons-border-width);
    left: var(--buttons-border-width);
    z-index: 1;
    border-radius: var(--buttons-radius);
    transition: box-shadow var(--duration-short) ease; 
    border: 1px solid #fff;
}

.pp_tracking_title {
  color: #fff !important;
}

.pp-button-enter.button-enter.btn.button.styled-submit.pp_enter_submit1 {
  background-color: #000;
  color: #fff !important;
}

.pp_tracking_result_title {
  color: #fff !important;
}

.pp_num_status_show {
  color: #fff !important;
}

Let me know if you need further assistance!

1 Like