Order tracking page - font colour

Solomond
Explorer
59 2 4

I am tracking an order from a order confirmation page:

Solomond_1-1710325862160.png

 

When I get to the tracking page the font text is all white so doesn't show the details to the customer:

Solomond_0-1710325805369.png

Does anyone know how to change the font colour to black?

thanks

Replies 8 (8)

oscprofessional
Shopify Partner
15868 2373 3075

Hello @Solomond,
To fix the issue of the white text not showing on the tracking page, you can apply CSS properties to change the color of the text. Here's a basic example of how you can do this:

 

/* Apply CSS to change the text color to black */
.tracking-details {
    color: black;
}

/* If necessary, adjust the font size and weight */
.tracking-details {
    font-size: 16px; /* adjust the font size as needed */
    font-weight: normal; /* adjust the font weight as needed */
}

 

You can add these CSS rules to your website's stylesheet. Make sure to replace .tracking-details with the appropriate class or selector for the element containing the tracking details on your tracking page.

Additionally, you may need to inspect the elements on your tracking page using developer tools in your web browser to identify the specific class or selector for the text that needs to be changed. Once you've identified it, you can apply the appropriate CSS properties to override the white text color.
If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you. Provide me with the URL for the store you mentioned in your query? Additionally, if the store is password protected, could you share the password as well?

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Solomond
Explorer
59 2 4

Hi, thanks for this. Can you walk me through the steps of how add this code to the website stylesheet?

oscprofessional
Shopify Partner
15868 2373 3075

Hello @Solomond ,
Yes Sure, But Please Share Your Store URL I Will Do For You Then Just you have to Follow the Path because here I need to find the css file.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Solomond
Explorer
59 2 4

Hi, the url is www.hobbster.co.uk. How can I send you the collaborator request code?

 

oscprofessional
Shopify Partner
15868 2373 3075

Hello @Solomond ,
For Your Queries, i have to Place an Order then the  image will show  Where the Font Text is  not displaying.
See Like this :

oscprofessional_0-1710329169632.png

 


If you Know the CSS element you can follow this path.
Go to the Online Store-> Theme-> Edit code-> Assets> base.css -> Add code at the bottom

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Solomond
Explorer
59 2 4

Sorry if i am not following precisely what you're saying. You're saying in 'Assets> base.css' - apply this code exactly as per below:

 

/* Apply CSS to change the text color to black */
.tracking-details {
color: black;
}

/* If necessary, adjust the font size and weight */
.tracking-details {
font-size: 16px; /* adjust the font size as needed */
font-weight: normal; /* adjust the font weight as needed */
}

Solomond
Explorer
59 2 4

Morning, are you able to clarify my last question?

ParcelPanel
Explorer
73 2 6

Hi Solomond, it seems that you're using ParcelPanel. We have 24/7 customer support. Don't forget that we also offer free expert service for those who need to modify the styles of fonts, colors, etc. on their order tracking page. ParcelPanel's customer service will always prioritize your needs. So, just reach out via the live chat after you log in to our app, and we'll take care of it. 🤗

Make Post-Purchase the Best Part of the Customer Experience.
Delight your customers with automated shipment tracking, increase brand loyalty and drive more sales.
Official Website | ParcelPanel Shopify App