今年初めに Candy Rack の一部としてスライドカートをリリースして以来、マーチャントから最もよく寄せられるフィードバックは、いつも次のような言い方のバリエーションでした。「とても良い。でも、あとひとつだけ付け足したい」。決済方法のロゴ一列、信頼バッジ、カウントダウンタイマー、スクラッチカード——ストアごとに使いたいコンバージョン要素は違い、レイアウトが固定のカートだとそのうちのごくわずかしか取り込めません。
カスタムブロックはその答えです。任意の HTML と CSS をそのままスライドカートに差し込み、カート内のよいと思う位置に配置できます • カート商品の隣でも、チェックアウトボタンの真上でも同じように扱えます。Shopify のセクションと同じ要領で書けるので、そのままスライドカートに持ち込めます。
何を作れるのか
カスタムブロックは、本質的には自由なコンテナです。そのため用途は幅広く、アーリーアクセスで見てきた中でもとくに多いパターンは以下のとおりです：
- 決済方法のロゴ • 買い手に「いつもの手段で支払える」と伝えるために
- ソーシャルプルーフ • 星評価、レビューの一言、「今日 X 人がこの商品を購入」といったカウンター
- カウントダウンタイマー • 送料無料ラインやセール終了の迫りを見せる
- 信頼バッジやセキュア表示 • 購入直前のフリクションを和らげる
- スクラッチカード • 訪問者が「削る」とミステリーな割引コードが現れる
- 送料や返品の案内 • 送料無料の閾値や、手間のかからない返品ポリシー
- USP アイコン • 訴求ポイントを1行に凝縮して見せる
- プロモーションバナー • キャンペーンやシーズン企画の告知
コンバージョン重視のストアがすでに商品ページやカートページで使っている道具箱を、そのままスライドカートに持ち込むイメージです • アップセル中心のストアにとって、スライドカートは購入フローの中でももっとも注意が集まるポイントだからです。
カスタムブロックの配置場所
スライドカート内の2つのゾーンに、それぞれ1つずつカスタムブロックを配置できます：
- ボディー • カート商品の隣
- フッター • チェックアウトボタンの近く
つまり1つのスライドカートに最大2つのカスタムブロックを置けます。各ゾーン内での正確な位置はレイアウト設定から調整でき、リワードバーの上や下、カート商品の間、あるいは小計の下など、レイアウトに応じてドラッグで並べ替えられます • 必要に合わせて柔軟に。
この機能はあえて控えめに設計しています。2つあれば、スライドカートを広告ボードにしてしまうことなく、実質的なマーチャンダイジング要素を付け足せるからです。スクロールしないとチェックアウトボタンが見えないような状態にしてしまえば、他の一切は意味をなくします。
追加の手順
設定はとてもシンプルです：
- Candy Rack でスライドカートの設定を開きます。
- ボディーまたはフッターセクションで、カスタムブロックコンポーネントを見つけます。
- HTML と CSS をコードフィールドに貼り付けます。
- 変更を保存します。
- レイアウト設定で、ブロックを好みの位置にドラッグします。
カスタムブロックは HTML と CSS をそのままサポートします。CSS はスライドカートの中だけで適用されるため、セレクタは具体的に保ってください • グローバルな button ルールを書くと他の要素にまで影響が及ぶことがあります。JavaScript は一部サポートです。<script> タグは実行されませんが、onclick、onmouseover、onload のようなインラインイベント属性は動作します。そのため、ボタンでアラートを出したり、タイマーで DOM を更新したり、クリックでツールチップを開いたり • といった軽めのインタラクションはこれで十分カバーできます。fetch や複雑な状態管理、サードパーティ SDK が必要な場合は、ぜひご連絡ください。要請を追っており、一定数の要望が集まり次第専用の JS フィールドを追加します。
公開前のプレビュー
見落とせないポイントとして、カスタムブロックを保存し、機能を オフのままにしておいても、専用のプレビューリンクでスライドカートでの見た目をそのまま確認できます。通常のプレビューボタンでは有効になっているブロックしか表示されないため • このリンクが、実際の購入者には見せずにブロックをレビューする唯一の手段となります。
社内でチームの確認を取りたいときや、実機でテストしてから公開したいときに、われわれ自身もこの手順を使っています。
コードを書かない方へ：エージェントに任せる
われわれのクライアントの多くは開発者ではなく、それで全く問題ありません。ヘルプセンターで提供している例 • 自動スクロールするレビューカルーセル、１０分のカウントダウン、信頼シグナルの並び、スクラッチカード • はそのまま貼り付けて使える状態で提供しており、部分的な調整は今の LLM が得意とする小さなフロントエンドの仕事です。スニペットを Claude（あるいはお好みのアシスタント）に渡し、したい変更を伝えれば、動く HTML と CSS が数秒で返ってきます。それでもうまくいかないときは、サポートチャットにご連絡ください。
なぜこの機能を作ったのか
スライドカートの勝負は大きく2つ、高速さとマーチャンダイジングの密度です。高速さは実装上の課題で、これはすでにクリアしました • 一方、マーチャンダイジングの密度はストアごとに不可欠な要素が全く違います • 信頼バッジが要るストアもあれば、緊急感が要るところ、送料無料カウントダウンが効くところ、あるいは迷っている買い手の背中を押すスクラッチカードが要るところもあります。カスタムブロックによって、われわれがコンポーネントを作るのを待たずに、そうした判断をストア側ですぐに下せるようになりました。
この機能は Candy Rack ですぐにご利用いただけます。すでにスライドカートをご利用中の方は、既存のレイアウトにカスタムブロックコンポーネントが追加されています。まだスライドカートを試していない方は、Shopify アプリストアから Candy Rack をインストールしてください • スライドカート、リワードバー、カスタムブロックはすべて同じアプリに含まれています。
カート自体をもっと活用したい方は、アップセル戦略ガイドや、Shopify チェックアウトの最適化に関するメモもあわせてご覧ください。
