Custom blocks let you add elements to your slide cart that aren't already built in — payment method logos, social proof badges, countdown timers, shipping notices, USP icons, and more. Write them in HTML and CSS, drop them into your slide cart, and position them exactly where you want.
What you can build
A custom block is a flexible container, so the use cases are broad. A few popular ideas:
Payment method logos — show accepted cards and wallets to build checkout confidence
Social proof — review snippets, star ratings, or "X customers bought this today"
Countdown timers — free shipping cutoff, end-of-sale urgency
Trust marks — secure checkout badges, phone support widget
Shipping & returns notices — free shipping thresholds, easy returns guarantee
USP icons — quick visual reminders of your key selling points
Promotional banners — campaign messages or seasonal offers
Where custom blocks live
You get one custom block for each of two slide cart areas:
Body — appears alongside your cart items
Footer — sits near the checkout button
You can fine-tune the exact order within each area in Layout settings.
Add a custom block
Open your slide cart settings.
Find the Custom block component in either the body or footer section.
Paste your HTML and CSS into the code field.
Save your changes.
Drag the block to your preferred spot in Layout settings.
Using JavaScript
Custom blocks don't execute code inside <script> tags, but they do support JavaScript through inline event attributes like onclick, onmouseover, or onload. That's enough for many small interactions:
html
<button onclick="alert('Free shipping on orders over $50!')" style="background: #000; color: #fff; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;">Shipping info</button>If your use case needs something heavier — fetching live data, complex state, third-party SDKs — let us know. We're tracking interest in fuller JavaScript support and may add a dedicated JS field based on what merchants ask for.
Preview before going live
You can save a custom block, keep the feature turned off, and still preview how it looks using a special preview link. The standard preview button in the navigation won't show the block while the feature is off — this dedicated link is the only way to see it without exposing it to shoppers.
This is useful for staging changes, getting approval from teammates, or testing on real devices before going live.
Good to know
HTML and CSS are fully supported
<script>tags are not parsed — use inline event attributes for JavaScriptOne custom block per zone (body + footer = two custom blocks total per slide cart)
CSS you write applies inside the slide cart — keep selectors specific to avoid affecting other slide cart elements
Examples you can use
Feel free to copy and paste these examples into your Custom block. If you need any modification, just paste the code to any LLM (we recommend Claude) and ask for changes.
1. Auto-scrolling reviews carousel
Here's an auto-scrolling widget showing reviews (hard-coded) pauses for ~3.5 seconds on each, smooth slide transitions between them. Pure CSS, no JS. You can add more views, adjust timing, etc.
Display full code
Display full code
<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. Countdown timer
Countdown timers add urgency to limited-time offers, flash sales, and reserved-cart messaging. The example below is a 10-minute session timer: it starts at 10:00 each time a customer opens the slide cart, ticks down second by second, and shows an "Offer expired" message when it reaches zero. The duration, message, and colors are all easy to change in the code.
Display full code
Display full code
<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. Trust signals
Here's a complete example you can paste in and customise. It shows three trust signals, which are typically displayed below the checkout button.
Display full code
Display full code
<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>
Need help building a specific block? Reach out to support — we're happy to point you in the right direction.