Rush - Help Center

Appearance

Style Tracking Page With Modern Theme ​

Overview ​

This article shares information to configure the tracking page style, look, and feel. Rush allows its clients to enhance their tracking pages by choosing from different themes available for example, light, dark, and custom themes. The customers can also customize the theme as per their liking and apply different color schemes, play with fonts and change the overall appearance that is consistent with their brand.

Set up the modern theme ​

To style the tracking page using the modern 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.

    • If you already have the Modern theme set up, click the "Customize" button.
    • If you have another theme set up, follow the steps below:

  4. Go to the "Themes" section and click on the "Add" button for Modern theme.

  5. Choose the Dark or Light version of the theme based on your preference and click the "Next" button.

    • To know more about these options, refer to the section below.

  6. Enter a Page title you like and click on the "Add page" button.

  7. Click on the "Save" button.

Choose Between Light and Dark Mode ​

The store owners can choose between the two layouts provided.

Here are a few examples of how the page will look in light and dark mode:

  • Light mode search order page view
  • Dark mode search order page view
  • Light mode tracking details view
  • Dark mode tracking details view
  • Menu page
  • Menu page

TIP

You can turn off the ability for the user to switch between the styles by adding the following snippet in CSS:

css
.toggle-dark-mode-btn {
  display: none !important;
}

Enable Customization ​

To further change colors, element sizes, and more; enable the CSS options located at the bottom of the tracking page options in the Rush app.

  • A custom CSS box will appear on the screen. Add the relevant custom CSS snippets to get started.

Remove the Light/Dark Mode Button on the Page ​

To remove the light/dark mode button on the page, add the following code snippet in the custom CSS box:

css
.toggle-dark-mode-btn {
  display: none !important;
}

Apply Custom Brand Colors ​

Following is the CSS that can be experimented with, in order to further customize the tracking page:

css
.custom-mode {
  --primary-background-color: #ffffff;
  --primary-text-color: #121721;
  --primary-text-muted-color: #7e8592;
  --secondary-background-color: #f5fafe;
  --text-color-active: #ff8500;
  --menu-text-color: #7e8592;
  --menu-text-active-color: #0085ff;
  --btn-primary-color: #f5fafe;
  --btn-primary-background-color: #0085ff;
  --btn-close-merchant-note-color: #7e8592;
  --text-input-color: #00267a;
  --text-input-background-color: #f5fafe;
  --text-input-border-color: #0085ff;
  --pin-background-color: #ffffff;
  --pin-circle-color: #0085ff;
  --pin-truck-color: #ffffff;
  color: var(--primary-text-color);
  background: var(--primary-background-color);
}

For example, changing the CSS like shown below:

css
.custom-mode {
  --primary-background-color: #ffffff;
  --primary-text-color: #000000;
  --primary-text-muted-color: #7e8592;
  --secondary-background-color: #ffd7d7;
  --text-color-active: #f299b2;
  --menu-text-color: #7e8592;
  --menu-text-active-color: #000000;
  --btn-primary-color: #f5fafe;
  --btn-primary-background-color: #000000;
  --btn-close-merchant-note-color: #7e8592;
  --text-input-color: #000000;
  --text-input-background-color: #f5fafe;
  --text-input-border-color: #ffd7d7;
  --pin-background-color: #ffffff;
  --pin-circle-color: #ffd7d7;
  --pin-truck-color: #ffffff;
  color: var(--primary-text-color);
  background: var(--primary-background-color);
}

Change Logo Size ​

To change the logo size, add the following code snippet in the custom CSS box:

css
.store-logo {
  max-height: 4rem;
}

TIP

Depending on how big a logo is required, keep increasing the value from for example, 4 to 4.5 and so on, with the increments of 0.5 until it meets your needs.

Change the Header Background on the Page ​

To change the header background on the page, add the following code snippet in the custom CSS box and replace the hex code #565874 with the background color of your choice.

css
.navbar {
  background: #565874 !important;
}

Hide Product Image Thumbnails ​

You can hide image thumbnails in the following areas:

Order Summary Popup ​

To hide only the order summary popup images, add the following code snippet in the custom CSS box:

css
.order-product-image {
  display: none !important;
}

To hide only the left-side search images, add the following code snippet in the custom CSS box:

css
.left-side-product-image {
  display: none !important;
}

To hide only the shipment details image, add the following code snippet in the custom CSS box:

css
.product-detail-image {
  display: none !important;
}

To hide the tracking permalink image, add the following code snippet in the custom CSS box:

css
.rush-track-number {
  display: none !important;
}

To hide the Terms of Service and Privacy Policy, add the following code snippet in the custom CSS box:

css
.footer-links {
  display: none !important;
}
.header-bottom-links {
  display: none !important;
}

Confirmation ​

That’s it!

Contact Us ​

For further support and queries, feel free to reach out and let us assist you.