成功
カート
カートページのレイアウト、スタイル、追加コンテンツを調整して、わかりやすく、ブランドに合い、使いやすくします。
このセクションでは、商品が追加されているときはカート商品を表示し、カートが空のときは空カートのメッセージに切り替わります。これを使って、カートページのスタイルとレイアウトを調整し、購入導線を支える場合にアプリ対応のコンテンツやカスタムコンテンツを追加します。
このカラーコントロールを使うと、より広いテーマカラーを変更せずにカートページのスタイルを上書きできます。コントラストを改善したり、商品行をより明確に区切ったり、見出しや補足ラベルを見やすくしたりする場合に特に便利です。
まずテキストとアイコンの色を読みやすくし、次にサブ見出しと枠線の色をより控えめに使って構造を整えます。カートのような実用性重視のページでは、大きな色変更よりも小さな調整のほうが通常は効果的です。
カスタム背景やオーバーレイを追加した場合は、商品詳細、合計、アクションのコントラストを再確認して、カートを使いやすい状態に保ってください。
対応ブロックタイプ
Section titled “対応ブロックタイプ”- App
- Custom liquid
App ブロックを使うと、インストール済みのアプリがカートセクション内に機能やメッセージを配置できます。カートの内容に近い場所に置くべき、インセンティブ、通知、その他のツールなど、カート関連の追加に使用します。エディターでのブロックの動作については、セクションとブロックに関するShopifyドキュメント を参照してください。
配置は慎重に選んでください。追加ブロックが多すぎると、カートが長く感じられ、商品確認や次の操作から注意がそれます。
カスタム liquid
Section titled “カスタム liquid”カスタム liquid は、カートセクション内に高度なカスタムコンテンツを追加します。
柔軟なメッセージ、アプリのスニペット、または組み込みのカート設定では対応していないその他のカスタム出力が必要な場合に使用します。このブロックには独自の表示設定もあり、補足コンテンツをモバイルのみに表示したい場合やデスクトップのみに表示したい場合に便利です。
標準セクション設定
Section titled “標準セクション設定”余白設定 は、デスクトップとモバイルでカートコンテンツの上下の余白を調整します。ページにより開放感を持たせたいときや、カートにすでに長めのメッセージや追加ブロックがあるときに余分な余白を減らしたいときに使います。
モバイル用の個別余白は特に便利です。カートページはすぐに長くなるためです。小さい画面で縦方向の余白を詰めると、デスクトップの表示を変えずに、ページをより効率的に見せられます。
セクション背景設定
Section titled “セクション背景設定”セクション背景設定 を使うと、カートセクションに背景色、グラデーション、画像、動画、オーバーレイを追加できます。カートページをよりブランドらしく見せつつ、コンテンツの読みやすさを保ちたい場合に最適です。
グラデーションの選択は単色の選択を上書きし、オーバーレイのグラデーションはオーバーレイの色を上書きします。デスクトップ用とは別のモバイル背景メディアも設定でき、デスクトップの画像が小さい画面ではうまく切り抜かれない場合に役立ちます。
区切り線設定
Section titled “区切り線設定”区切り線設定 は、カートセクションの上または下に任意の線を追加します。カートを近くのコンテンツからより明確に視覚的に区切りたい場合に便利です。
区切り線の色を透明のままにすると、セクションはテーマの枠線色にフォールバックします。これは、カートをデザイン全体と一致させる最も簡単な方法であることがよくあります。
幅設定 は、カートコンテンツの最大幅とセクションラッパーの幅の両方を調整します。これにより、カートをコンパクトにして読みやすくしたり、より広いページスタイルと組み合わせて余裕のある印象にしたりできます。
多くのストアでは、中程度のコンテンツ幅にすると、商品行、価格、コントロールを見やすく保てます。ラッパー幅が特に重要になるのは背景を使う場合で、その視覚的な表現がページ全体のどこまで広がるかが変わるためです。
使用上の注意
Section titled “使用上の注意”- カートを見やすく保つ。 商品詳細と合計をひと目で読めるように、テキスト、アイコン、枠線のコントラストを明確にすることを優先します。
- 追加ブロックは控えめに使う。 アプリやカスタムコンテンツは、基本のカート操作と競合するのではなく、カートの導線を支える場合にのみ追加します。
- モバイルは個別に調整する。 モバイルの余白、表示、背景メディアを確認し、カートが長くなりすぎたり、視覚的に詰まりすぎたりしないようにします。
- 幅は慎重に選ぶ。 バランスの取れたコンテンツ幅は、窮屈なカートや詳細がページ全体に広がりすぎるカートよりも、たいてい使いやすく感じられます。
- カートの両状態を確認する。 商品が入っている状態と、カートが空の状態の両方でセクションをプレビューし、スタイルと余白がどちらの場合も整って見えるか確認します。
- デスクトップとモバイルの動作を確認する。 特に背景を変えたり、片方の画面サイズでコンテンツを非表示にしたりする場合は、両方の表示領域で配置、表示、メディアの切り抜きを比較します。
- フォームのフィードバックを読みやすく保つ。 顧客がカートコントロールを操作したときに、数量変更、検証メッセージ、空状態や成功状態を読みやすく表示できるようにします。
- 商品コンテキストを踏まえて確認する。 バリアント、数量、在庫状況を変更した後は、表示されるアクションと商品詳細が引き続き適切かどうか、カートを再確認します。