How to Customize Tracking Page Design?

1. Overview / Purpose

Once your onboarding steps are complete, Advanced Tracking clients can fully customize the look and feel of their WeSupply/EasyPost Tracking Page. Customizing the design allows you to match your brand identity, improve customer experience, and use marketing assets or banners to drive engagement.

This guide will walk you through editing design, colors, fonts, CSS, and content to ensure your tracking page is perfectly aligned with your brand.

2. Pre-requisites

Before you begin:

• Ensure your onboarding setup is fully complete and your tracking page is active.
• You must have admin access to your WeSupply/EasyPost account.
• Prepare your brand assets, such as:
  • Brand fonts (or select from the provided dropdown options).
  • Hex codes for your brand colors.
  • Banner images or marketing content if you plan to add promotional sections.
  • Any custom CSS if you intend to apply advanced styling.

3. Step-by-Step Instructions

Step 1 – Access the Tracking Page Design Settings

1. Log into your Advanced Tracking Admin Panel.
2. Click on the Customize Settings button.
3. In the drop-down menu, select Tracking Page Design.
   

Step 2 – Select and Edit Your Page

1. In the Pages section, click the pencil icon to open the editing page.
   
2. From the Design dropdown menu, choose the Tracking Page Design template that best fits your brand.
3. Click Save Design to make your chosen design visible to customers.
   

Step 3 – Customize Colors and Fonts

1. On the left-hand side, click the Design tab.
2. Use the dropdown selectors for Primary Font and Body Font to match your brand typography.
3. Select your brand colors from the Colors section.
4. On the right-hand side, preview your changes in real-time.
5. Scroll down and click Save once you are satisfied.
   

Step 4 – Apply Global Custom CSS (Optional)

1. At the bottom of the Design tab, locate the Global Custom CSS field.
2. Use this section to apply advanced customization, such as:
   • Custom fonts
   • Targeted CSS styling
   • Adjusting spacing, buttons, or other visual elements
3. Save your changes.

Step 5 – Customize Content and Banners

1. Click the Content tab.
   
2. You will find three main banner positions:
   • Top Middle
   • Top Right
   • Bottom
3. Each banner position can display:
   • Image banners (e.g., ads or promotions)
   • Text content (e.g., customer service messages)
   • JavaScript (e.g., embedded social activity)
4. You’ll also see three Marketing Assets sections where you can add links or promotions.
5. Customize each section via the dropdown menus.
6. After making all of your changes, go back to the Design tab then click Save.
   

 

4. Examples / Best Practices

• Brand Alignment: Use your official brand fonts and hex color codes for consistency.
• Customer Engagement: Place marketing banners in the Top Middle or Bottom section to capture attention without disrupting the tracking flow.
• Support Content: Use the Top Right section for customer service messages, FAQs, or quick links.
• Test Responsiveness: Always preview on both desktop and mobile to ensure a seamless experience.

5. Troubleshooting / FAQ

Q: My changes don’t appear on the live page. Why?
A: Make sure you clicked Save Design after selecting your preferred template and Save after customizing fonts, colors, or content.

Q: Can I revert to a previous design?
A: Yes, simply select another design from the Design dropdown menu and click Save Design.

Q: Do I need coding knowledge for CSS customization?
A: No, coding is optional. CSS is only required if you want to go beyond the default design tools.

Q: Can I use both banners and marketing assets at the same time?
A: Yes, you can combine banners, text, and links to maximize both branding and promotional opportunities.