Customize Order Lookup Page


The order lookup page is where your customers track their orders on your website. This page keeps order-related information in one place, improving customers’ experience with your brand.


Note: Some settings are shared and affect both the tracking and order lookup pages.


How to Customize the Order Lookup Page


  1. From the Trackmage dashboard, navigate to Tracking Pages.

  2. Choose the tracking page you want to customize and click Visual Builder.


    dribe




  1. At the top of the page, click on the New Search text at the center of the button. 






You will be redirected to the Visual builder settings to customize the lookup page.
Note that if you click on the button frame, the Visual builder will show you customization settings for the Search button.

  1. Customize the different sections of the order lookup page using the guide below.

  2. When you are done with customizing the page, click Save to apply the changes.



Customize General Settings


This section includes the general settings for the order look-up page. 

Select General from the Visual Builder menu, and then click each of the options below to customize it.






  1. SEO Title


This snippet of text is displayed when your order lookup page appears in search results or is shared on social media. You want to ensure that the title contains your target keywords.

Enter your SEO title in the provided input box and click Apply.


  1. Favicon

To upload a favicon or logo, click Upload Image.


  1. Background

You can add a background image to the body section of the order lookup page. The background image is only applied to the body of the page, not to the footer and header sections.
To enable this option, toggle the Background Image button ON.
The system allows you to use a background color instead if you toggle the Background Image button Off. 

Note: The background image is the same for the tracking and order lookup pages.


To upload a custom image, click Upload Image and set the background option as Fullscreen or Pattern.


  1. Page Scroll

The page scroll is visible when you zoom into the order lookup page using the Control/Command and + keys on mobile or on screens with lower resolution.


Click Scroll Color, select your preferred color from the color palette, and then click Ok.

Click Border radius to change the default radius and click Apply.

To change the background color, click Background Color, select your preferred color from the color palette, and click Ok.


  1. Scripts

You can embed your Google Analytics, Facebook Pixels, or any other marketing tracking scripts to the page's <head> or <body>. To do this, 

Click Add Head Tracking Code or Add Body Tracking Code to open the inputs, paste the tracking code in the provided space and click Save to apply the changes.



Customize Header


The header is the top section of the order lookup page that has your logo, social media links, and language selection. To customize,

Select Header from the Visual Builder menu, and then click each option to customize it.

Note: The Header settings are the same for the tracking and order lookup pages.







  1. Background Color

Choose your preferred background color from the color palette and click Ok.

  1. Logo

You can enable/disable the logo icon by toggling the button. Click Upload Image to add your brand’s logo, enter your website’s URL and click Apply to link the image to your website. 

  1. Language Menu

By default, the order lookup page is in English. Toggle the Language Menu button On to allow your customers to change the default language on the order lookup page to their preferred language. 

If you toggle the Language Menu button Off, customers will access the order lookup page in your website’s default language only.


Select the default language displayed to all customers. For example, the default language is English. You may change this to a different language of your choice.


Click on Font Family to select your preferred font family from the dropdown. 

Click on Font Color to select your preferred text color from the dropdown.


  1. Social Icons

You can add your social media hyperlinks to the order lookup page. By default, you have Facebook and Twitter icons on the header. You can either click Edit to add your store’s social link or Delete to remove the social icon. 

To add a new social media platform, click Add New Link, select the social icon, and add the hyperlink. 

Then click Font Color to select your preferred text color from the dropdown.


Customize Search Page Title


The Search Page Title is the text that reads, “Please enter your tracking number … tracking results.” 






Select Search Page Title from the Visual Builder menu, and then click each option to customize it.

  1. Font

Click Font Family to select your preferred font family from the dropdown.

Click Font Color to select your preferred text color from the dropdown.


  1. Font Size

Use the slider to choose your preferred font size and then click Apply.



Customize Search Page Input


The search page input is where customers enter their email addresses or order numbers to track their orders.

Select Search Page Input from the Visual Builder menu, and then click each option to customize it.






  1. Shadow

This setting adds shadow effects around the search page input box when enabled. Toggle the Shadow Button On to use the feature.

Click Shadow, select your preferred options using the sliders, and click Apply


  1. Font

Click Font Family to select your preferred font family from the dropdown.

Click Font Color to select your preferred text color from the dropdown.


  1. Background Color

Choose your preferred background color for the search input box from the color 

palette and click Ok.


  1. Border Color

This setting applies a border color around the search input box.

Click Border Color, choose your preferred background color from the color palette, and click Ok.


  1. Border Width

Click Border Width, select your preferred options using the slider, and click Apply.


  1. Border Radius

Click Border Radius, select your preferred options using the slider, and click

Apply.


Track Button

Select the Track Button from the Visual Builder menu, and then click each option to customize it.






  1. Shadow

This setting adds shadow effects around the track button when enabled. Toggle the Shadow Button On to use the feature.

Click Shadow, select your preferred options using the sliders, and click Apply


  1. Font

Click Font Family to select your preferred font family from the dropdown.

Click Font Color to select your preferred text color from the dropdown.


  1. Shape Color

This setting adds a background color to the Track button.

Click Shape Color, choose your preferred shape color from the color palette and

click Ok.



  1. Border Color

This setting adds a border color around the search input box.

Click Border Color, choose your preferred background color from the color

palette, and click Ok.


  1. Border Width

Click Border Width, select your preferred options using the sliders, and click Apply.


  1. Border Radius


Click Border Radius, select your preferred options using the sliders, and click

Apply.


Footer


The Footer is the last section of the order lookup page. Select Footer from the Visual Builder menu, and then click each option to customize it.


Note: The Footer settings are the same for the tracking and order lookup pages.





  1. Background Color

Choose your preferred background color from the color palette and click Ok.


  1. Font

Click Font Family to select your preferred font family from the dropdown.

Click Font Color to select your preferred text color from the dropdown.


  1. Links Color

Click Border Color, choose your preferred background color from the color

palette and click Ok.


  1. Links Underline

This option underlines the links in the footer section, making it easy for users to identify links.

To enable links underline, toggle the button On, and it turns Green.

To disable links underline, toggle the button Off, and it turns Gray.


  1. TrackMage.com Branding

This setting hides or shows the Powered by Trackmage branding in the footer.

Click Visible to show or Hidden to hide the branding in the footer.

 

  1. Links

You can Edit or Delete default links like privacy policy and delivery policy on 

the footer. 

To add a new link, click Add New Link and enter the Link title and Web address.




Did this solve your problem?