Añadir un bloque personalizado a tu slide cart

Los bloques personalizados te permiten añadir a tu slide cart elementos que aún no están incluidos por defecto — logos de métodos de pago, distintivos de prueba social, temporizadores de cuenta atrás, avisos de envío, iconos USP y mucho más. Escríbelos en HTML y CSS, colócalos en tu slide cart y ubícalos exactamente donde quieras.

Lo que puedes crear

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

Logos de métodos de pago — muestra las tarjetas y carteras aceptadas para generar confianza al pagar
Prueba social — fragmentos de reseñas, valoraciones con estrellas o «X clientes compraron hoy»
Temporizadores de cuenta atrás — 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 slide cart:

Body — aparece junto a los artículos del carrito
Footer — se sitúa cerca del botón de pago

Puedes ajustar el orden exacto dentro de cada área en los ajustes de Layout.

Añadir un bloque personalizado

Abre los ajustes de tu slide cart.
Encuentra el componente Custom block en la sección body o footer.
Pega tu HTML y CSS en el campo de código.
Guarda los cambios.
Arrastra el bloque a la posición que prefieras en Layout settings.

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. 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 siguiendo el interés por un soporte de JavaScript más completo y podríamos añadir un campo 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 estándar de previsualización en la navegación no muestra el bloque mientras la función está desactivada — este enlace dedicado es la única forma de verlo sin exponerlo a los compradores.

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 soportados
Las etiquetas <script> no se procesan — usa atributos de evento inline para JavaScript
Un bloque personalizado por zona (body + footer = dos bloques personalizados en total por slide cart)
El CSS que escribas se aplica dentro del slide cart — mantén los selectores específicos para no afectar a otros elementos del slide cart

Ejemplos que puedes usar

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

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

Un widget de desplazamiento automático que 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 atrás

Los temporizadores de cuenta atrás 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. Señales 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 el soporte — estaremos encantados de orientarte en la dirección correcta.