Añade un bloque personalizado a tu carrito deslizante

Los bloques personalizados te permiten añadir al carrito deslizante elementos que no vienen incluidos por defecto: logos de métodos de pago, sellos de confianza, temporizadores de cuenta regresiva, avisos de envío, íconos y mucho más. Solo escribe el HTML y el CSS, los colocas en el carrito deslizante y decides exactamente dónde aparecen.

Lo que puedes crear

Un bloque personalizado es un contenedor flexible, así que los casos de uso son muy variados. Algunas ideas populares son:

Logos de métodos de pago — muestra las tarjetas y carteras aceptadas para generar confianza al pagar
Validación social — fragmentos de reseñas, valoraciones con estrellas o «X clientes compraron hoy»
Temporizadores de cuenta regresiva— fecha límite de envío gratis, urgencia de fin de rebajas
Sellos de confianza — distintivos de pago seguro, widget de soporte telefónico
Avisos de envío y devoluciones — umbrales para envío gratis, garantía de devolución sencilla
Iconos USP — recordatorios visuales rápidos de tus principales argumentos de venta
Banners promocionales — mensajes de campaña u ofertas de temporada

Dónde se ubican los bloques personalizados

Tienes un bloque personalizado disponible para cada una de las dos áreas del carrito deslizante:

Cuerpo— aparece junto a los artículos del carrito
Pie de página — se sitúa cerca del botón de pago

Puedes ajustar el orden de cada bloque dentro de su área en la opción de diseño.

Añadir un bloque personalizado

Abre los ajustes de tu carrito deslizante.
Encuentra la opción de Bloque personalizado en la sección cuerpo o pie de página.
Pega tu HTML y CSS en el campo de código.
Guarda los cambios.
Arrastra el bloque a la posición que prefieras en la opción de diseño.

Usar JavaScript

Los bloques personalizados no ejecutan código dentro de las etiquetas <script>, pero sí admiten JavaScript a través de atributos de evento inline como onclick, onmouseover u onload. Este es suficiente para muchas interacciones pequeñas:

<button onclick="alert('¡Envío gratis en pedidos superiores a $50!')"    style="background: #000; color: #fff; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;">Información de envío</button>

Si tu caso de uso necesita algo más pesado, obtener datos en vivo, estados complejos, SDK de terceros, háznoslo saber. Estamos monitoreando el interés por un soporte de JavaScript más completo y podríamos añadir un campo de JS dedicado según lo que pidan los comerciantes.

Previsualizar antes de publicar

Puedes guardar un bloque personalizado, mantener la función desactivada y aun así previsualizar cómo se ve mediante un enlace de previsualización especial. El botón de previsualización no muestra el bloque mientras esté desactivado; esta es la única forma de verlo sin exponerlo a los compradores.

Esto es útil para preparar cambios, conseguir la aprobación de tus compañeros o probar en dispositivos reales antes de publicar.

Bueno saber

HTML y CSS están totalmente integrados
Las etiquetas <script> no se procesan, usa atributos de evento inline para JavaScript
Un bloque personalizado por zona (cuerpo + pie de página = dos bloques personalizados en total por carrito deslizante)
El CSS que escribas se aplica dentro del carrito deslizante. Escribe selectores específicos para no afectar a otros elementos del carrito.

Ejemplos que puedes usar

Siéntete libre de copiar y pegar estos ejemplos en tus bloques personalizados. Si necesitas alguna modificación, simplemente pega el código en cualquier LLM (recomendamos Claude) y pide los cambios que necesites.

1. Carrusel de reseñas con desplazamiento automático

Un widget que se desplaza automáticamente y muestra reseñas (codificadas), hace una pausa de unos 3,5 segundos en cada una, con transiciones suaves entre ellas. CSS puro, sin JS. Puedes añadir más reseñas, ajustar los tiempos, etc.

Ver código completo

<div class="reviews-widget">
  <div class="reviews-summary">
    <span class="reviews-stars">★★★★★</span>
    <span class="reviews-meta">4.9 · 2,500+ reviews</span>
  </div>

  <div class="reviews-slider-wrapper">
    <div class="reviews-track">
      <div class="review-slide">
        <p class="review-text">"Absolutely love this product! Best purchase I've made all year."</p>
        <span class="review-author">Sarah M. · Verified buyer</span>
      </div>
      <div class="review-slide">
        <p class="review-text">"Quality is amazing and shipping was fast. Highly recommend!"</p>
        <span class="review-author">David K. · Verified buyer</span>
      </div>
      <div class="review-slide">
        <p class="review-text">"Customer service was incredible. Will definitely buy again."</p>
        <span class="review-author">Emma R. · Verified buyer</span>
      </div>
    </div>
  </div>
</div>

<style>
  .reviews-widget {
    padding: 16px 14px;
    background: #f7fafc;
    margin: 0;
  }
  .reviews-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
  }
  .reviews-stars {
    color: #f6ad37;
    font-size: 15px;
    letter-spacing: 1px;
  }
  .reviews-meta {
    font-size: 12px;
    color: #4a5568;
    font-weight: 600;
  }
  .reviews-slider-wrapper {
    overflow: hidden;
    position: relative;
  }
  .reviews-track {
    display: flex;
    width: 300%;
    animation: review-slide 12s infinite ease-in-out;
  }
  .review-slide {
    flex: 0 0 33.333%;
    padding: 0 8px;
    text-align: center;
    box-sizing: border-box;
  }
  .review-text {
    font-size: 13px;
    color: #2d3748;
    margin: 0 0 6px;
    line-height: 1.4;
    font-style: italic;
  }
  .review-author {
    font-size: 11px;
    color: #718096;
  }
  @keyframes review-slide {
    0%, 28%   { transform: translateX(0); }
    33%, 61%  { transform: translateX(-33.333%); }
    66%, 94%  { transform: translateX(-66.666%); }
    100%      { transform: translateX(0); }
  }
</style>

2. Temporizador de cuenta regresiva

Los temporizadores de cuenta regresiva añaden urgencia a las ofertas por tiempo limitado, las ventas flash y los mensajes de carrito reservado. El ejemplo de abajo es un temporizador de sesión de 10 minutos: empieza en 10:00 cada vez que un cliente abre el slide cart, baja segundo a segundo y muestra un mensaje «Oferta caducada» cuando llega a cero. La duración, el mensaje y los colores se pueden cambiar fácilmente en el código.

Ver código completo

<div class="countdown-widget">
  <div class="countdown-text">
    <div class="countdown-title">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M12 2.25a9.75 9.75 0 1 0 0 19.5 9.75 9.75 0 0 0 0-19.5ZM12.75 6a.75.75 0 0 0-1.5 0v6c0 .2.08.39.22.53l4 4a.75.75 0 1 0 1.06-1.06l-3.78-3.78V6Z" clip-rule="evenodd"/>
      </svg>
      <span>Hurry — limited offer</span>
    </div>
    <div class="countdown-subtitle">Reserved in your cart for</div>
  </div>
  <div class="countdown-display">
    <div class="cd-block"><span id="cd-m">10</span><small>min</small></div>
    <div class="cd-sep">:</div>
    <div class="cd-block"><span id="cd-s">00</span><small>sec</small></div>
  </div>
  <img src="x" style="display:none" onerror="this.remove();(function(){var endTime=Date.now()+(10*60*1000);function update(){var diff=endTime-Date.now();if(diff<=0){var w=document.querySelector('.countdown-widget');if(w){w.textContent='Offer expired';w.style.padding='14px';w.style.textAlign='center';w.style.color='#718096';w.style.display='block';}return;}var pad=function(n){return String(n).padStart(2,'0');};var m=Math.floor(diff/60000),s=Math.floor((diff%60000)/1000);var dm=document.getElementById('cd-m');var ds=document.getElementById('cd-s');if(dm)dm.textContent=pad(m);if(ds)ds.textContent=pad(s);}if(window.__cdInt)clearInterval(window.__cdInt);update();window.__cdInt=setInterval(update,1000);})();">
</div>

<style>
  .countdown-widget {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    background: #fff5f5;
    margin: 0;
  }
  .countdown-text {
    flex: 1;
    min-width: 0;
  }
  .countdown-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #c53030;
    margin-bottom: 2px;
  }
  .countdown-subtitle {
    font-size: 11px;
    color: #718096;
  }
  .countdown-display {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-shrink: 0;
  }
  .cd-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 32px;
  }
  .cd-block span {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: #2d3748;
    font-variant-numeric: tabular-nums;
  }
  .cd-block small {
    font-size: 9px;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
  }
  .cd-sep {
    color: #2d3748;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    padding: 0 2px;
  }
</style>

3. Sellos de confianza

Un ejemplo completo que puedes pegar y personalizar. Muestra tres señales de confianza que normalmente se colocan debajo del botón de pago.

Ver código completo

<div class="trust-footer">
  <div class="trust-item">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd" d="M12 1.5a5.25 5.25 0 0 0-5.25 5.25v3a3 3 0 0 0-3 3v6.75a3 3 0 0 0 3 3h10.5a3 3 0 0 0 3-3v-6.75a3 3 0 0 0-3-3v-3c0-2.9-2.35-5.25-5.25-5.25Zm3.75 8.25v-3a3.75 3.75 0 1 0-7.5 0v3h7.5Z" clip-rule="evenodd"/>
    </svg>
    <span class="trust-title">Secure checkout</span>
    <span class="trust-subtitle">256-bit SSL</span>
  </div>

  <div class="trust-item">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M4.5 6.375a4.125 4.125 0 1 1 8.25 0 4.125 4.125 0 0 1-8.25 0ZM14.25 8.625a3.375 3.375 0 1 1 6.75 0 3.375 3.375 0 0 1-6.75 0ZM1.5 19.125a7.125 7.125 0 0 1 14.25 0v.003l-.001.119a.75.75 0 0 1-.363.63 13.067 13.067 0 0 1-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 0 1-.364-.63l-.001-.122ZM17.25 19.128l-.001.144a2.25 2.25 0 0 1-.233.96 10.088 10.088 0 0 0 5.06-1.01.75.75 0 0 0 .42-.643 4.875 4.875 0 0 0-6.957-4.611 8.586 8.586 0 0 1 1.71 5.157v.003Z"/>
    </svg>
    <span class="trust-title">50,000+ customers</span>
    <span class="trust-subtitle">Join the community</span>
  </div>

  <div class="trust-item">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M1.5 4.5a3 3 0 0 1 3-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 0 1-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 0 0 6.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 0 1 1.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 0 1-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5Z"/>
    </svg>
    <span class="trust-title">Need help?</span>
    <span class="trust-subtitle">(555) 123-4567</span>
  </div>
</div>

<style>
  .trust-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 14px;
    background: #f7fafc;
    border-radius: 8px;
    margin: 8px 0;
  }
  .trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    gap: 4px;
  }
  .trust-item svg {
    color: #2d8659;
  }
  .trust-title {
    font-size: 12px;
    font-weight: 600;
    color: #2d3748;
    line-height: 1.2;
  }
  .trust-subtitle {
    font-size: 11px;
    color: #718096;
    line-height: 1.2;
  }
</style>

¿Necesitas ayuda para crear un bloque concreto? Contacta con soporte y te orientamos en la dirección correcta.