Back to Shopify Liquid

Shopify Liquid
Delivery Time & Guarantee
Drop this Shopify Liquid snippet into your theme to add the delivery time & guarantee block. Copy the code below, paste it into your theme files, save and you're done.
220 lines · 19.1 KB
Shopify Liquid
1<style>2.shipping-info-banner {3 background-color: #F5EEDD;4 padding: 10px 10px;5 display: flex;6 align-items: center;7 justify-content: center;8 font-family: Arial, sans-serif;9 border-radius: 5px;10 gap: 10px;11}12.truck-icon {13 margin-right: 10px;14}15.shipping-text {16 color: #333;17 font-size: 14px;18 margin: 0;19}20</style>2122<script>23document.addEventListener('DOMContentLoaded', function() {24 fetch('https://ipapi.co/json/')25 .then(response => response.json())26 .then(data => {27 const userCountry = data.country_code;28 let shippingInfo = '';2930 if (userCountry === "GB") {31 shippingInfo = "Ships from UK - Delivery in 2-3 Days";32 } else if (userCountry === "US") {33 shippingInfo = "Ships from Chicago - Arrives in 2-5 Days";34 } else if (userCountry === "AU") {35 shippingInfo = "Ships from Sydney - Delivery in 3-5 Days";36 } else if (["AT", "BE", "BG","HR","CY","CZ","DK","EE","FI","FR","DE","GR","HU","IE","IT","LV","LT","LU","MT","NL","PL","PT","RO","SK","SI","ES","SE"].includes(userCountry)) {37 shippingInfo = "Ships From UK - Delivery in 2-5 Days";38 } else {39 shippingInfo = "Expected delivery in 5-7 business days";40 }4142 document.getElementById('shipping-info').innerHTML = `4344454647484950515253545556575859`;60 })61 .catch(error => {62 console.error('Error fetching geolocation data:', error);63 document.getElementById('shipping-info').innerHTML = `64656667686970717273747576777879`;80 });81});82</script>8384<div id="shipping-info">85 <!-- The shipping info will be dynamically updated here -->86 <div class="shipping-info-banner">87<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">88<path d="M15.125 7.25H20.375C21.3032 7.25 22.1934 7.61875 22.8498 8.27518C23.5063 8.93143 23.875 9.82179 23.875 10.75V17.75H15.125" fill="black" fill-opacity="0.34902"/>89<path d="M1.125 17.75H15.125V5.5C15.125 5.03589 14.9407 4.59071 14.6125 4.2625C14.2843 3.93429 13.8391 3.75 13.375 3.75H2.875C2.41089 3.75 1.96571 3.93446 1.6375 4.2625C1.30929 4.59071 1.125 5.03589 1.125 5.5V17.75Z" fill="black" fill-opacity="0.34902"/>90<path d="M6.375 21.25C4.68357 21.25 3.3125 19.8789 3.3125 18.1875C3.3125 16.4961 4.68357 15.125 6.375 15.125C8.06643 15.125 9.4375 16.4961 9.4375 18.1875C9.4375 19.8789 8.06643 21.25 6.375 21.25Z" fill="white"/>91<path d="M15.125 7.25H20.375C21.3032 7.25 22.1934 7.61875 22.8498 8.27518C23.5063 8.93143 23.875 9.82179 23.875 10.75V17.75H21.25" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>92<path d="M2.875 17.75H1.125V5.5C1.125 5.03589 1.30946 4.59071 1.6375 4.2625C1.96571 3.93429 2.41089 3.75 2.875 3.75H13.375C13.8391 3.75 14.2843 3.93446 14.6125 4.2625C14.9407 4.59071 15.125 5.03589 15.125 5.5V17.75" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>93<path d="M14.25 17.75H9.875" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>94<path d="M6.375 21.25C4.68357 21.25 3.3125 19.8789 3.3125 18.1875C3.3125 16.4961 4.68357 15.125 6.375 15.125C8.06643 15.125 9.4375 16.4961 9.4375 18.1875C9.4375 19.8789 8.06643 21.25 6.375 21.25Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>95<path d="M18.1875 21.25C16.4961 21.25 15.125 19.8789 15.125 18.1875C15.125 16.4961 16.4961 15.125 18.1875 15.125C19.8789 15.125 21.25 16.4961 21.25 18.1875C21.25 19.8789 19.8789 21.25 18.1875 21.25Z" fill="white"/>96<path d="M18.1875 21.25C16.4961 21.25 15.125 19.8789 15.125 18.1875C15.125 16.4961 16.4961 15.125 18.1875 15.125C19.8789 15.125 21.25 16.4961 21.25 18.1875C21.25 19.8789 19.8789 21.25 18.1875 21.25Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>97</svg>9899100 <p class="shipping-text"></p>101 </div>102</div>103104105106107<div class="product-features-wrapper">108 <div class="product-features">109 <div class="feature-block">110<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 10px;">111<path d="M11.5546 20.9085C11.1977 21.0463 10.8023 21.0463 10.4454 20.9085C7.6644 19.8404 5.27274 17.9539 3.58634 15.4982C1.89994 13.0424 0.998126 10.1328 1 7.15373V2.53882C1 2.1307 1.16213 1.73929 1.45071 1.45071C1.7393 1.16213 2.1307 1 2.53882 1H19.4627C19.8706 1.00041 20.2616 1.16272 20.5498 1.45126C20.8381 1.7398 21 2.13097 21 2.53882V7.15373C21.002 10.133 20.1 13.0428 18.4133 15.4987C16.7266 17.9545 14.336 19.8409 11.5546 20.9085Z" fill="black" fill-opacity="0.34902"/>112<path d="M11.5546 20.9085C11.1977 21.0463 10.8023 21.0463 10.4454 20.9085C7.6644 19.8404 5.27274 17.9539 3.58634 15.4982C1.89994 13.0424 0.998126 10.1328 1 7.15373V2.53882C1 2.1307 1.16213 1.73929 1.45071 1.45071C1.7393 1.16213 2.1307 1 2.53882 1H19.4627C19.8706 1.00041 20.2616 1.16272 20.5498 1.45126C20.8381 1.7398 21 2.13097 21 2.53882V7.15373C21.002 10.133 20.1 13.0428 18.4133 15.4987C16.7266 17.9545 14.336 19.8409 11.5546 20.9085Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>113<path d="M15.6589 6.35181L9.45402 13.3323L6.35156 11.0055" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>114</svg>115116117118 <p class="feature-text" style="text-align:center!important">Lifetime Guarantee</p>119 </div>120121 <div class="feature-block">122<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 10px;">123<g clip-path="url(#clip0_98_9)">124<path d="M4.11578 15.8473L0.714355 16.7573L3.86293 11.303L7.76007 14.5158L5.02864 19.2473L4.11578 15.8458V15.8473Z" fill="white"/>125<path d="M15.8831 15.8473L19.2859 16.7587L16.1374 11.3044L12.2402 14.5173L14.9717 19.2487L15.8831 15.8473Z" fill="white"/>126<path d="M16.1574 11.3386L19.286 16.7586L15.8831 15.8472L14.9717 19.2486L12.2603 14.5501" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>127<path d="M17.076 7.83146C17.076 9.7092 16.3301 11.51 15.0023 12.8378C13.6746 14.1655 11.8737 14.9115 9.99602 14.9115C8.11828 14.9115 6.31746 14.1655 4.9897 12.8378C3.66194 11.51 2.91602 9.7092 2.91602 7.83146C2.91602 5.95373 3.66194 4.15291 4.9897 2.82515C6.31746 1.49739 8.11828 0.751465 9.99602 0.751465C11.8737 0.751465 13.6746 1.49739 15.0023 2.82515C16.3301 4.15291 17.076 5.95373 17.076 7.83146Z" fill="black" fill-opacity="0.34902"/>128<path d="M17.076 7.83146C17.076 9.7092 16.3301 11.51 15.0023 12.8378C13.6746 14.1655 11.8737 14.9115 9.99602 14.9115C8.11828 14.9115 6.31746 14.1655 4.9897 12.8378C3.66194 11.51 2.91602 9.7092 2.91602 7.83146C2.91602 5.95373 3.66194 4.15291 4.9897 2.82515C6.31746 1.49739 8.11828 0.751465 9.99602 0.751465C11.8737 0.751465 13.6746 1.49739 15.0023 2.82515C16.3301 4.15291 17.076 5.95373 17.076 7.83146Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>129<path d="M10.2859 3.98718L11.2616 5.95004C11.2833 5.99956 11.3177 6.04244 11.3614 6.07431C11.4051 6.10619 11.4564 6.12591 11.5102 6.13147L13.6773 6.46004C13.7393 6.46797 13.7978 6.49343 13.8459 6.53343C13.8939 6.57342 13.9296 6.6263 13.9486 6.68585C13.9677 6.7454 13.9693 6.80915 13.9534 6.86961C13.9375 6.93007 13.9047 6.98473 13.8588 7.02719L12.2573 8.54576C12.2333 8.59134 12.2208 8.64209 12.2208 8.69361C12.2208 8.74514 12.2333 8.79589 12.2573 8.84147L12.5645 10.9958C12.5778 11.0582 12.5727 11.1231 12.5497 11.1827C12.5267 11.2423 12.4868 11.2938 12.435 11.3311C12.3832 11.3684 12.3216 11.3897 12.2578 11.3926C12.1941 11.3955 12.1308 11.3797 12.0759 11.3472L10.1473 10.3272C10.0975 10.3047 10.0434 10.2931 9.98875 10.2931C9.93408 10.2931 9.88003 10.3047 9.83018 10.3272L7.90161 11.3472C7.84672 11.3788 7.78385 11.3939 7.72058 11.3906C7.65732 11.3873 7.59635 11.3658 7.54502 11.3287C7.4937 11.2915 7.4542 11.2403 7.43129 11.1813C7.40838 11.1222 7.40304 11.0578 7.4159 10.9958L7.77876 8.84147C7.79449 8.79131 7.7975 8.73802 7.78753 8.6864C7.77755 8.63478 7.7549 8.58645 7.72161 8.54576L6.12161 7.01576C6.07865 6.97279 6.04845 6.91876 6.03435 6.85966C6.02026 6.80055 6.02283 6.7387 6.04178 6.68097C6.06072 6.62325 6.0953 6.5719 6.14168 6.53265C6.18805 6.49339 6.2444 6.46777 6.30447 6.45861L8.47161 6.1429C8.52539 6.13734 8.57672 6.11761 8.62039 6.08574C8.66406 6.05387 8.69849 6.01099 8.72018 5.96147L9.6959 4.00004C9.72187 3.94433 9.76295 3.89702 9.81447 3.86349C9.86599 3.82996 9.92588 3.81155 9.98733 3.81036C10.0488 3.80917 10.1094 3.82525 10.1621 3.85676C10.2149 3.88827 10.2578 3.93395 10.2859 3.98861V3.98718Z" fill="white"/>130<path d="M10.2859 3.98718L11.2616 5.95004C11.2833 5.99956 11.3177 6.04244 11.3614 6.07431C11.4051 6.10619 11.4564 6.12591 11.5102 6.13147L13.6773 6.46004C13.7393 6.46797 13.7978 6.49343 13.8459 6.53343C13.8939 6.57342 13.9296 6.6263 13.9486 6.68585C13.9677 6.7454 13.9693 6.80915 13.9534 6.86961C13.9375 6.93007 13.9047 6.98473 13.8588 7.02719L12.2573 8.54576C12.2333 8.59134 12.2208 8.64209 12.2208 8.69361C12.2208 8.74514 12.2333 8.79589 12.2573 8.84147L12.5645 10.9958C12.5778 11.0582 12.5727 11.1231 12.5497 11.1827C12.5267 11.2423 12.4868 11.2938 12.435 11.3311C12.3832 11.3684 12.3216 11.3897 12.2578 11.3926C12.1941 11.3955 12.1308 11.3797 12.0759 11.3472L10.1473 10.3272C10.0975 10.3047 10.0434 10.2931 9.98875 10.2931C9.93408 10.2931 9.88003 10.3047 9.83018 10.3272L7.90161 11.3472C7.84672 11.3788 7.78385 11.3939 7.72058 11.3906C7.65732 11.3873 7.59635 11.3658 7.54502 11.3287C7.4937 11.2915 7.4542 11.2403 7.43129 11.1813C7.40838 11.1222 7.40304 11.0578 7.4159 10.9958L7.77876 8.84147C7.79449 8.79131 7.7975 8.73802 7.78753 8.6864C7.77755 8.63478 7.7549 8.58645 7.72161 8.54576L6.12161 7.01576C6.07865 6.97279 6.04845 6.91876 6.03435 6.85966C6.02026 6.80055 6.02283 6.7387 6.04178 6.68097C6.06072 6.62325 6.0953 6.5719 6.14168 6.53265C6.18805 6.49339 6.2444 6.46777 6.30447 6.45861L8.47161 6.1429C8.52539 6.13734 8.57672 6.11761 8.62039 6.08574C8.66406 6.05387 8.69849 6.01099 8.72018 5.96147L9.6959 4.00004C9.72187 3.94433 9.76295 3.89702 9.81447 3.86349C9.86599 3.82996 9.92588 3.81155 9.98733 3.81036C10.0488 3.80917 10.1094 3.82525 10.1621 3.85676C10.2149 3.88827 10.2578 3.93395 10.2859 3.98861V3.98718Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>131<path d="M3.84578 11.3342L0.714355 16.7571L4.11578 15.8457L5.02864 19.2485L7.74293 14.5457" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>132</g>133<defs>134<clipPath id="clip0_98_9">135<rect width="20" height="20" fill="white"/>136</clipPath>137</defs>138</svg>139140141142 <p class="feature-text" style="text-align:center!important">Highest Quality<br>Material</p>143 </div>144145 <div class="feature-block">146<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 10px;">147<g clip-path="url(#clip0_98_2)">148<path d="M10.5141 19.1901C10.1831 19.3178 9.81644 19.3178 9.48548 19.1901C6.90491 18.1987 4.68571 16.448 3.12094 14.1691C1.55616 11.8902 0.719416 9.19021 0.721194 6.42578V2.1415C0.721573 1.76287 0.87225 1.39987 1.14012 1.13227C1.40799 0.864669 1.77113 0.714355 2.14977 0.714355H17.8541C18.2329 0.714355 18.5963 0.864865 18.8642 1.13277C19.1321 1.40068 19.2826 1.76405 19.2826 2.14293V6.42578C19.2842 9.19054 18.447 11.8907 16.8817 14.1697C15.3164 16.4487 13.0952 18.1992 10.5141 19.1901Z" fill="black" fill-opacity="0.34902"/>149<path d="M4.36965 6.49997L5.54965 6.09711C5.64694 6.0575 5.75588 6.0576 5.8531 6.0974C5.95032 6.13719 6.02806 6.21351 6.06965 6.30997L6.93108 7.64426L11.6539 5.28283C12.0212 5.07233 12.4296 4.94362 12.8512 4.9055C13.2727 4.86738 13.6976 4.92074 14.0966 5.06195C14.4957 5.20315 14.8595 5.42886 15.1633 5.72365C15.4671 6.01843 15.7037 6.37534 15.8568 6.76997C15.8881 6.8708 15.8992 6.97683 15.8894 7.08195C15.8797 7.18708 15.8492 7.28924 15.7998 7.38257C15.7504 7.47589 15.6831 7.55853 15.6017 7.62575C15.5203 7.69297 15.4264 7.74344 15.3254 7.77426L12.5568 8.58569L12.2497 8.67997L11.1868 11.7914C11.1684 11.8605 11.1328 11.9239 11.0834 11.9756C11.0339 12.0273 10.9722 12.0657 10.9039 12.0871L9.19822 12.7143C9.12601 12.7382 9.0488 12.7429 8.97422 12.7278C8.89965 12.7128 8.83029 12.6785 8.77301 12.6284C8.71573 12.5784 8.67251 12.5142 8.64762 12.4423C8.62272 12.3705 8.61702 12.2933 8.63108 12.2185L9.39822 9.69711L9.19822 9.75569L6.18679 10.7357C5.98955 10.8034 5.77356 10.7905 5.58577 10.6998C5.39799 10.6091 5.25358 10.448 5.18394 10.2514L4.12108 6.9814C4.09409 6.88421 4.10468 6.78042 4.15074 6.69069C4.1968 6.60095 4.27495 6.53184 4.36965 6.49711V6.49997Z" fill="white"/>150<path d="M10.5141 19.1901C10.1831 19.3178 9.81644 19.3178 9.48548 19.1901C6.90491 18.1987 4.68571 16.448 3.12094 14.1691C1.55616 11.8902 0.719416 9.19021 0.721194 6.42578V2.1415C0.721573 1.76287 0.87225 1.39987 1.14012 1.13227C1.40799 0.864669 1.77113 0.714355 2.14977 0.714355H17.8541C18.2329 0.714355 18.5963 0.864865 18.8642 1.13277C19.1321 1.40068 19.2826 1.76405 19.2826 2.14293V6.42578C19.2842 9.19054 18.447 11.8907 16.8817 14.1697C15.3164 16.4487 13.0952 18.1992 10.5141 19.1901Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>151<path d="M4.36965 6.49997L5.54965 6.09711C5.64694 6.0575 5.75588 6.0576 5.8531 6.0974C5.95032 6.13719 6.02806 6.21351 6.06965 6.30997L6.93108 7.64426L11.6539 5.28283C12.0212 5.07233 12.4296 4.94362 12.8512 4.9055C13.2727 4.86738 13.6976 4.92074 14.0966 5.06195C14.4957 5.20315 14.8595 5.42886 15.1633 5.72365C15.4671 6.01843 15.7037 6.37534 15.8568 6.76997C15.8881 6.8708 15.8992 6.97683 15.8894 7.08195C15.8797 7.18708 15.8492 7.28924 15.7998 7.38257C15.7504 7.47589 15.6831 7.55853 15.6017 7.62575C15.5203 7.69297 15.4264 7.74344 15.3254 7.77426L12.5568 8.58569L12.2497 8.67997L11.1868 11.7914C11.1684 11.8605 11.1328 11.9239 11.0834 11.9756C11.0339 12.0273 10.9722 12.0657 10.9039 12.0871L9.19822 12.7143C9.12601 12.7382 9.0488 12.7429 8.97422 12.7278C8.89965 12.7128 8.83029 12.6785 8.77301 12.6284C8.71573 12.5784 8.67251 12.5142 8.64762 12.4423C8.62272 12.3705 8.61702 12.2933 8.63108 12.2185L9.39822 9.69711L9.19822 9.75569L6.18822 10.7357C5.9908 10.8038 5.77444 10.7911 5.58632 10.7004C5.39821 10.6097 5.25357 10.4483 5.18394 10.2514L4.12108 6.9814C4.09409 6.88421 4.10468 6.78042 4.15074 6.69069C4.1968 6.60095 4.27495 6.53184 4.36965 6.49711V6.49997Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>152</g>153<defs>154<clipPath id="clip0_98_2">155<rect width="20" height="20" fill="white"/>156</clipPath>157</defs>158</svg>159160161 <p class="feature-text" style="text-align:center!important">TSA & EU Airline<br>Approved</p>162 </div>163 </div>164</div>165166<style>167 .product-features-wrapper {168 overflow-x: auto;169 padding: 10px 0;170 }171172 .product-features {173 display: flex;174 justify-content: space-between;175 gap: 10px;176 min-width: min-content;177 }178179 .feature-block {180 flex: 1;181 min-width: 120px;182 background-color: #F5EEDD;183 border-radius: 10px;184 padding: 15px 10px;185 text-align: center;186 display: flex;187 flex-direction: column;188 align-items: center;189 justify-content: center;190 }191192 .feature-icon {193 margin-bottom: 10px;194 }195196 .feature-text {197 color: #333;198 font-size: 14px;199 font-weight: 500;200 margin: 0;201 line-height: 1.2;202 text-align: center !important;203 }204205 @media (max-width: 600px) {206 .feature-block {207 min-width: 100px;208 padding: 10px 5px;209 }210211 .feature-text {212 font-size: 12px;213 }214215 .feature-icon {216 width: 20px;217 height: 20px;218 }219 }220</style>



