Ajouter un bloc personnalisé à votre slide cart

Les blocs personnalisés vous permettent d'ajouter à votre slide cart des éléments qui ne sont pas déjà intégrés — logos de moyens de paiement, badges de preuve sociale, minuteries de compte à rebours, mentions de livraison, icônes USP, et plus encore. Écrivez-les en HTML et CSS, déposez-les dans votre slide cart et positionnez-les exactement où vous le souhaitez.

Ce que vous pouvez créer

Un bloc personnalisé est un conteneur flexible, donc les cas d'usage sont nombreux. Quelques idées populaires :

Logos de moyens de paiement — affichez les cartes et portefeuilles acceptés pour rassurer au moment du paiement
Preuve sociale — extraits d'avis, notes en étoiles ou « X clients ont acheté aujourd'hui »
Minuteries de compte à rebours — date limite pour la livraison gratuite, urgence de fin de soldes
Marques de confiance — badges de paiement sécurisé, widget d'assistance téléphonique
Mentions livraison & retours — seuils de livraison gratuite, garantie de retour facile
Icônes USP — rappels visuels rapides de vos arguments de vente clés
Bannières promotionnelles — messages de campagne ou offres saisonnières

Où vivent les blocs personnalisés

Vous disposez d'un bloc personnalisé pour chacune des deux zones du slide cart :

Body — apparaît à côté des articles du panier
Footer — se trouve près du bouton de paiement

Vous pouvez ajuster l'ordre exact dans chaque zone via les paramètres Layout.

Ajouter un bloc personnalisé

Ouvrez les paramètres de votre slide cart.
Repérez le composant Custom block dans la section body ou footer.
Collez votre HTML et CSS dans le champ de code.
Enregistrez vos modifications.
Glissez le bloc à l'emplacement souhaité dans Layout settings.

Utiliser JavaScript

Les blocs personnalisés n'exécutent pas le code à l'intérieur des balises <script>, mais ils prennent en charge JavaScript via des attributs d'événement inline comme onclick, onmouseover ou onload. C'est suffisant pour beaucoup de petites interactions :

<button onclick="alert('Livraison gratuite à partir de $50 !')"    style="background: #000; color: #fff; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;">Infos livraison</button>

Si votre cas d'usage nécessite quelque chose de plus lourd — récupération de données en direct, état complexe, SDK tiers — faites-le-nous savoir. Nous suivons l'intérêt pour un support JavaScript plus complet et pourrions ajouter un champ JS dédié selon les demandes des marchands.

Prévisualiser avant la mise en ligne

Vous pouvez enregistrer un bloc personnalisé, garder la fonctionnalité désactivée et tout de même prévisualiser son rendu via un lien de prévisualisation spécial. Le bouton de prévisualisation standard dans la navigation n'affiche pas le bloc tant que la fonctionnalité est désactivée — ce lien dédié est le seul moyen de le voir sans l'exposer aux acheteurs.

C'est utile pour préparer des modifications, obtenir l'approbation de collègues ou tester sur de vrais appareils avant la mise en ligne.

Bon à savoir

HTML et CSS sont entièrement pris en charge
Les balises <script> ne sont pas analysées — utilisez les attributs d'événement inline pour JavaScript
Un bloc personnalisé par zone (body + footer = deux blocs personnalisés au total par slide cart)
Le CSS que vous écrivez s'applique à l'intérieur du slide cart — gardez vos sélecteurs spécifiques pour ne pas affecter les autres éléments du slide cart

Exemples à utiliser

N'hésitez pas à copier-coller ces exemples dans votre Custom block. Si vous avez besoin de modifications, collez simplement le code dans n'importe quel LLM (nous recommandons Claude) et demandez les changements.

1. Carrousel d'avis à défilement automatique

Un widget à défilement automatique affichant des avis (codés en dur) — il marque une pause d'environ 3,5 secondes sur chacun, avec des transitions fluides entre eux. Pur CSS, aucun JS. Vous pouvez ajouter d'autres avis, ajuster le timing, etc.

Afficher le code complet

<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. Minuterie de compte à rebours

Les minuteries de compte à rebours créent un sentiment d'urgence pour les offres à durée limitée, les ventes flash et les messages de panier réservé. L'exemple ci-dessous est une minuterie de session de 10 minutes : elle démarre à 10:00 chaque fois qu'un client ouvre le slide cart, décompte seconde par seconde et affiche un message « Offre expirée » lorsqu'elle atteint zéro. La durée, le message et les couleurs sont tous faciles à modifier dans le code.

Afficher le code complet

<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. Signaux de confiance

Un exemple complet que vous pouvez coller et personnaliser. Il affiche trois signaux de confiance, généralement placés sous le bouton de paiement.

Afficher le code complet

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

Besoin d'aide pour créer un bloc spécifique ? Contactez le support — nous serons ravis de vous orienter dans la bonne direction.