Trust Badges - Códigos Liquid

Trust Badges

Códigos Liquid para agregar sellos de confianza y aumentar conversiones

Badges de Pago Seguro

Muestra métodos de pago confiables y sellos de seguridad específicos para Chile

payment-badges.liquid 
<!-- payment button -->  
                   
<div class="payment-icons-fm">
  <span class="visually-hidden">Payment methods</span>
  <div class="payment-icons-container">
    <svg class="payment-icon" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 38 24" width="38" height="24" aria-labelledby="pi-american_express"><title id="pi-american_express">American Express</title><g fill="none"><path fill="#000" d="M35,0 L3,0 C1.3,0 0,1.3 0,3 L0,21 C0,22.7 1.4,24 3,24 L35,24 C36.7,24 38,22.7 38,21 L38,3 C38,1.3 36.6,0 35,0 Z" opacity=".07"></path><path fill="#006FCF" d="M35,1 C36.1,1 37,1.9 37,3 L37,21 C37,22.1 36.1,23 35,23 L3,23 C1.9,23 1,22.1 1,21 L1,3 C1,1.9 1.9,1 3,1 L35,1 Z"></path><path fill="#FFF" d="M8.971,10.268 L9.745,12.144 L8.203,12.144 L8.971,10.268 Z M25.046,10.346 L22.069,10.346 L22.069,11.173 L24.998,11.173 L24.998,12.412 L22.075,12.412 L22.075,13.334 L25.052,13.334 L25.052,14.073 L27.129,11.828 L25.052,9.488 L25.046,10.346 L25.046,10.346 Z M10.983,8.006 L14.978,8.006 L15.865,9.941 L16.687,8 L27.057,8 L28.135,9.19 L29.25,8 L34.013,8 L30.494,11.852 L33.977,15.68 L29.143,15.68 L28.065,14.49 L26.94,15.68 L10.03,15.68 L9.536,14.49 L8.406,14.49 L7.911,15.68 L4,15.68 L7.286,8 L10.716,8 L10.983,8.006 Z"></path></g></svg>
    <svg class="payment-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" role="img" x="0" y="0" width="38" height="24" viewBox="0 0 165.521 105.965" xml:space="preserve" aria-labelledby="pi-apple_pay"><title id="pi-apple_pay">Apple Pay</title><path fill="#000" d="M150.698 0H14.823c-.566 0-1.133 0-1.698.003-.477.004-.953.009-1.43.022-1.039.028-2.087.09-3.113.274a10.51 10.51 0 0 0-2.958.975 9.932 9.932 0 0 0-4.35 4.35 10.463 10.463 0 0 0-.975 2.96C.113 9.611.052 10.658.024 11.692c-.013.477-.018.954-.022 1.43C.001 13.689 0 14.256 0 14.823v76.318c0 .567 0 1.132.002 1.699.004.476.009.953.022 1.43.028 1.036.09 2.084.275 3.11a10.46 10.46 0 0 0 .974 2.963 9.897 9.897 0 0 0 4.35 4.35c.947.483 1.917.79 2.96.974 1.025.185 2.073.247 3.112.275.477.011.953.017 1.43.021.565.004 1.132.004 1.698.004h135.875c.565 0 1.132 0 1.698-.004.476-.004.953-.01 1.431-.021 1.039-.028 2.086-.09 3.112-.275a10.474 10.474 0 0 0 2.958-.974 9.897 9.897 0 0 0 4.35-4.35c.483-.947.789-1.917.974-2.963.185-1.026.246-2.074.274-3.11.013-.477.018-.954.022-1.43.003-.567.003-1.132.003-1.699V14.823c0-.567 0-1.134-.003-1.699a63.067 63.067 0 0 0-.022-1.43c-.028-1.034-.089-2.081-.274-3.113a10.4 10.4 0 0 0-.974-2.96 9.94 9.94 0 0 0-4.35-4.35A10.52 10.52 0 0 0 156.112.3c-1.026-.185-2.073-.246-3.112-.274a63.136 63.136 0 0 0-1.431-.022C151.83.001 151.263 0 150.698 0z" opacity=".2"></path><path fill="#fff" d="M150.698 3.532l1.672.003c.452.003.905.008 1.36.02.793.021 1.719.065 2.583.22a7.014 7.014 0 0 1 1.969.653 6.426 6.426 0 0 1 2.821 2.821c.24.46.42.954.653 1.970.155.863.199 1.789.22 2.582.012.455.017.908.02 1.36.005.557.005 1.113.005 1.671v76.318c0 .558 0 1.114-.004 1.682-.003.452-.008.905-.02 1.35-.021.794-.065 1.719-.22 2.583a7.007 7.007 0 0 1-.653 1.969 6.426 6.426 0 0 1-2.821 2.82c-.46.24-.954.42-1.969.654-.864.154-1.79.199-2.583.219a63.016 63.016 0 0 1-1.36.021c-.557.004-1.114.004-1.672.004H14.823c-.558 0-1.114 0-1.681-.004a63.016 63.016 0 0 1-1.36-.021c-.794-.02-1.719-.065-2.584-.219a7.0 7.0 0 0 1-1.969-.654 6.427 6.427 0 0 1-2.82-2.82 6.938 6.938 0 0 1-.654-1.969c-.154-.864-.199-1.789-.219-2.584a63.431 63.431 0 0 1-.021-1.35c-.003-.567-.004-1.123-.004-1.682V14.823c0-.558.001-1.114.004-1.671.003-.452.008-.905.021-1.36.02-.793.065-1.719.219-2.582a6.961 6.961 0 0 1 .654-1.97A6.427 6.427 0 0 1 7.23 4.405a7.009 7.009 0 0 1 1.969-.653c.865-.155 1.79-.199 2.584-.22.455-.012.808-.017 1.36-.02l1.681-.003h135.875z"></path><g><g><path fill="#000" d="M43.508 35.77c1.404-1.755 2.356-4.112 2.105-6.52-2.054.102-4.56 1.355-6.012 3.112-1.303 1.504-2.456 3.959-2.156 6.266 2.306.2 4.61-1.152 6.063-2.858"></path><path fill="#000" d="M45.587 39.079c-3.35-.2-6.196 1.9-7.795 1.9-1.6 0-4.049-1.8-6.698-1.751-3.447.05-6.645 2-8.395 5.1-3.598 6.2-.95 15.4 2.55 20.45 1.699 2.5 3.747 5.25 6.445 5.151 2.55-.1 3.549-1.65 6.647-1.65 3.097 0 3.997 1.65 6.696 1.6 2.798-.05 4.548-2.5 6.247-5 1.951-2.85 2.747-5.6 2.797-5.75-.05-.05-5.396-2.101-5.446-8.251-.05-5.15 4.198-7.6 4.398-7.751-2.402-3.501-6.147-3.901-7.447-4.049"></path></g></g></svg>
    <svg class="payment-icon" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 38 24" width="38" height="24" aria-labelledby="pi-google_pay"><title id="pi-google_pay">Google Pay</title><path d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z" fill="#000" opacity=".07"></path><path d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32" fill="#fff"></path><path d="M18.093 11.976v3.2h-1.018v-7.9h2.691a2.447 2.447 0 0 1 1.747.692c.44.44.692 1.005.692 1.692 0 .692-.25 1.252-.692 1.692a2.447 2.447 0 0 1-1.747.692l2.465 3.832h-1.143l-2.995-4.8zm0-.8h1.673c.44 0 .8-.16 1.094-.454.292-.294.454-.642.454-1.046 0-.404-.162-.752-.454-1.046a1.49 1.49 0 0 0-1.094-.454h-1.673v3z" fill="#5f6368"></path><path d="M26.025 15.26v-.8h3.33c.06.48.06.96 0 1.44h-3.33v-.64zm-.04-4.24v-.8h3.93c.06.48.06.8 0 1.28h-3.93v-.48z" fill="#4285f4"></path><path d="M26.025 13.66v-.8h3.93c.06.48.06.8 0 1.28h-3.93v-.48z" fill="#34a853"></path><path d="M26.025 11.976v-.8h3.93c.06.48.06.8 0 1.28h-3.93v-.48z" fill="#fbbc04"></path><path d="M26.025 10.296v-.8h3.93c.06.48.06.8 0 1.28h-3.93v-.48z" fill="#ea4335"></path></svg>
    <svg class="payment-icon" viewBox="0 0 38 24" xmlns="http://www.w3.org/2000/svg" width="38" height="24" role="img" aria-labelledby="pi-maestro"><title id="pi-maestro">Maestro</title><path opacity=".07" d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"></path><path fill="#fff" d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32"></path><circle fill="#EB001B" cx="15" cy="12" r="7"></circle><circle fill="#00A2E5" cx="23" cy="12" r="7"></circle><path fill="#7375CF" d="M22 12c0-2.4-1.2-4.5-3-5.7-1.8 1.2-3 3.3-3 5.7s1.2 4.5 3 5.7c1.8-1.2 3-3.3 3-5.7z"></path></svg>
    <svg class="payment-icon" viewBox="0 0 38 24" xmlns="http://www.w3.org/2000/svg" role="img" width="38" height="24" aria-labelledby="pi-master"><title id="pi-master">Mastercard</title><path opacity=".07" d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"></path><path fill="#fff" d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32"></path><circle fill="#EB001B" cx="15" cy="12" r="7"></circle><circle fill="#F79E1B" cx="23" cy="12" r="7"></circle><path fill="#FF5F00" d="M22 12c0-2.4-1.2-4.5-3-5.7-1.8 1.2-3 3.3-3 5.7s1.2 4.5 3 5.7c1.8-1.2 3-3.3 3-5.7z"></path></svg>
    <svg class="payment-icon" viewBox="0 0 38 24" xmlns="http://www.w3.org/2000/svg" role="img" width="38" height="24" aria-labelledby="pi-visa"><title id="pi-visa">Visa</title><path opacity=".07" d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"></path><path fill="#fff" d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32"></path><path d="M28.3 10.1H28c-.4 1-.7 1.5-1 3h1.9c-.3-1.5-.3-2.2-.6-3zm2.9 5.9h-1.7c-.1 0-.1 0-.2-.1l-.2-.9-.1-.4h-2.4c-.1 0-.2 0-.2.2l-.3.8-.1.4c0 .1-.1.1-.1.1h-2.1l.2-.5L27.7 8.7c0-.5.3-.7.8-.7h1.5c.1 0 .2 0 .2.2l1.4 6.5c.1.4.2.7.2 1.1.1.1.1.1.1.2zm-13.4-.3l.4-1.8c.1 0 .2.1.2.1.7.3 1.4.5 2.1.4.2 0 .5-.1.7-.2.5-.2.5-.7.1-1.1-.2-.2-.5-.3-.8-.5-.4-.2-.8-.4-1.1-.7-1.2-1-.8-2.4-.1-3.1.6-.4.9-.8 1.7-.8 1.2 0 2.5 0 3.1.2h.1c-.1.6-.2 1.1-.4 1.7-.5-.2-1-.4-1.5-.4-.3 0-.6 0-.9.1-.2 0-.3.1-.4.2-.2.2-.2.5 0 .7l.5.4c.4.2.8.4 1.1.6.5.3 1 .8 1.1 1.4.2.9-.1 1.7-.9 2.3-.5.4-.7.6-1.4.6-1.4 0-2.5.1-3.4-.2-.1.2-.1.2-.2.1zm-3.5.3c.1-.7.1-.7.2-1 .5-2.2 1-4.5 1.4-6.7.1-.2.1-.3.3-.3H18c-.2 1.2-.4 2.1-.7 3.2-.3 1.5-.6 3-1 4.5 0 .2-.1.2-.3.2M5 8.2c0-.1.2-.2.3-.2h3.4c.5 0 .9.3 1 .8l.9 4.4c0 .1 0 .1.1.2 0-.1.1-.1.1-.1l2.1-5.1c-.1-.1 0-.2.1-.2h2.1c0 .1 0 .1-.1.2l-3.1 7.3c0 .1-.1.2-.2.2H9.7c-.1 0-.2 0-.2-.2L7.9 9.5c-.2-.2-.5-.5-.9-.6-.6-.3-1.7-.5-1.9-.5L5 8.2z" fill="#142688"></path></svg>
  </div>
</div>

<style>
.payment-icons-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: clamp(4px, 1.5vw, 8px);
  width: 100%;
  padding: 2px 0;
}

.payment-icon {
  height: 24px;
  width: auto;
  max-width: 38px;
  min-width: 20px; /* Mínimo para mantener legibilidad */
  flex: 1 1 0;
  object-fit: contain;
}

/* Opcional: Mejorar accesibilidad en hover */
.payment-icon:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
</style>
Badge de Envío Gratis

Destaca envío gratis con condiciones dinámicas basadas en el monto del carrito

free-shipping-badge.liquid 
<!-- Configurar monto mínimo para envío gratis -->
<!-- Configurar monto mínimo para envío gratis -->
{% assign free_shipping_threshold = 30000 %}
{% assign current_total = cart.total_price %}
{% assign remaining_amount = free_shipping_threshold | minus: current_total %}

<div class="free-shipping-badge">
  {% if current_total >= free_shipping_threshold %}
    <div class="shipping-achieved">
      <i class="bi bi-check-circle-fill"></i>
      <span>¡Felicidades! Tienes <strong>envío gratis</strong> a todo Chile 🇨🇱</span>
    </div>
  {% else %}
    <div class="shipping-progress">
      <i class="bi bi-truck"></i>
      <span>Agrega <strong>${{ remaining_amount | money_without_currency | strip_html }}</strong> más para <strong>envío gratis</strong></span>
      <div class="progress-bar-container">
        {% assign progress_percentage = current_total | times: 100 | divided_by: free_shipping_threshold %}
        <div class="progress-bar">
          <div class="progress-fill" style="width: {{ progress_percentage }}%"></div>
        </div>
        <small>{{ progress_percentage }}% completado</small>
      </div>
    </div>
  {% endif %}
</div>

<style>
.free-shipping-badge {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
  padding: 15px 20px;
  border-radius: 10px;
  margin: 15px 0;
  text-align: center;
  font-weight: 500;
}

.shipping-achieved {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.shipping-achieved i {
  font-size: 1.2rem;
  color: #ffffff;
}

.shipping-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.shipping-progress i {
  font-size: 1.5rem;
  margin-bottom: 5px;
}

.progress-bar-container {
  width: 100%;
  max-width: 300px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,0.3);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 5px;
}

.progress-fill {
  height: 100%;
  background: rgba(255,255,255,0.9);
  border-radius: 4px;
  transition: width 0.3s ease;
}

@media (max-width: 768px) {
  .free-shipping-badge {
    padding: 12px 15px;
    font-size: 0.9rem;
  }
  
  .shipping-progress span {
    font-size: 0.85rem;
  }
}
</style>
Garantía de Devolución

Badge de garantía para generar confianza en compradores chilenos

guarantee-badge.liquid 
<div class="guarantee-badges">
  <div class="guarantee-item">
    <div class="guarantee-icon">
      <i class="bi bi-arrow-repeat"></i>
    </div>
    <div class="guarantee-text">
      <strong>30 días</strong><br>
      <span>Garantía de devolución</span>
    </div>
  </div>
  
  <div class="guarantee-item">
    <div class="guarantee-icon">
      <i class="bi bi-truck"></i>
    </div>
    <div class="guarantee-text">
      <strong>Envío gratis</strong><br>
      <span>Sobre $30.000</span>
    </div>
  </div>
  
  <div class="guarantee-item">
    <div class="guarantee-icon">
      <i class="bi bi-headset"></i>
    </div>
    <div class="guarantee-text">
      <strong>Soporte 24/7</strong><br>
      <span>Atención al cliente</span>
    </div>
  </div>
  
  <div class="guarantee-item">
    <div class="guarantee-icon">
      <i class="bi bi-geo-alt"></i>
    </div>
    <div class="guarantee-text">
      <strong>Todo Chile</strong><br>
      <span>Despacho nacional</span>
    </div>
  </div>
</div>

<style>
.guarantee-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  padding: 20px 0;
  border-top: 1px solid #e9ecef;
  border-bottom: 1px solid #e9ecef;
  margin: 20px 0;
}

.guarantee-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: transform 0.2s ease;
}

.guarantee-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.guarantee-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.guarantee-text strong {
  color: #495057;
  font-size: 0.95rem;
  display: block;
  line-height: 1.2;
}

.guarantee-text span {
  color: #6c757d;
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  .guarantee-badges {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .guarantee-item {
    padding: 12px;
    gap: 8px;
  }
  
  .guarantee-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  
  .guarantee-text strong {
    font-size: 0.85rem;
  }
  
  .guarantee-text span {
    font-size: 0.75rem;
  }
}
</style>
🤖 Generador de Trust Badge Personalizado
¡Genera badges únicos con IA! Describe lo que necesitas y obtendrás código personalizado para tu tienda.
💡 Ejemplos de instrucciones:
🔒 Seguridad: "Badges de seguridad color verde con certificados SSL y PayPal"
🚚 Envío: "Mostrar envío gratis con camión, colores naranjas, para toda Chile"
💳 Pagos: "Logos de tarjetas grandes, fondo oscuro, con WebPay incluido"
⭐ Garantía: "Badge circular con estrella, 30 días garantía, colores dorados"
¡Código generado exitosamente! Aquí está tu Trust Badge personalizado:
trust-badge-personalizado.liquid
Probar Código en tu Tienda
Pega cualquier código Liquid aquí para ver cómo se verá en tu tienda antes de implementarlo
Vista Previa - Así se verá en tu tienda:
Esta es una simulación. El resultado real puede variar según tu tema de Shopify.
🛠️ Pasos para agregar Liquid personalizado en Shopify
1
Ir al tema activo

En el menú lateral de Shopify → Tienda online → Temas.
Ubica tu tema actual.

2
Abrir el editor de plantillas

Haz clic en Personalizar.

3
Seleccionar la plantilla

Arriba, en el desplegable, selecciona dónde quieres añadir tu Liquid:
Página de inicio, Producto, Colección, Carrito, etc.

4
Agregar un bloque Liquid personalizado

En el panel izquierdo, busca la sección donde lo vas a insertar.
Haz clic en Agregar bloque → Liquid personalizado.

5
Insertar tu código

Se abrirá el editor de bloque con un campo llamado Código de Liquid.
Pega ahí tu código y guarda.

✅ Ventajas de este método
  • ✅ Más seguro: No modificas archivos del tema directamente
  • ✅ Fácil de revertir: Solo eliminas el bloque si algo sale mal
  • ✅ Visual: Ves los cambios inmediatamente en el preview
  • ✅ No requiere código: Interface gráfica simple
💡 Ubicaciones recomendadas para Trust Badges
  • Payment Badges: Página de producto → Información del producto
  • Envío Gratis: Página de carrito → Resumen del carrito
  • Garantías: Página de producto → Después de precio