Track my order
<!-- Shopify "Track My Order" page (paste into a Page in Online Store > Pages, using HTML mode) -->
<section class="track-wrap">
<div class="track-card">
<h1 class="track-title">Track my order</h1>
<p class="track-subtitle">
Enter your tracking number and choose the carrier to open the tracking page.
</p>
<form id="trackForm" class="track-form" autocomplete="on">
<label class="track-label" for="trackingNumber">Tracking number</label>
<input id="trackingNumber" class="track-input" type="text" inputmode="text" placeholder="e.g. JD0002256789GB" required>
<label class="track-label" for="carrier">Carrier</label>
<select id="carrier" class="track-select" required>
<option value="" selected disabled>Select a carrier</option>
<option value="royalmail">Royal Mail</option>
<option value="dpd">DPD</option>
<option value="dhl">DHL</option>
<option value="ups">UPS</option>
<option value="fedex">FedEx</option>
<option value="laposte">La Poste / Colissimo</option>
<option value="chronopost">Chronopost</option>
<option value="gls">GLS</option>
<option value="evri">Evri (Hermes)</option>
<option value="mondialrelay">Mondial Relay</option>
<option value="custom">Other (paste tracking link)</option>
</select>
<div id="customLinkRow" class="track-row track-hidden">
<label class="track-label" for="customLink">Tracking link (optional)</label>
<input id="customLink" class="track-input" type="url" placeholder="https://...">
<small class="track-hint">If your carrier isn’t listed, paste the tracking link from the shipping email.</small>
</div>
<button type="submit" class="track-btn">Track</button>
<p id="trackError" class="track-error" role="alert" aria-live="polite"></p>
</form>
<hr class="track-sep">
<div class="track-help">
<h2 class="track-h2">Where do I find my tracking number?</h2>
<ul class="track-list">
<li>In your shipping confirmation email (“Your order has shipped”).</li>
<li>Or in your customer account (if you created one): <a href="/account" class="track-link">Go to my account</a>
</li>
</ul>
<p class="track-small">
If you can’t find it, contact us and include your order number and email.
<a id="supportMail" class="track-link" href="mailto:contact@maisonsellin.com?subject=Tracking%20help%20-%20Order%20%23&body=Hello%2C%0A%0AI%20need%20help%20tracking%20my%20order.%0A%0AOrder%20number%3A%20%0AEmail%20used%20at%20checkout%3A%20%0APostal%20code%3A%20%0A%0AThanks%2C">
Email support
</a>
</p>
</div>
</div>
</section>
<style>
.track-wrap{max-width:820px;margin:40px auto;padding:0 16px;font-family:inherit}
.track-card{border:1px solid rgba(0,0,0,.12);border-radius:16px;padding:22px;background:#fff}
.track-title{margin:0 0 8px;font-size:28px;line-height:1.2}
.track-subtitle{margin:0 0 18px;color:rgba(0,0,0,.7)}
.track-form{display:block}
.track-label{display:block;margin:14px 0 6px;font-weight:600}
.track-input,.track-select{width:100%;padding:12px 12px;border:1px solid rgba(0,0,0,.18);border-radius:12px;font-size:16px;box-sizing:border-box}
.track-input:focus,.track-select:focus{outline:none;border-color:rgba(0,0,0,.45)}
.track-btn{margin-top:16px;width:100%;padding:12px 14px;border:0;border-radius:12px;background:#111;color:#fff;font-size:16px;font-weight:700;cursor:pointer}
.track-btn:hover{opacity:.92}
.track-error{margin:10px 0 0;color:#b00020;min-height:20px}
.track-sep{margin:22px 0;border:none;border-top:1px solid rgba(0,0,0,.10)}
.track-h2{margin:0 0 10px;font-size:18px}
.track-list{margin:0;padding-left:18px;color:rgba(0,0,0,.78)}
.track-small{margin:14px 0 0;color:rgba(0,0,0,.72)}
.track-link{color:inherit;text-decoration:underline}
.track-row{margin-top:10px}
.track-hint{display:block;margin-top:6px;color:rgba(0,0,0,.6)}
.track-hidden{display:none}
</style>
<script>
(function () {
var form = document.getElementById("trackForm");
var tn = document.getElementById("trackingNumber");
var carrier = document.getElementById("carrier");
var errorEl = document.getElementById("trackError");
var customRow = document.getElementById("customLinkRow");
var customLink = document.getElementById("customLink");
var templates = {
royalmail: "https://www.royalmail.com/track-your-item#/tracking-results/%s",
dpd: "https://track.dpd.co.uk/parcel/%s",
dhl: "https://www.dhl.com/global-en/home/tracking.html?tracking-id=%s",
ups: "https://www.ups.com/track?tracknum=%s",
fedex: "https://www.fedex.com/fedextrack/?trknbr=%s",
laposte: "https://www.laposte.fr/outils/suivre-vos-envois?code=%s",
chronopost: "https://www.chronopost.fr/tracking-no-cms/suivi-page?listeNumerosLT=%s",
gls: "https://gls-group.eu/track-and-trace?match=%s",
evri: "https://www.evri.com/track/parcel/%s",
mondialrelay: "https://www.mondialrelay.fr/suivi-de-colis?numeroExpedition=%s"
};
function sanitizeTracking(value) {
return (value || "").trim().replace(/\s+/g, "");
}
function showError(msg) {
errorEl.textContent = msg || "";
}
carrier.addEventListener("change", function () {
var v = carrier.value;
if (v === "custom") {
customRow.classList.remove("track-hidden");
customLink.setAttribute("required", "required");
} else {
customRow.classList.add("track-hidden");
customLink.removeAttribute("required");
customLink.value = "";
}
showError("");
});
form.addEventListener("submit", function (e) {
e.preventDefault();
showError("");
var num = sanitizeTracking(tn.value);
var c = carrier.value;
if (!num) return showError("Please enter a tracking number.");
if (!c) return showError("Please select a carrier.");
var url;
if (c === "custom") {
var raw = (customLink.value || "").trim();
if (!raw) return showError("Please paste a tracking link, or choose a listed carrier.");
url = raw;
} else {
var tpl = templates[c];
if (!tpl) return showError("Carrier not supported. Choose “Other” and paste a tracking link.");
url = tpl.replace("%s", encodeURIComponent(num));
}
window.open(url, "_blank", "noopener");
});
})();
</script>