With Rush you can enhance your tracking page with a logo, design and copy that is consistent with your own brand.

Choose between Light and Dark layout

Out of the box we provide default style available for Light and Dark mode (customers can change it based on their preference), but you can set a default one.

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

Apply your custom brand colors

You can further change colors, element sizes, and more by enabling the CSS options, at the bottom of the tracking page:

You can start experiment with this CSS, and maybe do a but more

.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 it to:

.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);
}
.store-logo {
max-height: 4rem;
}

will result in:

Search order

Tracking view

How can I change the Logo size on the page?

The easiest option is to go to CSS and enable it. And then add:

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

The bigger you want to be increased the value 4 to 4.5 and test it out until it meets your needs.

How can I remove the light/dark mode button on the page?

The easiest option is to go to CSS and enable it. And then add:

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

How can I change the Header background on the page?

Add this CSS and replace the code #565874 with the background color of your choice.

.navbar {
background: #565874 !important;
}

How I can hide my product images thumbnails?

You can hide images thumbnails on several areas:

  • Order summary popup;

  • Left sidebar search;

  • Left sidebar shipment;

If you want to hide them altogether, you can use:

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

To hide only your order summary popup images

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

Before

After

To hide only left side search images

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

Before

After

To hide only shipment details image

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

Before

After

To hide the Tracking Permalink

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

Before

After

Did this answer your question?