Back to Shopify Liquid
Shopify Liquid
Guarantee Box
A visual trust-building group of icons and text highlighting customer protections. It features styled boxes for free returns, secure checkout, cash-on-delivery options, and satisfaction guarantees using inline SVGs for performance.
EasyTrustProduct PageCRO spentBadgeSales
54 lines · 10.7 KB
Setup 5–10 minutes 3 min read 53 lines
Key features
- Inline SVG icons for sharp scaling and fast loading
- Pre-styled layout with rounded corners and soft shadows
- Mobile-responsive flexbox alignment for icons and text
- Trust badge messaging in Spanish for LATAM/Spanish markets
Best use cases
- Adding trust signals below the 'Add to Cart' button to reduce bounce rates.
- Highlighting specific payment policies like Cash on Delivery (Contra-entrega).
- Displaying 30-day return policies clearly on product detail pages.
Compatibility
- Most Shopify themes
The code
Shopify Liquid
1<!--INICIO CODIGO DE BOX GARANTIA 3-->2<div style="background-color: #D6D6D669; border-radius: 20px; padding: 20px; padding-top:5px; 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;">34 <div style="display: flex; align-items: center; margin-bottom: -15px;">5 <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" style="fill: #1572b6; margin-right: 10px;">6 <!-- Icono para Devolución Gratis -->7 <svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 706.48 614.73">8 <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"/>9 </svg>10 </svg>11 <p style="font-size: 14px; color: black; line-height: 1.2;"><b>Devolución gratis,</b> tienes 30 días después de recibir tu producto.</p>12 </div>1314 <div style="display: flex; align-items: center; margin-bottom: -15px;">15 <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" style="fill: #1572b6; margin-right: 10px;">16 <!-- Icono para Compra Garantizada -->17 <svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 738.46 738.46">18 <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"/>19 </svg>20 </svg>21 <p style="font-size: 14px; color: black; line-height: 1.2;"><b>Compra 100% segura,</b> envíos rápidos y pagos 100% seguros.</p>22 </div>2324 <div style="display: flex; align-items: center; margin-bottom: -15px;">25 <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" style="fill: #1572b6; margin-right: 13px;">26 <!-- Icono para Servicio Contra-entrega -->27 <svg id="Icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.02 29.9">28 <path d="m25.05,14H3.05c-.6,0-1-.4-1-1V1c0-.6.4-1,1-1h22c.6,0,1,.4,1,1v12c0,.6-.4,1-1,1Zm-21-2h20V2H4.05v10Z"/>29 <path d="m14.05,11c-1.7,0-3-1.8-3-4s1.3-4,3-4,3,1.8,3,4-1.3,4-3,4Z"/>30 <path d="m27.95,15.5c-.2-.3-.5-.5-.9-.5-2.2,0-4.3,1-5.6,2.8l-.9,1.2c-1.1,1.3-2.8,2-4.5,2h-3c-.6,0-1-.4-1-1s.4-1,1-1h1.9c1.6,0,3.1-1.3,3.1-2.9v-.1c0-.5-.5-1-1-1h-6.1c-3.6,0-6.5,1.6-8.1,4.2L.15,23.4c-.2.3-.2.7,0,1l3,5c.1.2.4.4.6.5h.2c.2,0,.4-.1.6-.2,3.8-2.5,8.2-3.8,12.7-3.8,3.3,0,6.3-1.8,7.9-4.7l2.7-4.8c.2-.2.2-.6.1-.9Z"/>31 <path d="m7.05,1H3.05v5c2.8,0,5-2.2,5-5h-1Z"/>32 <path d="m3.05,9v4h5c0-2.8-2.2-5-5-5v1Z"/>33 <path d="m21.05,13h4v-5c-2.8,0-5,2.2-5,5h1Z"/>34 <path d="m25.05,5V1h-5c0,2.8,2.2,5,5,5v-1Z"/>35 </svg>36 </svg>37 <p style="font-size: 14px; color: black; line-height: 1.2;"><b>Servicio contra-entrega,</b> pague su producto cuando lo reciba en su casa.</p>38 </div>3940 <div style="display: flex; align-items: center; margin-top: -10px;">41 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="25" height="25" style="fill: #1572b6; margin-right: 7px;">42 <g id="SVGRepo_bgCarrier" stroke-width="0"></g>43 <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>44 <g id="SVGRepo_iconCarrier">45 <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="#1572b6"></path>46 <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="#1572b6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>47 </g>48 </svg>49 <p style="font-size: 14px; color: black; line-height: 1.2;"><b>Más vendido,</b> entre los productos de esta categoría.</p>50 </div>5152</div>53<!--FIN CODIGO DE BOX GARANTIA 3-->
How to install Guarantee 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 5–10 minutes.
- 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.
- 2On the duplicated theme, click … → Edit code to open the theme code editor.
- 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.
- 4Click Copy code on this page, then paste the snippet directly under the Add to cart button, where it reinforces the purchase decision.
- 5Click Save, then hit Preview and check the block on desktop, tablet and mobile widths.
- 6When 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 Guarantee Box to your brand without touching the rest of the theme.
- Colours — the snippet uses
#E5E5E5,#ccc,#1572b6. 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.
- Corners —
border-radius: 20pxcontrols 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 “Devolución gratis,”) 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.liquidinstead ofsections/main-product.liquid, this block will render on every page of the store, including ones where it makes no sense. - 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.
- This snippet is plain markup with no scripts and no external requests, so its performance cost is effectively zero.
- 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
Guarantee 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 “Guarantee 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.
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
Guides