GPX Route feature

The customers can now upload their running or cycling routes using a GPX file. Once uploaded, their path will be automatically highlighted on the preview!

The feature also supports pulling data from the route — such as total distance, starting and ending points, and start/end dates — so you can display these info automatically in the design.

Continue reading this Article to learn more about setting up this feature on your Store.

Creating the Artwork with Route Map Layer

In order for this feature to work, please be sure you have successfully connected to Mapbox service first.

Go to Artwork editor > edit an image layer
In Personalization Options, choose Route Maps

The following list explains what each of these settings does:

Option Title: The option title for the Route Map layer.
Upload GPX default: You can upload a default GPX route that will appear on the Live Preview by default—perfect for showing customers what their personalized product could look like before they upload their own route.
Default zoom level: Set the default zoom level for the map route display. Keep in mind—zooming in too much might cut off parts of the route, especially longer ones. Aim for a balance that shows the full path clearly.
Default line color: Choose the default color for the highlighted route on the map.
Default line thickness: Set how thick the route appears on the map. A thicker line stands out more, while a thinner one gives a more subtle look. Choose what fits your design best.
Default Map Styles URL: Select the visual style of the map by entering a Map Style URL. This controls the overall look—like colors, labels, and terrain—so you can match it to your product’s vibe. Please refer to the following article for more details.
Show Marker/Pin: Enable this option to display markers for the start and finish points of the route. You can upload your own custom marker or pin image and specify both its width and height to ensure it fits your design accurately.

Creating Layers for Distance, Start Point, End Point, Start Date, End Date

Make your design even more meaningful by adding details like distance, start and end points, and start/end dates. These elements automatically pull data from the uploaded Map Route, so once the customer uploads their GPX file, the info shows up instantly—no extra work required.

Before we begin, please read about our Auto-populate values from other options feature

Populating values from the Map Route layer

Adding Distance info to the Design

First, please create a static layer and name it Distance: similar to the screenshot. This layer serves purely as a title or label—it won’t display any actual route data just yet.
Then, create a new text layer where the actual distance will appear. This layer will automatically pull the distance data from the uploaded Map Route, so it updates based on each customer’s GPX file.

👉 In case you need a reminder, when editing a Text layer, please enable the toggle Populate values from other options. Then, you will be able to select the Layer you want to populate value from, which is the GPX Map Route layer.

Once you've selected the GPX Map Route layer, you will have to select the value to populate -- in this case, it is the distance.

Please be sure to enter the suffix after the value as well! In this case, we are using kilometer as a measurement. So the Values is {{route_distance}} km . This way, the final output will look something like “12.4 km” instead of just a number.

At the moment, the route distance value only supports kilometers. Other units like miles aren't available yet—so make sure your suffix and design reflect that.

Adding Start Point, End Point to the Design

Just like with the Distance info, begin by adding static text layers labeled Start Point and End Point. These serve as titles in your design to keep things clear and organized.

To create the populate layer, be sure to select the Route Map layer as its source, and set its value accordingly:

👉 Keep in mind:

When working with latitude and longitude values, you can use other formatting options available in the Map Street Map section. Just make sure you enter the correct prefix — route_start_point (or route_end_point if you're showing the end).

For example, instead of using:

route_start_point.lat, route_start_point.lng

You can use the formatted version:

route_start_point.lat:dd, route_start_point.lng:dd

to display them in decimal degrees.

Adding final touches to the Design

To make your design more polished and personal, consider adding customizable layers like the Marathon Name, Runner's Name, Bib Number, or any other details that make the product feel special.

Detailed explanation regarding the value table

The Value Table lets you define what data should appear in each dynamic text layer. It connects your text layer to a specific data source (like the Map Route), and lets you choose exactly which value to display—such as distance, start point, or end date

Format	Meaning	Example
{{route_distance}}	Returns total route distance	66.5 km
{{route_start_point.lat}}, {{route_start_point.lng}}	Returns starting point (can use other formats as in Street maps).	21.0285°N, 105.8544°E
{{route_end_point.lat}}, {{route_end_point.lng}}	Returns ending point (can use other formats as in Street maps).	21.0772°N, 105.9401°E
{{route_start_date}}	Returns start date of the route. For cleaner and more flexible formatting, we recommend using the Date Picker feature instead of pulling raw date values. It offers a variety of date formats and displays the information in a more polished, user-friendly way—perfect for making your design look its best.	2025-05-27T00:00
{{route_end_date}}	Returns end date of the route. For cleaner and more flexible formatting, we recommend using the Date Picker feature instead of pulling raw date values. It offers a variety of date formats and displays the information in a more polished, user-friendly way—perfect for making your design look its best.	2025-05-27T00:00

Creating the Campaign

Once you're done with creating the Artwork, add it to your Campaign as usual!

Be sure to double-check it on your Storefront to make sure all's good!

Updated on: 24/06/2025

Was this article helpful?

Thank you!