1. Help Center
  2. Tracking page
  3. Code-Your-Own Tracking page

Code my own Themed Tracking Page Customization FAQs

Overview

This article will address and answer the most common customization questions regarding the tracking page.

Tip

Before you make any edits and customize the theme, we recommend that you copy/paste the HTML code into a backup file. This backup file will serve as a reference in case you delete something important in the theme by mistake.

Set up the DIY theme

To style the tracking page using the DIY theme, follow these steps:

  1. Select Apps from the navigation sidebar on the left.
  2. From the list of installed apps, select the Rush app.

  3. Select the Tracking page from the left navigation sidebar.
  4. If you already have the Code my own theme set up, click the Customize button. If you have some other theme set up, follow the steps below:

    1. Go to the Themes section and click on the Add button for Code My Own them
    2. Enter a Page title you like and click on the Add page button
    3. Click on the Save button to save the changes.
  5. Navigate to the Tracking page code section and make the required edits in the code.

FAQs

  1. How can I change colors on the tracking page?
    The most important colors are added on top of the page as CSS variables. Feel free to edit the variables to update the page colors and style.
  2. How to change the font of the tracking page?
    In <style> tag before the :root, add the font with @import directive. For example:

    @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

    * {

    font-family: 'Poppins', sans-serif;

    }
  3. How to update text on the page?
    To understand this better, let’s see an example. We will update the title on the tracking page from Track Your Order Live to Track orders.


    pasted image 0-Apr-28-2023-08-12-52-3322-AM

    To do so:

    1. Use the Ctrl + F keys to search for the required text, for example Track Your Order Live in this case. Update it to Track Orders.
    2. Remove the data-i18n attribute. Keeping this attribute will keep translating the text in that field based on the selected language. If you change the language, the text will change as well. For more information, refer to the note below.
    3. Hit the Save button.

      This is what the final result will look like:


Note

  • Keep in mind that removing data-i18n attribute means the text will no longer change based on language selected from settings or when the user picks another language from the dropdown.
  • Use it only when you want to create a single language based tracking page.
  • You can also create a custom language and modify the translations as per your use case. More more information, refer to the Add a New Language article.  

Contact us

Feel free to reach out to us if you have any queries regarding this topic and we’ll be happy to assist you.