For all of you that want further customizations, we suggest before editing the HTML to always copy/paste it into a file, so you have your starting point, in case you deleted something that you should not :)

FAQ

Q: How I can change colors on the tracking page

We added the most important colors on top of the page, as CSS variables. Feel free to edit the variables to polish the page colors and style.

<style>
:root {
--text-color: #111111;
--text-danger: rgb(107, 44, 44);
--text-muted-color: #6B7280;
--primary: #000000;
--secondary: #000000;
--active: #000000;
--active-hover: #333333;
--border-radius-custom: 0;
--card-outline-color: #e5e7eb;
--card-header-background: #000000;
--card-header-text: #ffffff;

--shipment-delivered: #45CE78;
--shipment-pickup: #45CE78;
--shipment-in-transit: #0085FF;
--shipment-out-for-delivery: #FF8500;
--shipment-failed-attempt: #D20F3A;
--shipment-exception: #D20F3A;
--shipment-expired: #D20F3A;
--shipment-pending: #7E8592;
}
....
</style>

Q: How to change the font of the tracking page

In <style> tag before the :root add the form with @import directive. Example:

<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
* {
font-family: 'Nunito', sans-serif;
}

:root {
....

Q: How to update text on the page

Let's say for example you want to update the title saying "Track Your Order Live" on the tracking page to "Track orders". In the Search box component, you have the following tags:

<!-- Search box
Shown only when needed.

-->
...
<h2 class="block text-3xl font-medium tracking-tight sm:text-4xl text-center" data-i18n="jquery.ui.search_form_heading">
Track Your Order Live
</h2>
...
<!-- /Search box-->

For you to do that you need:

  • edit Track Your Order Live to Track orders

  • remove data-i18n attribute. This attribute means, that we should keep updating text in that field based on a different language.

Leaving a final result to:

<!-- Search box
Shown only when needed.

-->
...
<h2 class="block text-3xl font-medium tracking-tight sm:text-4xl text-center">
Track orders
</h2>
...
<!-- /Search box-->

The same logic applies to placeholders and other tags. Save the new version, and voilĂ :

Note: Keep in mind that removing data-i18n attribute means the text no longer change based on language variable.

Did this answer your question?