Back to Shopify Liquid
Estimated Date Box
Shopify Liquid

Estimated Date Box

A dynamic delivery estimation box that uses IP geolocation to display the customer's city and country alongside a calculated arrival date range. It also features static trust badges for free shipping, availability, and money-back guarantees.

MediumShippingTrustProduct PageCROEstimated Delivery
100 lines · 14.5 KB
Setup 15–25 minutes 4 min read 99 lines
Key features
  • IP-based Geolocation (City/Country)
  • Dynamic Shipping Date Calculation
  • Multi-lingual Month Formatting
  • Trust Badge Icon Grid
  • Automatic Month Rollover Logic
Best use cases
  • Displaying estimated arrival dates based on the customer's current location.
  • Reducing cart abandonment by clearly stating shipping and return policies.
  • Adding trust signals to the product page via modern SVG badges.
Compatibility
  • Shopify Online Store 2.0
  • Most Shopify themes

The code

Shopify Liquid
1<!--INICIO CÓDIGO DE BOX GARANTIA-->
2<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
3
4<script>
5 function convertDate(e) {
6 var t, o = new Date(e);
7 return [(t = o.getDate(), t < 10 ? "0" + t : t)].join("/")
8 }
9
10 function getMesExtenso(e) {
11 var t = new Array(12);
12 return t[0] = "Ene", t[1] = "Feb", t[2] = "Mar", t[3] = "Abr", t[4] = "May", t[5] = "Jun", t[6] = "Jul", t[7] = "Agos", t[8] = "Sept", t[9] = "Oct", t[10] = "Nov", t[11] = "Dic", t[e]
13 }
14
15 jQuery(document).ready(function(e) {
16 var t = new Date,
17 o = t.setDate(t.getDate() + 5),
18 n = t.setDate(t.getDate() - 4),
19 r = getMesExtenso(t.getMonth());
20 if (convertDate(o) > convertDate(n)) var a = "<strong style='color: black;'>" + convertDate(n) + "</strong> <span style='color:black;'> y el </span> <strong style='color: black;'>" + convertDate(o) + " de " + r + "</strong>";
21 else {
22 if (null == (s = getMesExtenso(t.getMonth() + 1))) var s = getMesExtenso(t.getMonth() - 11);
23 a = "<strong style='color: black;'>" + convertDate(n) + " de " + r + "</strong> y <strong style='color: black;'>" + convertDate(o) + " de " + s + "</strong>"
24 }
25
26 e.getJSON("https://ipapi.co/json/", function(t) {
27 var city = t.city;
28 var country = t.country_name;
29 e(".custom-location").html("Para <strong>" + city + ", " + country + "</strong>");
30 e(".shipping-estimated").html("<strong>Recibe tu producto en casa,</strong> <span style='color:black;'> entre el:</span> " + a + ".");
31 });
32 });
33</script>
34
35<div style="background-color: #D6D6D669; border-radius: 20px; padding: 20px; padding-top:10px; padding-bottom: 5px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5); border: 1px solid #E5E5E5; border-bottom: 4px solid #ccc;">
36 <div style="display: flex; align-items: center; margin-bottom: -20px; margin-left: -4px;">
37 <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" style="fill: #00b75b; margin-right: 10px; margin-top:-7px;">
38 <!-- Icono para Envio Gratis -->
39 <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 20 20">
40 <path fill-rule="nonzero" d="M10.587 14.805H7.01a2.452 2.452 0 1 1-4.452-1.937l-1.56-.003.002-1.2 3.6.008v.025h.048c1.167 0 2.143.815 2.39 1.907h3.52a2.455 2.455 0 0 1 1.836-1.844l2.423-6.352a.6.6 0 0 0-.56-.814H4.6v-1.2h9.658a1.8 1.8 0 0 1 1.697 2.4h1.677l1.409 4.225-2.027 4.787-1.701-.007a2.452 2.452 0 0 1-4.726.005zm4.751-1.205l.883.004 1.538-3.634-.991-2.975h-1.27l-1.835 4.809c.834.253 1.48.939 1.675 1.796zM7 5.79v1.2H1v-1.2h6zM4.6 8.222v1.2H2.2v-1.2h2.4zm.049 7.178a1.251 1.251 0 1 0 0-2.502 1.251 1.251 0 0 0 0 2.502zm8.3 0a1.251 1.251 0 1 0 0-2.502 1.251 1.251 0 0 0 0 2.502z"></path>
41 </svg>
42 </svg>
43
44 <div>
45 <p style="overflow: hidden; margin-top: 0px; margin-bottom: 1px;">
46 <span style="color: #00b75b; font-size: 14px;">Envío Gratis
47 <svg style="fill:#00b75b;margin-left: 5px; margin-bottom: -3px" width="41" height="13" viewBox="0 0 41 13" xmlns="http://www.w3.org/2000/svg">
48 <path fill-rule="nonzero" d="M2.628 0h5.255L5.255 4.643h4.38L2.628 13l1.751-5.571H0L2.628 0zm11.589 9.533h-1.959l1.674-7.515H19.5l-.376 1.69h-3.61l-.25 1.172h3.519l-.376 1.69h-3.53l-.66 2.963zm9.468.136c-2.334 0-3.484-1.105-3.484-2.682 0-.124.034-.383.057-.496l1.002-4.473h1.992l-.99 4.428c-.012.057-.034.18-.034.316.011.62.49 1.217 1.457 1.217 1.048 0 1.583-.654 1.776-1.533l.991-4.428h1.981l-.99 4.462c-.41 1.825-1.412 3.189-3.758 3.189zm10.118-.136h-5.01l1.673-7.515h1.959l-1.287 5.825h3.04l-.375 1.69zm6.678 0h-5.01l1.674-7.515h1.959l-1.287 5.825h3.04l-.376 1.69z"></path>
49 </svg>
50 <span style="color: #0086ff; font-size: 14px;"> • Disponible.</span>
51 </span>
52 </p>
53 <p class="custom-location" style="color: #00b75b; font-size: 14px; margin-top: -7px;">Cargando ubicación...</p>
54 </div>
55 </div>
56
57 <div style="display: flex; align-items: center; margin-bottom: -15px;">
58 <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" style="margin-right: 8px;">
59 <!-- Icono para Devolución Gratis -->
60 <svg height="20px" width="20px" viewBox="0 0 512 512" fill="#585858"><path d="M447.77,33.653c-36.385-5.566-70.629,15.824-82.588,49.228h-44.038v37.899h40.902c5.212,31.372,29.694,57.355,62.855,62.436c41.278,6.316,79.882-22.042,86.222-63.341C517.428,78.575,489.07,39.969,447.77,33.653z"></path><path d="M162.615,338.222c0-6.88-5.577-12.468-12.468-12.468H96.16c-6.891,0-12.467,5.588-12.467,12.468c0,6.868,5.576,12.467,12.467,12.467h53.988C157.038,350.689,162.615,345.091,162.615,338.222z"></path><path d="M392.999,237.965L284.273,340.452l-37.966,9.398v-86.619H0v215.996h246.307v-59.454l35.547-5.732c16.95-2.418,29.396-6.692,44.336-15.018l46.302-24.228v104.432h132.435V270.828C504.927,202.618,428.016,202.43,392.999,237.965z M215.996,448.913H30.313v-155.37h185.683v63.805l-36.419,9.01c-15.968,4.395-25.708,20.518-22.174,36.696l0.298,1.247c3.478,15.912,18.651,26.436,34.785,24.14l23.51-3.788V448.913z"></path></svg>
61 </svg>
62 <p class="shipping-estimated" style="font-size: 14px; color: #0086ff; line-height: 1.2;"><!-- Este texto se llenará dinámicamente --></p>
63 </div>
64
65 <div style="display: flex; align-items: center; margin-bottom: -15px;">
66 <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" style="fill: #585858; margin-right: 10px;">
67 <!-- Icono para Devolución Gratis -->
68 <svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 706.48 614.73">
69 <path d="m228.68,614.73c17.75,0,29.46-12.05,29.46-29.46,0-8.7-2.68-15.07-8.04-20.42l-96.43-94.08-63.62-54.24,78.68,3.35h427.23c78.01,0,110.5-35.83,110.5-111.5V110.49c0-78.01-32.48-110.49-110.5-110.49h-187.5c-18.42,0-30.47,13.39-30.47,29.8s12.05,29.8,30.47,29.8h187.5c35.49,0,50.89,15.4,50.89,50.89v197.88c0,36.5-15.4,51.9-50.89,51.9H168.75l-78.68,3.35,63.62-54.24,96.43-94.08c5.36-5.36,8.04-12.05,8.04-20.76,0-17.08-11.72-29.46-29.46-29.46-7.37,0-16.07,3.68-21.76,9.37L10.04,367.63c-6.7,6.36-10.04,14.06-10.04,22.43s3.35,16.07,10.04,22.43l196.88,193.19c5.69,5.69,14.4,9.04,21.76,9.04Z"/>
70 </svg>
71 </svg>
72 <p style="font-size: 14px; color: #0086ff; line-height: 1.2;"><b>Devolución gratis,</b> <span style="color: black;">tienes 30 días después de recibir tu producto.</span></p>
73 </div>
74
75 <div style="display: flex; align-items: center; margin-bottom: -15px;">
76 <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" style="fill: #585858; margin-right: 9px;">
77 <!-- Icono para Compra Garantizada -->
78 <svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 738.46 738.46">
79 <path d="m369.23,0c46.15,0,83.54,50.62,124.46,68s104.92,7.85,136,40.77,23.23,93.38,40.77,136,68,78.31,68,124.46-50.62,83.54-68,124.46-7.85,104.92-40.77,136-93.38,23.54-136,40.77-78.31,68-124.46,68-83.54-50.62-124.46-68-104.92-7.85-136-40.77-23.54-93.38-40.77-136S0,415.38,0,369.23s50.62-83.54,68-124.46,7.85-104.92,40.77-136,93.38-23.54,136-40.77S323.08,0,369.23,0Zm0,116.62c-139.52,0-252.62,113.1-252.62,252.62s113.1,252.62,252.62,252.62,252.62-113.1,252.62-252.62h0c-.42-139.34-113.28-252.19-252.62-252.62Zm117.23,140.77l24.77,23.38c5.21,6.87,5.21,16.36,0,23.23l-156.15,174c-6.25,7.09-15.32,11.03-24.77,10.77-9.38-.05-18.33-3.94-24.77-10.77l-84.46-84.15c-6.45-5.53-7.2-15.24-1.67-21.69.04-.05.09-.1.13-.15l1.54-1.69,25.08-23.23c6.28-6.76,16.82-7.24,23.69-1.08l1.08,1.08,59.85,61.54,132.15-150.77c6.44-6.48,16.85-6.68,23.54-.46Z"/>
80 </svg>
81 </svg>
82 <p style="font-size: 14px; color: #0086ff; line-height: 1.2;"><b>Compra garantizada,</b> <span style="color: black;">envíos rápidos y pagos 100% seguros.</span></p>
83 </div>
84
85<div style="display: flex; align-items: center;">
86 <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" style="fill: #585858; margin-right: 8px;">
87 <!-- Icono para Servicio Contra-entrega -->
88 <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
89 <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
90 <g id="SVGRepo_iconCarrier">
91 <path d="M6.43124 9.68927C6.20891 10.0388 6.31199 10.5023 6.66148 10.7246C7.01096 10.947 7.47451 10.8439 7.69685 10.4944L6.43124 9.68927ZM10.0407 7.77083L10.2729 8.48399L10.2739 8.48365L10.0407 7.77083ZM10.5456 8.40513C10.9473 8.30399 11.1909 7.89637 11.0898 7.4947C10.9886 7.09302 10.581 6.84939 10.1793 6.95054L10.5456 8.40513ZM7.69693 10.4943C7.91919 10.1447 7.81601 9.6812 7.46647 9.45894C7.11694 9.23669 6.65341 9.33986 6.43115 9.6894L7.69693 10.4943ZM7.08257 16.4498L7.71309 16.0437L7.71306 16.0437L7.08257 16.4498ZM9.57369 18.5668L9.27752 19.2559L9.27785 19.256L9.57369 18.5668ZM13.8227 18.5668L14.1186 19.256L14.1189 19.2559L13.8227 18.5668ZM16.3139 16.4498L15.6834 16.0437L15.6833 16.0437L16.3139 16.4498ZM16.9653 9.6894C16.743 9.33986 16.2795 9.23669 15.93 9.45894C15.5804 9.6812 15.4772 10.1447 15.6995 10.4943L16.9653 9.6894ZM6.42906 10.4909C6.64948 10.8416 7.11247 10.9472 7.46316 10.7268C7.81385 10.5064 7.91945 10.0434 7.69903 9.69272L6.42906 10.4909ZM3.97914 5.18383L3.34206 5.57962L3.34416 5.58295L3.97914 5.18383ZM3.94917 4.68259L4.62931 4.99868L4.62931 4.99868L3.94917 4.68259ZM4.34769 4.39083L4.43506 5.13574L4.43987 5.13515L4.34769 4.39083ZM7.47257 4.00383L7.56475 4.74815L7.5652 4.74809L7.47257 4.00383ZM7.94934 4.21783L8.56435 3.78856L8.56277 3.78632L7.94934 4.21783ZM9.74941 8.1071C9.98649 8.44676 10.454 8.52991 10.7937 8.29283C11.1333 8.05575 11.2165 7.58822 10.9794 7.24856L9.74941 8.1071ZM10.1783 6.9513C9.777 7.05412 9.53507 7.46275 9.63789 7.864C9.7407 8.26525 10.1493 8.50718 10.5506 8.40436L10.1783 6.9513ZM12.8459 8.40436C13.2471 8.50718 13.6557 8.26525 13.7585 7.864C13.8614 7.46275 13.6194 7.05412 13.2182 6.9513L12.8459 8.40436ZM15.6995 10.4952C15.9217 10.8448 16.3852 10.948 16.7348 10.7257C17.0843 10.5035 17.1875 10.04 16.9653 9.69043L15.6995 10.4952ZM13.3557 7.77083L13.1225 8.48365L13.1234 8.48396L13.3557 7.77083ZM13.2171 6.95054C12.8154 6.84939 12.4078 7.09302 12.3067 7.4947C12.2055 7.89637 12.4492 8.30399 12.8508 8.40513L13.2171 6.95054ZM15.6992 9.69395C15.4789 10.0447 15.5847 10.5077 15.9355 10.728C16.2862 10.9483 16.7492 10.8425 16.9695 10.4917L15.6992 9.69395ZM19.4173 5.18383L20.0524 5.58271L20.0535 5.58096L19.4173 5.18383ZM19.4479 4.68189L18.7677 4.99765L18.7677 4.99765L19.4479 4.68189ZM19.0487 4.38983L18.9568 5.13419L18.9623 5.13483L19.0487 4.38983ZM15.9239 4.00383L15.8312 4.74809L15.8319 4.74818L15.9239 4.00383ZM15.4471 4.21783L14.8337 3.78631L14.8321 3.78848L15.4471 4.21783ZM12.4171 7.24748C12.1799 7.5871 12.263 8.05465 12.6027 8.29178C12.9423 8.5289 13.4098 8.44581 13.647 8.10619L12.4171 7.24748ZM7.69685 10.4944C8.30647 9.53611 9.21768 8.82752 10.2729 8.48399L9.80854 7.05767C8.41664 7.51081 7.22457 8.44221 6.43124 9.68927L7.69685 10.4944ZM10.2739 8.48365C10.3633 8.45441 10.4538 8.42823 10.5456 8.40513L10.1793 6.95054C10.054 6.9821 9.93003 7.01792 9.80748 7.05802L10.2739 8.48365ZM6.43115 9.6894C5.04454 11.8701 5.0527 14.6838 6.45207 16.856L7.71306 16.0437C6.63068 14.3635 6.62428 12.1812 7.69693 10.4943L6.43115 9.6894ZM6.45204 16.856C7.13919 17.9228 8.12183 18.7591 9.27752 19.2559L9.86987 17.8778C8.99248 17.5007 8.24101 16.8633 7.71309 16.0437L6.45204 16.856ZM9.27785 19.256C10.826 19.9206 12.5705 19.9206 14.1186 19.256L13.5269 17.8776C12.3566 18.38 11.0399 18.38 9.86953 17.8776L9.27785 19.256ZM14.1189 19.2559C15.2746 18.7591 16.2572 17.9228 16.9444 16.856L15.6833 16.0437C15.1554 16.8633 14.404 17.5007 13.5266 17.8778L14.1189 19.2559ZM16.9444 16.856C18.3437 14.6838 18.3519 11.8701 16.9653 9.6894L15.6995 10.4943C16.7722 12.1812 16.7658 14.3635 15.6834 16.0437L16.9444 16.856ZM7.69903 9.69272L4.61413 4.78472L3.34416 5.58295L6.42906 10.4909L7.69903 9.69272ZM4.61621 4.78805C4.65654 4.85297 4.66065 4.93124 4.62931 4.99868L3.26904 4.36649C3.08785 4.75635 3.11461 5.21348 3.34207 5.57961L4.61621 4.78805ZM4.62931 4.99868C4.59724 5.06767 4.52714 5.12493 4.43506 5.13573L4.26032 3.64594C3.82225 3.69732 3.45094 3.97509 3.26904 4.36649L4.62931 4.99868ZM4.43987 5.13515L7.56475 4.74815L7.38039 3.25952L4.25551 3.64652L4.43987 5.13515ZM7.5652 4.74809C7.46952 4.76 7.383 4.71628 7.33591 4.64935L8.56277 3.78632C8.29754 3.40927 7.84574 3.2016 7.37993 3.25957L7.5652 4.74809ZM7.33434 4.6471L9.74941 8.1071L10.9794 7.24856L8.56434 3.78856L7.33434 4.6471ZM10.5506 8.40436C11.3042 8.21126 12.0922 8.21126 12.8459 8.40436L13.2182 6.9513C12.2203 6.69561 11.1761 6.69561 10.1783 6.9513L10.5506 8.40436ZM16.9653 9.69043C16.1722 8.44295 14.9801 7.51114 13.588 7.05771L13.1234 8.48396C14.1788 8.8277 15.09 9.53661 15.6995 10.4952L16.9653 9.69043ZM13.5889 7.05802C13.4664 7.01792 13.3424 6.9821 13.2171 6.95054L12.8508 8.40513C12.9426 8.42823 13.0331 8.45441 13.1225 8.48365L13.5889 7.05802ZM16.9695 10.4917L20.0524 5.58271L18.7822 4.78495L15.6992 9.69395L16.9695 10.4917ZM20.0535 5.58096C20.2822 5.21467 20.3095 4.75672 20.1282 4.36612L18.7677 4.99765C18.7363 4.9301 18.7405 4.85167 18.7811 4.78671L20.0535 5.58096ZM20.1282 4.36612C19.9462 3.97396 19.5741 3.69579 19.1352 3.64484L18.9623 5.13483C18.87 5.12412 18.7997 5.06677 18.7677 4.99765L20.1282 4.36612ZM19.1407 3.64549L16.0158 3.25949L15.8319 4.74818L18.9568 5.13418L19.1407 3.64549ZM16.0165 3.25957C15.5507 3.2016 15.0989 3.40927 14.8337 3.78632L16.0605 4.64935C16.0134 4.71628 15.9269 4.76 15.8312 4.74809L16.0165 3.25957ZM14.8321 3.78848L12.4171 7.24748L13.647 8.10619L16.062 4.64719L14.8321 3.78848Z" fill="#585858"></path>
92 <path fill-rule="evenodd" clip-rule="evenodd" d="M12.4714 11.5108L11.6982 10.0038L10.925 11.5108C10.8703 11.6208 10.7911 11.716 10.6939 11.7888C10.5964 11.8621 10.4836 11.911 10.3644 11.9318L8.77319 12.2528L9.88469 13.6158C10.0357 13.7865 10.1069 14.0161 10.0797 14.2448L9.87007 16.0038L11.3326 15.2768C11.4466 15.2205 11.5716 15.1915 11.6982 15.1918C11.816 15.192 11.932 15.2212 12.0365 15.2768L13.5361 15.9588L13.3245 14.2218C13.2973 13.9931 13.3685 13.7635 13.5195 13.5928L14.6232 12.2528L13.031 11.9328C12.9118 11.912 12.799 11.8631 12.7015 11.7898C12.6045 11.7166 12.5257 11.621 12.4714 11.5108Z" stroke="#585858" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
93 </g>
94 </svg>
95 <p style="font-size: 14px; color: #0086ff; line-height: 1.2;"><b>Más vendido,</b> <span style="color: black;">entre los productos de está categoria.</span></p>
96</div>
97
98</div>
99<!--FIN CODIGO DE BOX GARANTIA-->

How to install Estimated Date Box on your Shopify theme

This snippet belongs in sections/main-product.liquid, directly under the Add to cart button, where it reinforces the purchase decision. Expect the whole job to take about 15–25 minutes.

  1. 1From your Shopify admin, open Online Store → Themes, click the button on your live theme and choose Duplicate. Always work on a copy so you can roll back instantly.
  2. 2On the duplicated theme, click … → Edit code to open the theme code editor.
  3. 3Open sections/main-product.liquid in the file tree. If your theme uses different file names, search for the template that renders the area where you want the block to show up.
  4. 4Click Copy code on this page, then paste the snippet directly under the Add to cart button, where it reinforces the purchase decision.
  5. 5Keep the <script> tag at the end of the snippet. It only runs once the surrounding markup exists in the DOM, so moving it higher up the file can break the behaviour.
  6. 6Click Save, then hit Preview and check the block on desktop, tablet and mobile widths.
  7. 7When you are happy with the result, publish the duplicated theme from Online Store → Themes → Actions → Publish.

How to customise it

Every value below lives inside the snippet, so you can adapt Estimated Date Box to your brand without touching the rest of the theme.

  • Colours — the snippet uses #E5E5E5, #ccc, #00b75b, #0086ff. Replace those values inside the style block with your brand palette, keeping at least a 4.5:1 contrast ratio between text and background so the block stays accessible.
  • Sizing — adjust the font-size values (14px) and the padding so the block carries the same visual weight as the elements around it.
  • Cornersborder-radius: 20px controls the roundness. Set it to 0 for a sharper editorial look, or increase it for a softer, app-like feel.
  • Copy — rewrite the hard-coded text (for example “convertDate(n)) var a = "”) in your own brand voice, and translate it if you sell in more than one language.

Common mistakes to avoid

These are the issues merchants run into most often when installing a snippet like this one.

  • Editing the live theme directly. Duplicate it first — a single unbalanced Liquid tag can take a storefront down mid-campaign.
  • Pasting the code into the wrong file. Dropped into layout/theme.liquid instead of sections/main-product.liquid, this block will render on every page of the store, including ones where it makes no sense.
  • Adding the snippet twice on the same page. The script targets its selector, so two copies can conflict or double-fire.
  • Leaving the demo images in place. They are hosted on third-party domains, can disappear at any time and slow the page down. Re-upload them to Shopify Files before going live.
  • Publishing without testing on a real phone. Most Shopify traffic is mobile, and layout problems almost always surface there first.

Performance notes

What this block costs you in load time, and how to keep that cost at zero.

  • The JavaScript is vanilla — no jQuery, no external library, no additional request. Keep it after the markup so it never blocks rendering.
  • Third-party image URLs bypass the Shopify CDN and add extra DNS lookups. Self-hosting those assets usually saves 100–300ms on first paint.
  • Run PageSpeed Insights before and after you add the block so you have a concrete number rather than a guess.

SEO & accessibility

How to add this block without damaging your on-page structure or your rich results.

  • Nothing in this snippet should replace your page <h1>. Keep product and page headings intact and use <h2> or <h3> for the block's own heading so the document outline stays clean.
  • If the block shows review or rating content, keep it consistent with the structured data your review app already outputs. Duplicating or contradicting rating markup can cost you the rich result entirely.
  • The block does not create a new URL, so there is no canonical or indexing change to make. It improves on-page engagement signals rather than crawlability.
Frequently asked questions

Estimated Date Box — questions merchants ask

Will this snippet work with my theme?

It is built with standard Liquid, HTML and CSS, so it works with Dawn and virtually every Online Store 2.0 theme, as well as most vintage themes. The only thing that changes between themes is the file you paste it into — if yours has no sections/main-product.liquid, look for the equivalent template that renders the same area.

Do I need an app to use it?

No. This is theme code you own outright: no monthly fee, no third-party script tag, and no app that can break your storefront the next time it updates.

How long does it take to add “Estimated Date Box” to a store?

Most merchants have it live in under fifteen minutes — duplicate the theme, paste the code, adjust the colours and copy, preview on mobile, publish.

The block appears but nothing happens. What is wrong?

That is almost always a script-order problem. Check that the script tag is still at the bottom of the snippet and that the markup was not pasted inside another script or a Liquid comment block. Open your browser console and look for an error naming the snippet's selector.

Will it slow my store down?

Not meaningfully. It is inline markup with scoped CSS and at most a few lines of vanilla JavaScript — no external libraries, no extra HTTP request. Optimising your product images will always have a far bigger impact on load time.

Can I use it on a client store or a commercial project?

Yes. Every snippet in the MCO Hub library is free to copy, modify and ship on any store, including client work. Attribution is appreciated but not required.

Related snippets

Keep exploring