Complete Guide to Style and Customize Your Branded Tracking Page
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
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.
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.
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.
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