カスタムブロックを使うと、slide cart にまだ標準で備わっていない要素を追加できます — 決済方法のロゴ、ソーシャルプルーフのバッジ、カウントダウンタイマー、配送に関する案内、USP アイコンなど。HTML と CSS で記述し、slide cart に追加して、好きな場所に配置できます。
作れるもの
カスタムブロックは柔軟なコンテナなので、用途は幅広いです。よく使われるアイデアをいくつか挙げます：
決済方法のロゴ — 対応カードやウォレットを表示し、チェックアウト時の安心感を高める
ソーシャルプルーフ — レビュー抜粋、星評価、「本日◯人が購入」など
カウントダウンタイマー — 送料無料の締切、セール終了の緊急感
信頼マーク — セキュアチェックアウトバッジ、電話サポートウィジェット
配送・返品の案内 — 送料無料の条件、簡単返品の保証
USP アイコン — 自社の強みを視覚的に素早くアピール
プロモーションバナー — キャンペーンメッセージや季節のオファー
カスタムブロックの配置場所
slide cart の 2 つのエリアそれぞれに、1 つずつカスタムブロックを設置できます：
Body — カート内の商品の横に表示されます
Footer — チェックアウトボタンの近くに配置されます
各エリア内の正確な順序は、レイアウト設定で細かく調整できます。
カスタムブロックを追加する
slide cart の設定を開きます。
body または footer セクションで Custom block コンポーネントを見つけます。
HTML と CSS をコードフィールドに貼り付けます。
変更を保存します。
Layout settings でブロックを希望の位置にドラッグします。
JavaScript の使用
カスタムブロックは <script> タグ内のコードは実行しませんが、onclick、onmouseover、onload などのインラインイベント属性を通じて JavaScript をサポートします。簡単なインタラクションには十分です：
<button onclick="alert('$50以上のご注文で送料無料！')" style="background: #000; color: #fff; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;">配送について</button>ライブデータの取得、複雑なステート管理、サードパーティ SDK など、もっと重い処理が必要な場合はぜひお知らせください。より本格的な JavaScript サポートへの関心を追跡しており、マーチャントからの要望に応じて専用の JS フィールドを追加する可能性があります。
公開前のプレビュー
カスタムブロックを保存し、機能をオフにしたまま、専用のプレビューリンクで見た目を確認できます。ナビゲーションの標準プレビューボタンは、機能がオフの間ブロックを表示しません — この専用リンクが、買い物客に見せずにブロックを確認する唯一の方法です。
変更のステージング、チームメンバーからの承認取得、公開前の実機テストに便利です。
知っておくと便利
HTML と CSS は完全にサポートされています
<script>タグは解析されません — JavaScript にはインラインイベント属性を使用してください1 つのゾーンにつき 1 つのカスタムブロック（body + footer = slide cart あたり合計 2 つのカスタムブロック）
書いた CSS は slide cart 内に適用されます — 他の slide cart 要素に影響しないよう、セレクタは具体的にしてください
使えるサンプル
これらのサンプルをそのままコピーして Custom block に貼り付けてご利用いただけます。修正が必要な場合は、コードを任意の LLM（Claude を推奨）に貼り付けて変更を依頼してください。
1. 自動スクロールするレビューカルーセル
レビュー（ハードコード）を表示する自動スクロールウィジェットです — 各レビューに約 3.5 秒間とどまり、滑らかなスライド遷移で切り替わります。CSS のみで JS は使いません。レビューを増やしたり、タイミングを調整したりも可能です。
完全なコードを表示
完全なコードを表示
<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. カウントダウンタイマー
カウントダウンタイマーは、期間限定オファー、フラッシュセール、カート保持メッセージに緊急感を与えます。下の例は 10 分のセッションタイマーです：顧客が slide cart を開くたびに 10:00 から始まり、1 秒ずつ減っていき、ゼロに達すると「オファーは終了しました」というメッセージを表示します。継続時間、メッセージ、色はすべてコード内で簡単に変更できます。
完全なコードを表示
完全なコードを表示
<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. 信頼シグナル
貼り付けてカスタマイズできる完全なサンプルです。3 つの信頼シグナルを表示し、通常はチェックアウトボタンの下に配置します。
完全なコードを表示
完全なコードを表示
<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>
特定のブロックの作成にサポートが必要ですか？サポートまでお気軽にご連絡ください — 適切な方向にご案内します。