Checkout Optimizado - Códigos Liquid

Checkout Optimizado

Códigos para reducir abandono y aumentar el valor promedio del pedido

Barra de Progreso del Checkout

Muestra el progreso del checkout para reducir ansiedad y abandono

checkout-progress.liquid

<div class="checkout-progress-bar">
  <div class="progress-header">
    <h4>Tu progreso de compra</h4>
    <p>Estás a solo unos pasos de completar tu pedido</p>
  </div>
  
  <div class="progress-steps">
    <div class="step completed">
      <div class="step-icon">
        <i class="bi bi-cart-fill"></i>
      </div>
      <div class="step-label">Carrito</div>
    </div>
    
    <div class="step active">
      <div class="step-icon">
        <i class="bi bi-person-fill"></i>
      </div>
      <div class="step-label">Información</div>
    </div>
    
    <div class="step">
      <div class="step-icon">
        <i class="bi bi-truck"></i>
      </div>
      <div class="step-label">Envío</div>
    </div>
    
    <div class="step">
      <div class="step-icon">
        <i class="bi bi-credit-card-fill"></i>
      </div>
      <div class="step-label">Pago</div>
    </div>
  </div>
  
  <div class="progress-line">
    <div class="progress-fill" style="width: 50%"></div>
  </div>
</div>

<style>
.checkout-progress-bar {
  background: white;
  padding: 25px;
  border-radius: 12px;
  margin: 20px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border: 1px solid #e9ecef;
}

.progress-header {
  text-align: center;
  margin-bottom: 25px;
}

.progress-header h4 {
  color: #495057;
  margin-bottom: 5px;
  font-weight: 600;
}

.progress-header p {
  color: #6c757d;
  margin: 0;
  font-size: 0.9rem;
}

.progress-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin-bottom: 15px;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

.step-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #e9ecef;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  transition: all 0.3s ease;
  font-size: 1.2rem;
}

.step.completed .step-icon {
  background: #28a745;
  color: white;
}

.step.active .step-icon {
  background: #007bff;
  color: white;
  animation: pulse 2s infinite;
}

.step-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #6c757d;
  text-align: center;
}

.step.completed .step-label,
.step.active .step-label {
  color: #495057;
  font-weight: 600;
}

.progress-line {
  position: absolute;
  top: 25px;
  left: 25px;
  right: 25px;
  height: 3px;
  background: #e9ecef;
  border-radius: 2px;
  z-index: 1;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #28a745 0%, #007bff 100%);
  border-radius: 2px;
  transition: width 0.5s ease;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@media (max-width: 768px) {
  .checkout-progress-bar {
    padding: 20px 15px;
  }
  
  .progress-steps {
    margin-bottom: 10px;
  }
  
  .step-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    margin-bottom: 6px;
  }
  
  .step-label {
    font-size: 0.75rem;
  }
  
  .progress-line {
    top: 20px;
    left: 20px;
    right: 20px;
  }
}
</style>

🛠️ Pasos para agregar Liquid personalizado en Shopify

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

Abrir el editor de plantillas - Haz clic en Personalizar.

Seleccionar la plantilla - Arriba, en el desplegable, selecciona Carrito para este código de progreso.

Agregar un bloque Liquid personalizado - En el panel izquierdo, busca la sección "Encabezado del carrito". Haz clic en Agregar bloque → Liquid personalizado.

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.

✅ Ventaja: Más seguro que editar archivos. Solo eliminas el bloque si algo sale mal.

Upsells Dinámicos en Carrito

Sugiere productos complementarios basados en lo que está en el carrito

cart-upsells.liquid

<div class="cart-upsells-section">
  <h4 class="upsells-title">
    <i class="bi bi-star-fill"></i>
    Productos que otros compraron junto con este
  </h4>
  
  <div class="upsells-grid">
    {% comment %} 
    Aquí obtienes productos relacionados o específicos para upsell
    Puedes usar product.metafields para productos específicos
    {% endcomment %}
    
    {% for product in collections.featured.products limit: 3 %}
      {% unless cart.items contains product.variants.first %}
        <div class="upsell-item">
          <div class="product-image">
            <img src="{{ product.featured_image | img_url: '200x200' }}" alt="{{ product.title }}">
            <div class="quick-add-overlay">
              <button class="quick-add-btn" data-variant-id="{{ product.variants.first.id }}">
                Agregar rápido
              </button>
            </div>
          </div>
          
          <div class="product-info">
            <h6 class="product-title">{{ product.title | truncate: 40 }}</h6>
            <div class="product-price">
              {% if product.compare_at_price > product.price %}
                <span class="original-price">${{ product.compare_at_price | money_without_currency }}</span>
                <span class="sale-price">${{ product.price | money_without_currency }}</span>
                <span class="discount-badge">
                  {% assign discount = product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price %}
                  -{{ discount }}%
                </span>
              {% else %}
                <span class="regular-price">${{ product.price | money_without_currency }}</span>
              {% endif %}
            </div>
          </div>
          
          <div class="upsell-savings">
            <small>⚡ Combínalos y ahorra más</small>
          </div>
        </div>
      {% endunless %}
    {% endfor %}
  </div>
  
  <div class="bundle-offer">
    <div class="bundle-content">
      <strong>🎁 Oferta especial:</strong> 
      Compra 2 o más productos y obtén 10% descuento adicional
      <div class="bundle-code">Código: <strong>COMBO10</strong></div>
    </div>
  </div>
</div>

<script>
// Función para agregar productos rápidamente al carrito
document.addEventListener('click', function(e) {
  if (e.target.classList.contains('quick-add-btn')) {
    e.preventDefault();
    const variantId = e.target.getAttribute('data-variant-id');
    const button = e.target;
    
    // Cambiar estado del botón
    button.textContent = 'Agregando...';
    button.disabled = true;
    
    // Agregar al carrito
    fetch('/cart/add.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        id: variantId,
        quantity: 1
      })
    })
    .then(response => response.json())
    .then(data => {
      button.textContent = '✓ Agregado';
      button.classList.add('added');
      
      // Actualizar carrito en página si tienes función para eso
      if (typeof updateCartDrawer === 'function') {
        updateCartDrawer();
      }
      
      // Restaurar botón después de 2 segundos
      setTimeout(() => {
        button.textContent = 'Agregar rápido';
        button.disabled = false;
        button.classList.remove('added');
      }, 2000);
    })
    .catch(error => {
      console.error('Error:', error);
      button.textContent = 'Error';
      button.disabled = false;
      
      setTimeout(() => {
        button.textContent = 'Agregar rápido';
      }, 2000);
    });
  }
});
</script>

<style>
.cart-upsells-section {
  background: #f8f9fa;
  padding: 25px;
  border-radius: 12px;
  margin: 20px 0;
  border: 1px solid #e9ecef;
}

.upsells-title {
  color: #495057;
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.1rem;
  font-weight: 600;
}

.upsells-title i {
  color: #ffc107;
  margin-right: 8px;
}

.upsells-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.upsell-item {
  background: white;
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  position: relative;
  transition: transform 0.2s ease;
  border: 1px solid #e9ecef;
}

.upsell-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.product-image {
  position: relative;
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: 8px;
}

.product-image img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.upsell-item:hover .product-image img {
  transform: scale(1.05);
}

.quick-add-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.upsell-item:hover .quick-add-overlay {
  opacity: 1;
}

.quick-add-btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quick-add-btn:hover {
  background: #0056b3;
  transform: scale(1.05);
}

.quick-add-btn.added {
  background: #28a745;
}

.product-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: #495057;
  margin-bottom: 5px;
  line-height: 1.2;
}

.product-price {
  margin-bottom: 8px;
}

.original-price {
  color: #6c757d;
  text-decoration: line-through;
  font-size: 0.8rem;
  margin-right: 5px;
}

.sale-price {
  color: #dc3545;
  font-weight: bold;
  font-size: 0.9rem;
}

.regular-price {
  color: #495057;
  font-weight: bold;
  font-size: 0.9rem;
}

.discount-badge {
  background: #dc3545;
  color: white;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 5px;
}

.upsell-savings {
  color: #28a745;
  font-size: 0.8rem;
  font-weight: 500;
}

.bundle-offer {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
  padding: 15px;
  border-radius: 10px;
  text-align: center;
}

.bundle-content {
  font-size: 0.9rem;
}

.bundle-code {
  margin-top: 5px;
  font-size: 0.8rem;
}

.bundle-code strong {
  background: rgba(255,255,255,0.2);
  padding: 2px 8px;
  border-radius: 12px;
  letter-spacing: 1px;
}

@media (max-width: 768px) {
  .cart-upsells-section {
    padding: 20px 15px;
  }
  
  .upsells-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .upsell-item {
    padding: 12px;
  }
  
  .product-image img {
    height: 120px;
  }
  
  .product-title {
    font-size: 0.8rem;
  }
  
  .quick-add-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
}
</style>

🛠️ Pasos para agregar Liquid personalizado en Shopify

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

Abrir el editor de plantillas - Haz clic en Personalizar.

Seleccionar la plantilla - Arriba, en el desplegable, selecciona Carrito para mostrar upsells.

Agregar un bloque Liquid personalizado - En el panel izquierdo, busca la sección donde quieres mostrar sugerencias. Haz clic en Agregar bloque → Liquid personalizado.

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.

✅ Ventaja: Más seguro que editar archivos. Solo eliminas el bloque si algo sale mal.

Elementos de Confianza en Checkout

Reduce la ansiedad de compra con elementos de confianza específicos para Chile

checkout-trust.liquid

<div class="checkout-trust-elements">
  <div class="trust-header">
    <h5>Tu compra está 100% protegida</h5>
  </div>
  
  <div class="trust-grid">
    <div class="trust-item">
      <div class="trust-icon">
        <i class="bi bi-shield-lock-fill"></i>
      </div>
      <div class="trust-content">
        <strong>Conexión segura</strong>
        <p>Certificado SSL 256-bit</p>
      </div>
    </div>
    
    <div class="trust-item">
      <div class="trust-icon">
        <i class="bi bi-credit-card-2-front-fill"></i>
      </div>
      <div class="trust-content">
        <strong>Pago seguro</strong>
        <p>Webpay y Transbank</p>
      </div>
    </div>
    
    <div class="trust-item">
      <div class="trust-icon">
        <i class="bi bi-arrow-repeat"></i>
      </div>
      <div class="trust-content">
        <strong>30 días garantía</strong>
        <p>Devolución fácil</p>
      </div>
    </div>
    
    <div class="trust-item">
      <div class="trust-icon">
        <i class="bi bi-geo-alt-fill"></i>
      </div>
      <div class="trust-content">
        <strong>Empresa chilena</strong>
        <p>RUT: XX.XXX.XXX-X</p>
      </div>
    </div>
  </div>
  
  <div class="customer-support">
    <div class="support-content">
      <i class="bi bi-headset"></i>
      <div>
        <strong>¿Necesitas ayuda?</strong>
        <p>Contáctanos por WhatsApp: +56 9 XXXX XXXX</p>
      </div>
    </div>
  </div>
  
  <div class="delivery-info">
    <div class="delivery-item">
      <i class="bi bi-truck"></i>
      <span><strong>Santiago RM:</strong> 1-2 días hábiles</span>
    </div>
    <div class="delivery-item">
      <i class="bi bi-geo-alt"></i>
      <span><strong>Regiones:</strong> 3-5 días hábiles</span>
    </div>
    <div class="delivery-item">
      <i class="bi bi-gift"></i>
      <span><strong>Envío gratis</strong> sobre $30.000</span>
    </div>
  </div>
</div>

<style>
.checkout-trust-elements {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 25px;
  margin: 20px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.trust-header {
  text-align: center;
  margin-bottom: 20px;
}

.trust-header h5 {
  color: #28a745;
  font-weight: 600;
  margin: 0;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 3px solid #28a745;
}

.trust-icon {
  color: #28a745;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.trust-content strong {
  color: #495057;
  font-size: 0.9rem;
  display: block;
  margin-bottom: 2px;
}

.trust-content p {
  color: #6c757d;
  font-size: 0.8rem;
  margin: 0;
}

.customer-support {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 15px;
}

.support-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.support-content i {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.support-content strong {
  display: block;
  margin-bottom: 2px;
}

.support-content p {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.9;
}

.delivery-info {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  padding: 15px;
  background: #e8f5e8;
  border-radius: 8px;
}

.delivery-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #495057;
}

.delivery-item i {
  color: #28a745;
  font-size: 1rem;
}

@media (max-width: 768px) {
  .checkout-trust-elements {
    padding: 20px 15px;
  }
  
  .trust-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .trust-item {
    padding: 12px;
    gap: 10px;
  }
  
  .trust-icon {
    font-size: 1.2rem;
  }
  
  .delivery-info {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  
  .delivery-item {
    justify-content: center;
  }
}
</style>

Pasos para agregar Liquid personalizado en Shopify

Crear snippet: En tu admin de Shopify, ve a Temas → Editar código → Snippets → Agregar nuevo snippet

Nombre del archivo: payment-security.liquid y pega el código de arriba

Ubicar código: En checkout.liquid agrega {% render "payment-security" %} antes del formulario de pago

Personalizar certificados: Agrega tus certificados SSL y sellos de seguridad reales

Probar: Ve al checkout y confirma que se muestran los sellos de seguridad

Tip: La seguridad en el checkout es crucial para reducir abandono de carrito

Mejores Prácticas para Checkout Chile

✅ Elementos Esenciales:

Mostrar RUT de la empresa
Incluir métodos de pago chilenos
Tiempos de entrega realistas
Número de WhatsApp visible
Garantía de devolución clara
Certificados de seguridad

⚠️ Optimizaciones:

Reducir pasos del checkout a máximo 3
Formularios autofill amigables
Mostrar costos totales desde inicio
Opciones de pago en cuotas
Guest checkout disponible
Versión móvil optimizada

📈 Resultados Esperados

-25%
Abandono de checkout

+18%
Valor promedio pedido

+32%
Conversión total

🤖 Generador de Checkout Optimizado Personalizado

¡Genera checkout optimizado único con IA! Describe qué necesitas en tu checkout y obtendrás código personalizado.

Describe tu checkout optimizado ideal:

💡 Ejemplos de instrucciones:

🛒 Upsells: "Productos complementarios con descuento 15%, colores verde"

💰 Descuentos: "Compra 2 lleva 3, barra de progreso azul brillante"

🚚 Envío gratis: "Falta poco para envío gratis, contador animado"

🔒 Confianza: "Badges de seguridad y testimonio, estilo moderno"

¡Código generado exitosamente! Aquí está tu checkout optimizado personalizado:

checkout-optimizado-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

Pega tu código Liquid:

📸 Pasos para agregar Liquid personalizado en Shopify

Ir al tema activo

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

Abrir el editor de plantillas

Haz clic en Personalizar.

Seleccionar la plantilla

Arriba, en el desplegable, selecciona dónde quieres añadir tu Liquid:

Página de inicio
Producto
Colección
Carrito
Etc.

👉 También puedes Crear plantilla nueva si quieres que solo se aplique a un grupo de productos o páginas específicas.

Agregar un bloque Liquid personalizado

En el panel izquierdo, busca la sección donde lo vas a insertar (ejemplo: Información de producto).
Haz clic en Agregar bloque → Liquid personalizado.

Insertar tu código

Se abrirá el editor de bloque con un campo llamado Código de Liquid.
Pega ahí tu código Liquid, HTML o fragmento que quieras aplicar solo en esa sección o producto.

Guardar cambios

Haz clic en Guardar arriba a la derecha.
Revisa en vista previa para confirmar que se muestra solo donde lo agregaste.

✅ Ventaja de este método

No modificas el código original del tema
Todo queda contenido en bloques Liquid personalizados, fáciles de activar/desactivar o mover entre secciones
Ideal para cosas como: timers, botones extras, etiquetas dinámicas, mensajes especiales, etc.

🛠️ Pasos para agregar Liquid personalizado en Shopify

Ir al tema activo

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

Abrir el editor de plantillas

Haz clic en Personalizar.

Seleccionar la plantilla

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

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.

Insertar tu código

Se abrirá el editor de bloque con un campo llamado Código de Liquid.
Pega ahí tu código Liquid, HTML o fragmento que quieras aplicar solo en esa sección o producto.

Guardar cambios

Haz clic en Guardar arriba a la derecha.
Revisa en vista previa para confirmar que se muestra solo donde lo agregaste.

✅ Ventaja de este método

No modificas el código original del tema
Todo queda contenido en bloques Liquid personalizados, fáciles de activar/desactivar o mover entre secciones
Ideal para cosas como: timers, botones extras, etiquetas dinámicas, mensajes especiales, etc.