Complete Guide to Style and Customize Your Branded Tracking Page
Platform: All platforms Plans: All plans
This guide provides step-by-step instructions to customize the styling of your branded tracking page. As a merchant, you can personalize your tracking page styles to match your brand's visual identity. Adjust various components of the page, including fonts, button radius, card borders, and more.
Branding Style Customization
Component Style Customization
Use Cases
Appendix
Style customizations are applied at the master page level and are inherited across all subpages, including the Tracking Results Page, Order Lookup Page, and Recipient Tracking Page, as well as across all language versions of the tracking page.
Branding styles allow you to customize colors, fonts, container shapes, and container frames (shadows and borders) used throughout the tracking page.
Go to your page variant > Edit.
Navigate to Style > Branding.
These settings apply to all elements on your tracking page.
Click Colors.
Customize the following:
a. Brand color: Used for fonts, text, links, and buttons. Select a color from the palette that matches your branding.
b. Color Mode:
Light: White background with dark text and elements.
Dark: Black background with light text and elements for high contrast. It reduces the amount of emitted light from the screen.
Customize background color: Check Customize background color to select a custom color outside of black and white.
Click Fonts.
Customize the Display, Title, and Body fonts by selecting from their respective dropdown menu.
To add a custom font:
Click Manage custom fonts > Add font.
Enter the Font name and Font URL. Refer to Adding Custom Fonts Guide for more details.
Click Add.
Fonts must be in WOFF, WOFF2, OTF, or TTF formats. Ensure you have the necessary license before uploading.
Customize the corners of various elements:
Containers
Blocks and pop-ups
Product and instagram images
Input boxes, buttons and tabs
Select from none, small, large, or rounded for corner radius.
Click Container shadows and borders.
Select a Shadow color from the palette.
Check Add border to enable borders.
Customize the Border Colorand Width.
These settings allow customization of various components across your page.
Click Customize.
Adjust the following under Default and Hover:
a. Background Color
b. Border
Color
Width
c. Text
Font
Font size
Text color
d. Shape - Radius dropdown
Click Customize.
Modify the Default, Focus, and Error:
Default: Normal appearance.
Focus: When a user is typing.
Error: When an invalid input is entered ( e.g., incorrect tracking number).
Customize the background color, border color, border width, text font, text font size, and shape.
Click Customize.
Adjust the Selected and Unselected:
a. Indicator
Color
Width
b. Text
Font
Font size
Color
Click Customize.
Adjust the Selected and Unselected:
a. Background Color
b. Border
Color
Width
c. Text
Font
Font size
Text color
d. Shape - Radius dropdown
Toggle Custom CSS to customize fonts, colors, backgrounds, and section layouts via CSS coding.
A Custom CSS code box will appear where you can write your CSS code.
Avoid changes outside of fonts, colors, backgrounds, and section layouts to prevent functionality issues.
E-commerce brand customization: Match the tracking page’s look and feel with your store’s branding.
Dark mode for improved UX: Enable dark mode for better user experience in low-light environments.
Custom fonts for branding: Use custom typography to enhance your brand identity.
WOFF / WOFF2 / OTF / TTF: Web font file formats supported for adding custom fonts.
Custom CSS: A coding feature that allows advanced styling modifications beyond given settings.
Pills: UI elements that act as category selectors.
Overview
This guide provides step-by-step instructions to customize the styling of your branded tracking page. As a merchant, you can personalize your tracking page styles to match your brand's visual identity. Adjust various components of the page, including fonts, button radius, card borders, and more.
What you’ll learn
Branding Style Customization
Component Style Customization
Use Cases
Appendix
Style customizations are applied at the master page level and are inherited across all subpages, including the Tracking Results Page, Order Lookup Page, and Recipient Tracking Page, as well as across all language versions of the tracking page.
Branding style customization
Branding styles allow you to customize colors, fonts, container shapes, and container frames (shadows and borders) used throughout the tracking page.
Steps to customize branding style:
Go to your page variant > Edit.
Navigate to Style > Branding.
These settings apply to all elements on your tracking page.
Customizing colors
Click Colors.
Customize the following:
a. Brand color: Used for fonts, text, links, and buttons. Select a color from the palette that matches your branding.
b. Color Mode:
Light: White background with dark text and elements.
Dark: Black background with light text and elements for high contrast. It reduces the amount of emitted light from the screen.
Customize background color: Check Customize background color to select a custom color outside of black and white.
Customizing fonts
Click Fonts.
Customize the Display, Title, and Body fonts by selecting from their respective dropdown menu.
To add a custom font:
Click Manage custom fonts > Add font.
Enter the Font name and Font URL. Refer to Adding Custom Fonts Guide for more details.
Click Add.
Fonts must be in WOFF, WOFF2, OTF, or TTF formats. Ensure you have the necessary license before uploading.
Customizing shapes
Customize the corners of various elements:
Containers
Blocks and pop-ups
Product and instagram images
Input boxes, buttons and tabs
Select from none, small, large, or rounded for corner radius.
Customizing container shadows and borders
Click Container shadows and borders.
Select a Shadow color from the palette.
Check Add border to enable borders.
Customize the Border Colorand Width.
Component style adjustments
These settings allow customization of various components across your page.
Customizing primary buttons
Click Customize.
Adjust the following under Default and Hover:
a. Background Color
b. Border
Color
Width
c. Text
Font
Font size
Text color
d. Shape - Radius dropdown
Customizing text boxes
Click Customize.
Modify the Default, Focus, and Error:
Default: Normal appearance.
Focus: When a user is typing.
Error: When an invalid input is entered ( e.g., incorrect tracking number).
Customize the background color, border color, border width, text font, text font size, and shape.
Customizing tabs
Click Customize.
Adjust the Selected and Unselected:
a. Indicator
Color
Width
b. Text
Font
Font size
Color
Customizing pills
Click Customize.
Adjust the Selected and Unselected:
a. Background Color
b. Border
Color
Width
c. Text
Font
Font size
Text color
d. Shape - Radius dropdown
Enabling custom CSS
Toggle Custom CSS to customize fonts, colors, backgrounds, and section layouts via CSS coding.
A Custom CSS code box will appear where you can write your CSS code.
Avoid changes outside of fonts, colors, backgrounds, and section layouts to prevent functionality issues.
Use cases
E-commerce brand customization: Match the tracking page’s look and feel with your store’s branding.
Dark mode for improved UX: Enable dark mode for better user experience in low-light environments.
Custom fonts for branding: Use custom typography to enhance your brand identity.
Appendix
WOFF / WOFF2 / OTF / TTF: Web font file formats supported for adding custom fonts.
Custom CSS: A coding feature that allows advanced styling modifications beyond given settings.
Pills: UI elements that act as category selectors.
Updated on: 28/03/2025
Thank you!