Order Tracking
Page: Product Pages (Optimized for Conversions)


Snippet Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>Kiddzy Timeline | Smart Order Tracking</title>
<style>
/* MAIN TIMELINE WRAPPER - FULLY RESPONSIVE */
.kiddzy-timeline-wrapper {
padding: 30px 16px;
font-family: inherit;
background: #ffffff;
border-radius: 48px 48px 40px 40px;
box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.02);
width: 100%;
max-width: 600px;
margin: 0 auto;
transition: all 0.2s ease;
}
/* zigzag container: base is column, centered, width dynamic */
.kiddzy-timeline-zigzag {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
max-width: 440px;
margin: 0 auto;
}
/* each step default: align center on mobile then fine-tuned */
.kiddzy-timeline-step {
display: flex;
flex-direction: column;
align-items: center;
width: 150px;
max-width: 160px;
position: relative;
z-index: 2;
background: transparent;
transition: transform 0.2s;
}
/* responsive: adjust step width on narrower screens */
@media (max-width: 480px) {
.kiddzy-timeline-step {
width: 130px;
}
.kiddzy-blob-wrapper {
width: 100px !important;
height: 100px !important;
}
.kiddzy-blob img {
width: 80px !important;
}
.kiddzy-arrow {
width: 55px !important;
}
.arrow-1,
.arrow-2,
.arrow-3 {
transform: scale(0.9);
}
.kiddzy-step-title {
font-size: 11px !important;
}
.kiddzy-step-date {
font-size: 9px !important;
}
}
/* left aligned step for left side */
.kiddzy-step-left {
align-self: flex-start;
margin-left: 0;
}
/* right aligned step for right side */
.kiddzy-step-right {
align-self: flex-end;
margin-right: 0;
}
/* special margin adjustment for second step to match zigzag overlap */
.kiddzy-timeline-step_secend {
margin-top: -45px;
margin-bottom: -15px;
}
.kiddzy-timeline-step-thred {
margin-top: -15px;
margin-bottom: -10px;
}
.kiddzy-timeline-step-last {
margin-top: -20px;
}
/* blob container */
.kiddzy-blob-wrapper {
position: relative;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.kiddzy-blob {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.15);
transition: all 0.25s;
}
.kiddzy-blob img {
width: 80px;
object-fit: contain;
display: block;
transition: transform 0.2s;
}
/* hover effect keeps playful */
.kiddzy-timeline-step:hover .kiddzy-blob img {
transform: scale(1.02);
}
/* text styling */
.kiddzy-step-title {
color: #1e2a2a;
margin-top: 10px;
margin-bottom: 2px;
font-weight: 700;
font-size: 13px;
line-height: 1.3;
letter-spacing: -0.2px;
text-align: center;
}
.kiddzy-step-date {
color: #4D5959;
font-family: 'Nunito Sans', system-ui, sans-serif;
font-weight: 600;
font-size: 11px;
line-height: 1.4;
letter-spacing: 0.2px;
text-align: center;
background: #f0f3f3;
display: inline-block;
padding: 3px 10px;
border-radius: 40px;
backdrop-filter: blur(2px);
}
/* SVG arrows - responsive scaling */
.kiddzy-arrow {
position: absolute;
width: 78px;
z-index: 1;
transition: all 0.2s;
}
/* arrow positions based on original theme, but tweaked for responsiveness */
.arrow-1 {
top: 55px;
left: 138px;
}
.arrow-2 {
top: 205px;
right: 142px;
}
.arrow-3 {
top: 362px;
left: 118px;
}
/* responsive arrow repositioning for tablet+phone */
@media (max-width: 560px) {
.arrow-1 {
left: 115px;
top: 52px;
width: 65px;
}
.arrow-2 {
right: 118px;
top: 198px;
width: 65px;
}
.arrow-3 {
left: 100px;
top: 348px;
width: 65px;
}
}
@media (max-width: 460px) {
.arrow-1 {
left: 95px;
top: 48px;
width: 58px;
}
.arrow-2 {
right: 98px;
top: 188px;
width: 58px;
}
.arrow-3 {
left: 82px;
top: 328px;
width: 58px;
}
.kiddzy-timeline-step_secend {
margin-top: -38px;
}
.kiddzy-timeline-step-thred {
margin-top: -8px;
}
}
/* SVG path color matches your original but uses currentColor for adapt */
.kiddzy-arrow path {
fill: #2C3E3E;
transition: fill 0.2s;
}
/* small screen polish */
@media (max-width: 380px) {
.kiddzy-timeline-wrapper {
padding: 20px 8px;
}
.kiddzy-step-date {
font-size: 8px;
padding: 2px 8px;
}
.kiddzy-step-title {
font-size: 10px;
}
.kiddzy-blob img {
width: 85px;
}
.kiddzy-blob-wrapper {
width: 95px !important;
height: 95px !important;
}
.arrow-1,
.arrow-2,
.arrow-3 {
width: 48px !important;
}
.arrow-1 {
left: 78px;
top: 44px;
}
.arrow-2 {
right: 80px;
top: 174px;
}
.arrow-3 {
left: 65px;
top: 298px;
}
}
/* Keep original aesthetics: subtle background + clean spacing */
.kiddzy-timeline-zigzag:before {
content: '';
position: absolute;
left: 50%;
top: 12%;
width: 2px;
height: 82%;
background: linear-gradient(to bottom, #e2e8e8, #cbd5d5);
transform: translateX(-50%);
z-index: 0;
border-radius: 2px;
opacity: 0.4;
pointer-events: none;
}
/* minor date badge glow */
.kiddzy-step-date {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
transition: background 0.2s;
}
</style>
</head>
<body>
<div class="kiddzy-timeline-wrapper">
<div class="kiddzy-timeline-zigzag">
<!-- STEP 1 - ORDERED (Left) -->
<div class="kiddzy-timeline-step kiddzy-step-left">
<div class="kiddzy-blob-wrapper">
<div class="kiddzy-blob blob-blue">
<img src="https://cdn.shopify.com/s/files/1/0743/8175/4566/files/4991850_1.png?v=1779353676"
alt="Order placed icon" loading="lazy">
</div>
</div>
<div class="kiddzy-step-title">Ordered on</div>
<div class="kiddzy-step-date" id="orderDate">May 13</div>
</div>
<!-- SVG Arrow 1 -->
<svg class="kiddzy-arrow arrow-1" width="79" height="50" viewBox="0 0 79 50" fill="none"
xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M76.6968 49.4749L78.3698 38.0497L67.6388 42.3135L76.6968 49.4749ZM3.27268 6.73436C3.81165 6.61379 4.15082 6.07913 4.03025 5.54017C3.90968 5.0012 3.37502 4.66203 2.83606 4.7826L3.05437 5.75848L3.27268 6.73436ZM8.44172 3.55457C7.9016 3.66982 7.55717 4.20111 7.67242 4.74124C7.78768 5.28136 8.31897 5.62579 8.85909 5.51054L8.65041 4.53255L8.44172 3.55457ZM14.5054 4.35282C15.0474 4.24705 15.4011 3.72188 15.2953 3.17981C15.1896 2.63775 14.6644 2.28407 14.1223 2.38984L14.3139 3.37133L14.5054 4.35282ZM19.7928 1.36108C19.2479 1.45122 18.8793 1.966 18.9694 2.51088C19.0595 3.05576 19.5743 3.4244 20.1192 3.33427L19.956 2.34768L19.7928 1.36108ZM25.7779 2.52264C26.3264 2.45801 26.7186 1.96098 26.654 1.41249C26.5894 0.863998 26.0924 0.471749 25.5439 0.536376L25.6609 1.52951L25.7779 2.52264ZM31.3531 0.0537916C30.8013 0.0774172 30.3731 0.543875 30.3968 1.09565C30.4204 1.64743 30.8868 2.07559 31.4386 2.05196L31.3958 1.05288L31.3531 0.0537916ZM37.0638 2.1161C37.6145 2.1571 38.0942 1.74386 38.1352 1.1931C38.1762 0.642335 37.763 0.162617 37.2122 0.121615L37.138 1.11886L37.0638 2.1161ZM43.0655 1.04639C42.5302 0.910398 41.986 1.23409 41.85 1.76937C41.714 2.30465 42.0377 2.84882 42.573 2.98481L42.8192 2.0156L43.0655 1.04639ZM47.7424 4.91383C48.2347 5.16411 48.8367 4.96791 49.087 4.47559C49.3373 3.98328 49.1411 3.38128 48.6488 3.13099L48.1956 4.02241L47.7424 4.91383ZM53.6216 6.40304C53.195 6.05226 52.5648 6.11371 52.214 6.5403C51.8632 6.96688 51.9247 7.59705 52.3513 7.94783L52.9864 7.17544L53.6216 6.40304ZM56.3255 11.8606C56.6871 12.2781 57.3186 12.3234 57.7361 11.9619C58.1536 11.6003 58.199 10.9688 57.8374 10.5513L57.0815 11.2059L56.3255 11.8606ZM61.3976 15.2139C61.0866 14.7575 60.4645 14.6397 60.0081 14.9507C59.5517 15.2617 59.4339 15.8838 59.7449 16.3402L60.5713 15.7771L61.3976 15.2139ZM62.7426 21.1506C63.0178 21.6294 63.629 21.7945 64.1079 21.5193C64.5867 21.2441 64.7518 20.6328 64.4766 20.154L63.6096 20.6523L62.7426 21.1506ZM67.2334 25.2703C66.9832 24.7779 66.3812 24.5816 65.8889 24.8318C65.3965 25.0819 65.2002 25.6839 65.4504 26.1763L66.3419 25.7233L67.2334 25.2703ZM67.943 31.3172C68.1757 31.8181 68.7704 32.0354 69.2713 31.8027C69.7721 31.57 69.9895 30.9753 69.7568 30.4744L68.8499 30.8958L67.943 31.3172ZM72.1324 35.7668C71.9121 35.2603 71.3229 35.0284 70.8165 35.2487C70.3101 35.469 70.0781 36.0581 70.2984 36.5646L71.2154 36.1657L72.1324 35.7668ZM72.53 41.8253C72.7416 42.3354 73.3266 42.5775 73.8368 42.366C74.347 42.1545 74.5891 41.5694 74.3775 41.0593L73.4538 41.4423L72.53 41.8253ZM76.5489 46.3943C76.3437 45.8816 75.7617 45.6323 75.2489 45.8375C74.7362 46.0427 74.4869 46.6247 74.6921 47.1375L75.6205 46.7659L76.5489 46.3943ZM0.2211 6.397L0.442295 7.37223C1.40185 7.15459 2.34516 6.94186 3.27268 6.73436L3.05437 5.75848L2.83606 4.7826C1.90628 4.9906 0.96102 5.20377 -9.56404e-05 5.42177L0.2211 6.397ZM8.65041 4.53255L8.85909 5.51054C10.8166 5.09285 12.6969 4.7057 14.5054 4.35282L14.3139 3.37133L14.1223 2.38984C12.2999 2.74543 10.4079 3.13501 8.44172 3.55457L8.65041 4.53255ZM19.956 2.34768L20.1192 3.33427C22.0986 3.00683 23.9818 2.73427 25.7779 2.52264L25.6609 1.52951L25.5439 0.536376C23.7114 0.752291 21.797 1.02956 19.7928 1.36108L19.956 2.34768ZM31.3958 1.05288L31.4386 2.05196C33.4296 1.96671 35.2987 1.9847 37.0638 2.1161L37.138 1.11886L37.2122 0.121615C35.3571 -0.0164949 33.4088 -0.0342287 31.3531 0.0537916L31.3958 1.05288ZM42.8192 2.0156L42.573 2.98481C44.4001 3.44898 46.1137 4.08583 47.7424 4.91383L48.1956 4.02241L48.6488 3.13099C46.8818 2.2327 45.0286 1.54513 43.0655 1.04639L42.8192 2.0156ZM52.9864 7.17544L52.3513 7.94783C53.7104 9.06546 55.0291 10.3635 56.3255 11.8606L57.0815 11.2059L57.8374 10.5513C56.4761 8.97935 55.0776 7.60038 53.6216 6.40304L52.9864 7.17544ZM60.5713 15.7771L59.7449 16.3402C60.7458 17.8089 61.742 19.4095 62.7426 21.1506L63.6096 20.6523L64.4766 20.154C63.4544 18.3753 62.4313 16.7307 61.3976 15.2139L60.5713 15.7771ZM66.3419 25.7233L65.4504 26.1763C66.2719 27.7931 67.1011 29.5053 67.943 31.3172L68.8499 30.8958L69.7568 30.4744C68.9064 28.6443 68.067 26.9108 67.2334 25.2703L66.3419 25.7233ZM71.2154 36.1657L70.2984 36.5646C71.0294 38.2448 71.7722 39.9975 72.53 41.8253L73.4538 41.4423L74.3775 41.0593C73.6159 39.2223 72.8685 37.4589 72.1324 35.7668L71.2154 36.1657Z"
fill="black"></path>
</svg>
<!-- STEP 2 - PACKED (Right) -->
<div class="kiddzy-timeline-step kiddzy-timeline-step_secend kiddzy-step-right">
<div class="kiddzy-blob-wrapper">
<div class="kiddzy-blob blob-yellow">
<img src="https://cdn.shopify.com/s/files/1/0743/8175/4566/files/46596_1.png?v=1779353675" alt="Packed icon"
loading="lazy">
</div>
</div>
<div class="kiddzy-step-title">Packed on</div>
<div class="kiddzy-step-date" id="packedDate">May 14</div>
</div>
<!-- SVG Arrow 2 -->
<svg class="kiddzy-arrow arrow-2" width="73" height="57" viewBox="0 0 73 57" fill="none"
xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M3.44663 56.4557L0.000233669 45.435L11.2676 47.9607L3.44663 56.4557ZM69.2479 2.7151C68.6967 2.68066 68.2777 2.2059 68.3122 1.65469C68.3466 1.10348 68.8214 0.684551 69.3726 0.718989L69.3102 1.71704L69.2479 2.7151ZM63.6436 0.386499C64.1951 0.415502 64.6187 0.886111 64.5897 1.43763C64.5607 1.98916 64.0901 2.41274 63.5386 2.38374L63.5911 1.38512L63.6436 0.386499ZM57.7806 2.12707C57.2286 2.10773 56.7969 1.64462 56.8162 1.09267C56.8355 0.540728 57.2986 0.10896 57.8506 0.128292L57.8156 1.12768L57.7806 2.12707ZM52.0889 0.00277912C52.6412 0.00622667 53.0861 0.456728 53.0827 1.009C53.0792 1.56128 52.6287 2.00619 52.0765 2.00274L52.0827 1.00276L52.0889 0.00277912ZM46.3605 2.08981C45.8087 2.11212 45.3432 1.68286 45.3209 1.13102C45.2986 0.579189 45.7279 0.113754 46.2797 0.0914459L46.3201 1.09063L46.3605 2.08981ZM40.4668 0.527116C41.0154 0.463798 41.5115 0.857232 41.5749 1.40588C41.6382 1.95452 41.2447 2.45061 40.6961 2.51393L40.5814 1.52052L40.4668 0.527116ZM35.1508 3.46063C34.6133 3.58762 34.0747 3.25484 33.9477 2.71735C33.8207 2.17986 34.1535 1.6412 34.691 1.51421L34.9209 2.48742L35.1508 3.46063ZM29.0556 3.34669C29.5629 3.12833 30.1511 3.36255 30.3695 3.86984C30.5879 4.37712 30.3536 4.96537 29.8464 5.18373L29.451 4.26521L29.0556 3.34669ZM25.044 7.9006C24.5971 8.2251 23.9718 8.12587 23.6473 7.67896C23.3228 7.23206 23.422 6.60672 23.8689 6.28223L24.4565 7.09141L25.044 7.9006ZM19.4717 10.2946C19.8379 9.88118 20.4699 9.84291 20.8833 10.2091C21.2967 10.5753 21.335 11.2073 20.9688 11.6207L20.2202 10.9577L19.4717 10.2946ZM17.6583 16.109C17.3668 16.5781 16.7502 16.7221 16.2811 16.4306C15.812 16.1391 15.6681 15.5225 15.9596 15.0534L16.8089 15.5812L17.6583 16.109ZM13.1757 20.2173C13.4112 19.7177 14.0071 19.5037 14.5067 19.7392C15.0062 19.9746 15.2203 20.5705 14.9848 21.0701L14.0803 20.6437L13.1757 20.2173ZM12.7798 26.2915C12.5832 26.8076 12.0054 27.0666 11.4893 26.87C10.9732 26.6734 10.7142 26.0957 10.9107 25.5796L11.8453 25.9355L12.7798 26.2915ZM8.99162 31.0653C9.16138 30.5398 9.72504 30.2513 10.2506 30.4211C10.7761 30.5909 11.0646 31.1545 10.8948 31.6801L9.9432 31.3727L8.99162 31.0653ZM9.2404 37.1486C9.08922 37.6798 8.53605 37.9879 8.00486 37.8367C7.47367 37.6855 7.16562 37.1324 7.31679 36.6012L8.2786 36.8749L9.2404 37.1486ZM5.80173 42.2009C5.93978 41.6661 6.48519 41.3446 7.01995 41.4826C7.5547 41.6207 7.87629 42.1661 7.73824 42.7008L6.76998 42.4509L5.80173 42.2009ZM6.36045 48.2467C6.23167 48.7837 5.69189 49.1147 5.15484 48.9859C4.61777 48.8571 4.28681 48.3174 4.41559 47.7803L5.38802 48.0135L6.36045 48.2467ZM3.10898 53.3902C3.23113 52.8516 3.76677 52.514 4.30538 52.6361C4.84399 52.7582 5.1816 53.2939 5.05946 53.8325L4.08422 53.6113L3.10898 53.3902ZM72.2086 1.90271L72.1433 2.90057C71.1615 2.83632 70.1965 2.77436 69.2479 2.7151L69.3102 1.71704L69.3726 0.718989C70.3235 0.778399 71.2905 0.840482 72.2739 0.90484L72.2086 1.90271ZM63.5911 1.38512L63.5386 2.38374C61.5398 2.27863 59.6221 2.19157 57.7806 2.12707L57.8156 1.12768L57.8506 0.128292C59.7062 0.193288 61.6359 0.28092 63.6436 0.386499L63.5911 1.38512ZM52.0827 1.00276L52.0765 2.00274C50.0701 1.99022 48.1675 2.01676 46.3605 2.08981L46.3201 1.09063L46.2797 0.0914459C48.1233 0.0169148 50.0576 -0.00990196 52.0889 0.00277912L52.0827 1.00276ZM40.5814 1.52052L40.6961 2.51393C38.7164 2.7424 36.8733 3.05368 35.1508 3.46063L34.9209 2.48742L34.691 1.51421C36.5014 1.08648 38.4228 0.76301 40.4668 0.527116L40.5814 1.52052ZM29.451 4.26521L29.8464 5.18373C28.1148 5.92906 26.5225 6.82711 25.044 7.9006L24.4565 7.09141L23.8689 6.28223C25.4729 5.1176 27.1951 4.14754 29.0556 3.34669L29.451 4.26521ZM20.2202 10.9577L20.9688 11.6207C19.802 12.9379 18.7036 14.427 17.6583 16.109L16.8089 15.5812L15.9596 15.0534C17.0571 13.2872 18.2217 11.7057 19.4717 10.2946L20.2202 10.9577ZM14.0803 20.6437L14.9848 21.0701C14.227 22.6777 13.4945 24.4149 12.7798 26.2915L11.8453 25.9355L10.9107 25.5796C11.641 23.6625 12.3931 21.8776 13.1757 20.2173L14.0803 20.6437ZM9.9432 31.3727L10.8948 31.6801C10.3373 33.4059 9.78729 35.2271 9.2404 37.1486L8.2786 36.8749L7.31679 36.6012C7.8692 34.6602 8.42599 32.8163 8.99162 31.0653L9.9432 31.3727ZM6.76998 42.4509L7.73824 42.7008C7.28024 44.4749 6.82184 46.3226 6.36045 48.2467L5.38802 48.0135L4.41559 47.7803C4.8793 45.8465 5.34048 43.9876 5.80173 42.2009L6.76998 42.4509Z"
fill="black"></path>
</svg>
<!-- STEP 3 - ON THE WAY (Left) -->
<div class="kiddzy-timeline-step kiddzy-timeline-step-thred kiddzy-step-left">
<div class="kiddzy-blob-wrapper">
<div class="kiddzy-blob blob-green">
<img src="https://cdn.shopify.com/s/files/1/0743/8175/4566/files/4212257_1.png?v=1779353676"
alt="On the way icon" loading="lazy">
</div>
</div>
<div class="kiddzy-step-title">On the Way</div>
<div class="kiddzy-step-date" id="shippingDate">May 15</div>
</div>
<!-- SVG Arrow 3 -->
<svg class="kiddzy-arrow arrow-3" width="73" height="58" viewBox="0 0 73 58" fill="none"
xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M72.838 50.6193L63.2534 57.059L62.4688 45.5387L72.838 50.6193ZM2.59624 2.82857C2.72006 3.36679 2.38412 3.90349 1.84589 4.02731C1.30767 4.15113 0.770971 3.81519 0.64715 3.27696L1.62169 3.05277L2.59624 2.82857ZM1.95846 8.86374C1.82934 8.32676 2.15997 7.78678 2.69695 7.65766C3.23393 7.52854 3.77391 7.85917 3.90303 8.39615L2.93074 8.62994L1.95846 8.86374ZM5.29529 13.9892C5.4338 14.5238 5.11268 15.0695 4.57805 15.208C4.04342 15.3466 3.49772 15.0254 3.35921 14.4908L4.32725 14.24L5.29529 13.9892ZM4.87824 20.05C4.72441 19.5196 5.0297 18.9649 5.56013 18.811C6.09055 18.6572 6.64526 18.9625 6.79909 19.4929L5.83866 19.7715L4.87824 20.05ZM8.50892 24.9479C8.68732 25.4705 8.40823 26.0389 7.88555 26.2173C7.36287 26.3957 6.79454 26.1166 6.61614 25.5939L7.56253 25.2709L8.50892 24.9479ZM8.68774 31.0426C8.47094 30.5346 8.70696 29.9471 9.21491 29.7303C9.72286 29.5135 10.3104 29.7495 10.5272 30.2575L9.60747 30.65L8.68774 31.0426ZM13.0126 35.3042C13.2872 35.7833 13.1215 36.3944 12.6423 36.6691C12.1632 36.9437 11.5521 36.778 11.2774 36.2988L12.145 35.8015L13.0126 35.3042ZM14.6376 41.1799C14.2839 40.7557 14.3411 40.1251 14.7653 39.7714C15.1895 39.4178 15.82 39.4749 16.1737 39.8991L15.4057 40.5395L14.6376 41.1799ZM20.1447 43.7299C20.5829 44.066 20.6657 44.6938 20.3296 45.132C19.9935 45.5702 19.3658 45.653 18.9276 45.3169L19.5361 44.5234L20.1447 43.7299ZM24.0252 48.3908C23.5247 48.1574 23.3082 47.5624 23.5416 47.0618C23.7751 46.5613 24.3701 46.3448 24.8706 46.5782L24.4479 47.4845L24.0252 48.3908ZM30.1153 48.4749C30.648 48.6209 30.9614 49.171 30.8154 49.7036C30.6694 50.2363 30.1193 50.5497 29.5867 50.4037L29.851 49.4393L30.1153 48.4749ZM35.3292 51.6032C34.7833 51.5196 34.4085 51.0093 34.4921 50.4633C34.5757 49.9174 35.0861 49.5427 35.632 49.6263L35.4806 50.6147L35.3292 51.6032ZM41.265 50.2545C41.8157 50.2962 42.2284 50.7763 42.1868 51.3271C42.1452 51.8778 41.665 52.2905 41.1143 52.2489L41.1896 51.2517L41.265 50.2545ZM46.9193 52.5278C46.3672 52.5146 45.9303 52.0563 45.9435 51.5042C45.9567 50.9521 46.415 50.5152 46.9672 50.5284L46.9432 51.5281L46.9193 52.5278ZM52.6804 50.5584C53.2327 50.5522 53.6854 50.9949 53.6916 51.5471C53.6978 52.0994 53.2552 52.5521 52.7029 52.5583L52.6917 51.5584L52.6804 50.5584ZM58.5023 52.4175C57.9503 52.4373 57.4868 52.0059 57.467 51.454C57.4472 50.902 57.8786 50.4386 58.4305 50.4188L58.4664 51.4181L58.5023 52.4175ZM64.1392 50.1616C64.6907 50.1323 65.1615 50.5556 65.1909 51.1071C65.2202 51.6586 64.7969 52.1295 64.2454 52.1588L64.1923 51.1602L64.1392 50.1616ZM69.9952 51.8152C69.4441 51.8514 68.9681 51.434 68.9319 50.8828C68.8957 50.3318 69.3132 49.8557 69.8643 49.8195L69.9298 50.8174L69.9952 51.8152ZM0.975006 0.22135L1.95021 3.12339e-05C2.16797 0.959561 2.38315 1.90231 2.59624 2.82857L1.62169 3.05277L0.64715 3.27696C0.433543 2.34845 0.21792 1.40376 -0.000195221 0.442668L0.975006 0.22135ZM2.93074 8.62994L3.90303 8.39615C4.37098 10.3422 4.83317 12.2055 5.29529 13.9892L4.32725 14.24L3.35921 14.4908C2.89354 12.6934 2.42849 10.8185 1.95846 8.86374L2.93074 8.62994ZM5.83866 19.7715L6.79909 19.4929C7.35794 21.4199 7.92473 23.2363 8.50892 24.9479L7.56253 25.2709L6.61614 25.5939C6.02012 23.8477 5.44407 22.001 4.87824 20.05L5.83866 19.7715ZM9.60747 30.65L10.5272 30.2575C11.3095 32.0903 12.1323 33.7687 13.0126 35.3042L12.145 35.8015L11.2774 36.2988C10.3522 34.6849 9.49546 32.935 8.68774 31.0426L9.60747 30.65ZM15.4057 40.5395L16.1737 39.8991C17.3809 41.347 18.6949 42.618 20.1447 43.7299L19.5361 44.5234L18.9276 45.3169C17.3547 44.1106 15.9347 42.7356 14.6376 41.1799L15.4057 40.5395ZM24.4479 47.4845L24.8706 46.5782C26.4653 47.322 28.2053 47.9514 30.1153 48.4749L29.851 49.4393L29.5867 50.4037C27.5812 49.8541 25.7337 49.1876 24.0252 48.3908L24.4479 47.4845ZM35.4806 50.6147L35.632 49.6263C37.3888 49.8954 39.2626 50.1033 41.265 50.2545L41.1896 51.2517L41.1143 52.2489C39.0687 52.0943 37.1435 51.8811 35.3292 51.6032L35.4806 50.6147ZM46.9432 51.5281L46.9672 50.5284C48.7802 50.5718 50.6827 50.5809 52.6804 50.5584L52.6917 51.5584L52.7029 52.5583C50.685 52.581 48.7589 52.5718 46.9193 52.5278L46.9432 51.5281ZM58.4664 51.4181L58.4305 50.4188C60.2616 50.353 62.1633 50.2668 64.1392 50.1616L64.1923 51.1602L64.2454 52.1588C62.2597 52.2645 60.3464 52.3513 58.5023 52.4175L58.4664 51.4181Z"
fill="black"></path>
</svg>
<!-- STEP 4 - DELIVERED (Right) -->
<div class="kiddzy-timeline-step kiddzy-timeline-step-last kiddzy-step-right">
<div class="kiddzy-blob-wrapper">
<div class="kiddzy-blob blob-pink">
<img src="https://cdn.shopify.com/s/files/1/0743/8175/4566/files/12341001_1.png?v=1779353676"
alt="Delivered icon" loading="lazy">
</div>
</div>
<div class="kiddzy-step-title">Delivered on</div>
<div class="kiddzy-step-date" id="deliveredDate">May 18</div>
</div>
</div>
</div>
<script>
(function () {
// ---------- AUTO DATE LOGIC ----------
// Define timeline offsets (days after order date)
// Order date = Day 0 (today's date)
// Packed = +1 day, On the Way = +2 days, Delivered = +5 days (standard shipping simulation)
const OFFSETS = {
order: 0,
packed: 1,
shipping: 2,
delivered: 5
};
// get current UTC date at midnight local (use local date for "today")
const today = new Date();
const baseDate = new Date(today.getFullYear(), today.getMonth(), today.getDate());
function formatDate(dateObj) {
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const day = dateObj.getDate();
const month = months[dateObj.getMonth()];
return `${month} ${day}`;
}
function addDays(date, days) {
const newDate = new Date(date);
newDate.setDate(date.getDate() + days);
return newDate;
}
const orderDateObj = addDays(baseDate, OFFSETS.order);
const packedDateObj = addDays(baseDate, OFFSETS.packed);
const shippingDateObj = addDays(baseDate, OFFSETS.shipping);
const deliveredDateObj = addDays(baseDate, OFFSETS.delivered);
// update DOM elements
const orderSpan = document.getElementById('orderDate');
const packedSpan = document.getElementById('packedDate');
const shippingSpan = document.getElementById('shippingDate');
const deliveredSpan = document.getElementById('deliveredDate');
if (orderSpan) orderSpan.innerText = formatDate(orderDateObj);
if (packedSpan) packedSpan.innerText = formatDate(packedDateObj);
if (shippingSpan) shippingSpan.innerText = formatDate(shippingDateObj);
if (deliveredSpan) deliveredSpan.innerText = formatDate(deliveredDateObj);
})();
</script>
</body>
</html>