To edit the tracking page, click here!
This article covers these subjects :
- Adapt the tracking page to your colors 🌈
- Widgets set-up 🖍
- Add a video on the tracking page
- Some ideas of tracking pages design to inspire you
1) 🌈Adapt the tracking page to your colors 🌈
It's important to change the colors of your tracking page to match your brand's color palette. It will enhance your client's brand experience.
To change the colors go there and click on 'Settings / Design'. This window appears :
- Available languages: Select all the languages of the countries on which you ship
- Customize the tracking page to your brand colors
2) 🖍Widgets set-up 🖍
This system works in drag and drop. A tracking page is set by default on Shipup but it's possible to resize all the widgets: size, borders, colors, icons...
⚠️⚠️ Warning: The addition of a widget on the tracking page for the 'desktop' view is not automatically added on the "mobile" view. Editing widgets on the tracking page must be done both on the desktop version AND on the mobile version.
-> List of available widgets :
- Delivery Status: Displays the complete history of package delivery tracking
- Estimated delivery date: More information here
- Carrier Information: Displays carrier name and order tracking number
- Order items: Displays the contents of the order
- Timeline: Chronological timeline indicating to the final customer the different steps of his order shipment
- Promotional banner: Allows the addition of a photo, an HTML code. This banner can be personalized by language: You can display different content from one language to another.
3) 🎥Add video on the tracking page 🎥
There are several steps to add a video to your tracking page:
- Steps for ALL
- 2.a. HTML for Youtube
- 2.b. HTML for external link
Choose between 2.a and 2.b depending if your video is on YouTube or is external.
1. Steps for all
- Add a promotional widget in your tracking page editor
- Click 'Edit'
- Upload an image as a backup in case. Some browsers can't read the video
- In 'content' section : Add the HTML code to integrate the video (see next steps)
2.a. HTML for Youtube
- Go on the YouTube video you want to embed
- Click on "Share" > "Embed"
- Copie the HTML code on the right
- Then go on your tracking page and edit your widget
- On the content, paste the HTML code
- And click "save"
The video can be launched directly when the tracking page is opened. You should add : ?autoplay=1 after the link of the video.
Let's watch this short video :
2.b. HTML for external video
- Follow steps 1.
- Copy your video link writing to the bold writing bellow
<div style="position: absolute;width:100%;height:100%;top:0;left:0">
<video style="width: 100%" autoplay loop >
- Copy and past the whole paragraph to the 'content' section of the promotionnal widget
- ⚠️⚠️Don't forget to save the modifications
4. Some ideas of tracking pages design to inspire you
Le Petit Ballon => Embedded by Shipup
Greenweez => Embedded on the client website
Adopt' => Embedded by Shipup
My American Market => Embedded on the client website
Caval => Embedded by Shipup