今年初めに Candy RackのSlide Cartをリリースして以来、加盟店様から最も多く寄せられたフィードバックは、「素晴らしいけれど、あと一つ追加したいものがある」という声でした。決済方法のアイコン、信頼バッジ、カウントダウンタイマー、スクラッチカードなど、店舗ごとにコンバージョンを高める要素は異なりますが、固定レイアウトのカートでは追加できる数に限りがありました。
カスタムブロックがその答えです。独自のHTMLとCSSをSlide Cartに直接挿入し、カート内アイテムの横やチェックアウトボタンのすぐ隣など、好きな場所に配置できます。Shopifyセクションで記述できる内容であれば、Slide Cartにも組み込むことが可能です。
構築できるもの
カスタムブロックは本質的に柔軟なコンテナであるため、用途は多岐にわたります。先行アクセスで確認された、加盟店様による最も一般的な活用パターンは以下の通りです。
- 決済方法のロゴ：好みの方法で支払える安心感を提示
- 社会的証明：星評価、レビューの抜粋、「本日X人が購入」といったカウンター
- カウントダウンタイマー：送料無料の期限やセール終了までの緊急性を演出
- 信頼マークと安全なチェックアウトバッジ：購入直前の不安を軽減
- スクラッチカード：「削る」ことでミステリー割引を表示
- 配送と返品の通知：送料無料のしきい値や返品保証の明示
- USPアイコン：主要な価値提案を1行に集約
- プロモーションバナー：キャンペーンや季節限定オファーの告知
これは、コンバージョンを重視する店舗が商品ページやカートページですでに活用しているツールボックスを、Slide Cartに持ち込むものです。アップセルを重視する店舗にとって、ここは購入フローの中で最も注目度が高い場所です。
カスタムブロックの配置場所
Slide Cart内の2つのゾーンに、それぞれ1つずつカスタムブロックを配置できます。
- カート内アイテムと並ぶボディゾーン
- チェックアウトボタン付近のフッターゾーン
つまり、1つのSlide Cartにつき最大2つのカスタムブロックを追加可能です。各ゾーン内での正確な位置はレイアウト設定から制御できるため、リワードバーの上や下、商品リストの間、小計の下など、レイアウトに合わせて自由に配置できます。
あえて制限を設けています。2つのブロックがあれば、Slide Cartを広告掲示板のようにすることなく、効果的なマーチャンダイジングが可能です。スクロールしなければチェックアウトボタンが見えない状態では、他の要素は何の意味もなさなくなってしまうからです。
追加方法
設定は非常にシンプルです。
- Candy Rack内のSlide Cart設定を開きます。
- ボディまたはフッターセクションにあるカスタムブロックコンポーネントを見つけます。
- コードフィールドにHTMLとCSSを貼り付けます。
- 変更を保存します。
- レイアウト設定で、ブロックを好みの位置にドラッグします。
カスタムブロックはHTMLとCSSに完全対応しています。記述したCSSはスライドカート内に適用されるため、セレクタは限定的に指定してください。グローバルなbuttonルールを指定すると、他の要素にも影響が及びます。JavaScriptについては制限があり、<script>タグは解析されませんが、onclick、onmouseover、onloadといったインラインイベント属性は動作します。ボタンクリック時のアラート表示、DOMを更新するタイマー、ツールチップを開くクリックハンドラなど、小規模なインタラクションには十分です。fetch呼び出しや複雑な状態管理、サードパーティ製SDKが必要な場合はお問い合わせください。より完全なJSサポートへの関心を把握しており、多くのマーチャントから要望があれば専用フィールドを追加する予定です。
公開前にプレビューを確認
重要なポイントとして、カスタムブロックを保存し、機能をオフにした状態でも、専用のプレビューリンクを使えばカート内での表示を正確に確認できます。通常のプレビューボタンは公開済みのブロックしか表示できないため、この専用リンクは、実際の購入者に公開することなくブロックを準備・確認するための唯一の方法です。
これは、チームメンバーの承認を得たい場合や、公開前に実際のデバイスでテストしたい場合に私たちが使用しているワークフローです。
コードが書けなくても大丈夫。LLMを活用しましょう
多くのお客様は開発者ではありませんが、全く問題ありません。ヘルプセンターで提供している例（自動スクロールするレビューカルーセル、10分間のカウントダウンタイマー、信頼性を高めるバッジ、スクラッチカードなど）はすべてコピー＆ペーストですぐに使えます。また、それらを調整することは、現在のLLMが非常に得意とする小規模なフロントエンドタスクです。スニペットをClaude（またはお好みのAIツール）に貼り付けて変更内容を指示すれば、数秒で動作するHTMLとCSSが手に入ります。それでもうまくいかない場合は、サポートチームがチャットで対応します。
開発の背景
スライドカートの成否は、速度とマーチャンダイジング密度の2点にかかっています。速度は構築上の問題であり、私たちはすでに対処済みです。しかし、マーチャンダイジング密度はストアごとに異なります。信頼バッジが必要なストアもあれば、緊急性や送料無料までのカウントダウン、あるいは迷っている購入者の背中を押すスクラッチカードが必要なストアもあります。カスタムブロックを使えば、私たちが特定のコンポーネントをリリースするのを待つことなく、ご自身でそれらの判断を下すことができます。
この機能は本日よりCandy Rackで利用可能です。すでにスライドカートをご利用の場合は、既存のレイアウト内にカスタムブロックコンポーネントが表示されています。まだスライドカートを試していない場合は、Shopify App StoreからCandy Rackをインストールしてください。スライドカート、リワードバー、カスタムブロックはすべて同じアプリに含まれています。
カートを最大限に活用する方法については、アップセル戦略ガイドおよびShopifyチェックアウトの最適化に関するメモをご覧ください。
