Need help changing text/button colors on tracking page?

Store Design
, , , ,
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