Edita tu Shopify en minutos con ChatGPT

<div class="order-tracking-wrapper">
  <div class="order-steps">
    <div class="step">
      <img src="https://cdn.shopify.com/s/files/1/0819/1538/0025/files/Order_Vector_Icon_18f66b33-9283-41d0-8f0c-5ba2ed968614.svg?v=1748420336" alt="Pedido" class="step-icon" width="28" height="28" loading="lazy" />
      <p class="title">PEDIDO</p>
      <p class="date" id="pedido-date"></p>
    </div>
    <div class="arrow">→</div>
    <div class="step">
      <img src="https://cdn.shopify.com/s/files/1/0819/1538/0025/files/Shipping_Fast_Solid_Icon_714e7865-a565-4d51-9b72-3eb656ee574e.svg?v=1748420336" alt="Envío" class="step-icon" width="28" height="28" loading="lazy" />
      <p class="title">ENVÍO</p>
      <p class="date" id="envio-date"></p>
    </div>
    <div class="arrow">→</div>
    <div class="step">
      <img src="https://cdn.shopify.com/s/files/1/0819/1538/0025/files/Delivery_Icon_0ffe737b-519f-4e83-87d2-13ff27e96b7e.svg?v=1748420336" alt="Entregado" class="step-icon flipped" width="28" height="28" loading="lazy" />
      <p class="title">ENTREGADO</p>
      <p class="date" id="entrega-date"></p>
    </div>
  </div>
  <p class="order-message">
    Haz tu pedido en las próximas <span id="countdown">--:--:--</span><br />
    y recibe tu paquete entre el <span class="highlight" id="entrega-rango"></span>.
  </p>
</div>

<style>
  .order-tracking-wrapper {
    background: #fff;
    padding: 1.5rem;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    font-family: system-ui, sans-serif;
    text-align: center;
    max-width: 600px;
    margin: 2rem auto 0 auto;
  }
  .order-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
  }
  .step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
  }
  .step-icon {
    margin-bottom: 0.4rem;
  }
  .step-icon.flipped {
    transform: scaleX(-1);
  }
  .title {
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    margin: 0 0 0.2rem;
  }
  .date {
    font-size: 0.8rem;
    color: #666;
    white-space: nowrap;
  }
  .arrow {
    font-size: 1rem;
    color: #bbb;
    line-height: 1;
    margin: 0 0.4rem;
  }
  .order-message {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-top: 1rem;
    color: #333;
  }
  .order-message .highlight,
  #countdown {
    font-weight: bold;
    color: #121212 !important;
  }
  @media (max-width: 749px) {
    .order-steps {
      gap: 0.5rem;
    }
    .arrow {
      font-size: 0.9rem;
      margin: 0 0.2rem;
    }
    .step-icon {
      width: 24px;
      height: 24px;
    }
    .title {
      font-size: 0.75rem;
    }
    .date {
      font-size: 0.75rem;
    }
    .order-message {
      font-size: 0.85rem;
    }
  }
</style>

<script>
  function toMidnight(date) {
    const d = new Date(date);
    d.setHours(0, 0, 0, 0);
    return d;
  }

  function formatDate(date, checkRelative = false) {
    const today = toMidnight(new Date());
    const tomorrow = new Date(today);
    tomorrow.setDate(today.getDate() + 1);
    const d = toMidnight(date);

    if (checkRelative) {
      if (d.getTime() === today.getTime()) return "hoy";
      if (d.getTime() === tomorrow.getTime()) return "mañana";
    }

    const day = d.getDate().toString().padStart(2, '0');
    const month = ["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"][d.getMonth()];
    return `${day} ${month}`;
  }

  function addBusinessDays(startDate, days) {
    const date = new Date(startDate);
    let added = 0;
    while (added < days) {
      date.setDate(date.getDate() + 1);
      const day = date.getDay();
      if (day !== 0 && day !== 6) added++;
    }
    return date;
  }

  function getNextCutoffDate() {
    const now = new Date();
    let cutoff = new Date(now);
    cutoff.setHours(12, 0, 0, 0);

    if (now < cutoff && now.getDay() >= 1 && now.getDay() <= 5) {
      return cutoff;
    }
    do {
      cutoff.setDate(cutoff.getDate() + 1);
    } while (cutoff.getDay() === 0 || cutoff.getDay() === 6);

    cutoff.setHours(12, 0, 0, 0);
    return cutoff;
  }

  function startCountdownToCutoff() {
    const countdownEl = document.getElementById("countdown");

    function updateCountdown() {
      const now = new Date();
      const target = getNextCutoffDate();
      const diff = target - now;
      const hrs = String(Math.floor(diff / (1000 * 60 * 60))).padStart(2, "0");
      const mins = String(Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, "0");
      const secs = String(Math.floor((diff % (1000 * 60)) / 1000)).padStart(2, "0");
      countdownEl.innerText = `${hrs}h ${mins}m ${secs}s`;
      requestAnimationFrame(updateCountdown);
    }

    updateCountdown();
  }

  function updateDeliveryTimeline() {
    const now = new Date();
    const pedido = now;
    let envio;

    if (now.getHours() < 12 && now.getDay() >= 1 && now.getDay() <= 5) {
      envio = new Date(now);
    } else {
      envio = getNextCutoffDate();
    }

    const entregaMin = addBusinessDays(envio, 1);
    const entregaMax = addBusinessDays(envio, 3);

    document.getElementById("pedido-date").innerText = formatDate(pedido, true);
    document.getElementById("envio-date").innerText = formatDate(envio, true);
    document.getElementById("entrega-date").innerText = formatDate(entregaMax);
    document.getElementById("entrega-rango").innerText = `${formatDate(entregaMin)} y ${formatDate(entregaMax)}`;
  }

  document.addEventListener("DOMContentLoaded", function () {
    setTimeout(() => {
      updateDeliveryTimeline();
      startCountdownToCutoff();
    }, 200);
  });
</script>

Haz que el tiempo de preparación sea de dos días y el de entrega 1-2 días.