成功
カート
ナビゲーションにカートアイコンを追加し、デバイスごとに配置と表示を調整します。
このブロックを使用して、メインナビゲーションにカートアイコンを追加し、ヘッダーレイアウトに合わせて配置します。テーマブロックの仕組みの概要については、セクションとブロックに関するShopifyドキュメントをご覧ください。シンプルなヘッダー、分割ナビゲーションのデザイン、カートの配置を画面サイズごとに変える必要があるカスタムモバイル配置に適しています。
これらの設定では、割り当てられたスペース内でカートブロックをどのように配置するかを制御します。ブロックが余白いっぱいに広がっている場合や、独立した全幅の行に移動した場合に、特に目立ちます。
配置の変更がわずかに見える場合は、まずレイアウト設定を確認してください。左、中央、右のようなコンパクトな配置では、配置の違いが目立ちにくくなります。
レイアウト設定
Section titled “レイアウト設定”これらの設定を使って、カートブロックをデスクトップとモバイルのどこに表示するかを決めます。左、中央、右はメインナビゲーション行に表示され、Full-width は下の別の行に移動します。
利用可能なスペースを埋める と、ブロックは残りのデスクトップ行の幅いっぱいに広がります。これは、カート領域でヘッダーの余白を調整したい場合に便利ですが、アイコンがより広い領域内に表示されるため、配置設定の重要性が高まります。
デバイスごとに異なるヘッダー構造にしたい場合は、テーマエディターに関するShopifyドキュメントでデスクトップとモバイルのレイアウトを個別に設定します。たとえば、デスクトップではカートをメイン行にきれいにまとめつつ、モバイルでは専用の行を持たせることができます。追加の配置の詳細については、ナビゲーションのレイアウト設定リファレンスを参照してください。
配置を微調整する前に、レイアウトを選択してください。ヘッダー内でカートブロックがどう見えるかに最も大きく影響するのは配置です。
標準ブロック設定
Section titled “標準ブロック設定”これらの設定は、このブロックのより広いテーマカラーを上書きし、カートアイコンと関連テキストを個別にスタイル設定できます。カートをより強調したい場合や、ヘッダーで独自の色設定を使っている場合に便利です。
ヘッダーの他の要素から浮きすぎないようにしながら、カートを見つけやすく保ちます。アイコンとテキストで異なる色を使う場合は、コントラストを慎重に確認してください。詳細はカラー設定リファレンスを参照してください。
表示コントロールを使って、カートブロックをデスクトップのみに、またはモバイルのみに表示します。これはカスタムのレスポンシブヘッダーに役立ち、特に別のカートへの導線がすでに一方のデバイスサイズに表示されている場合に有効です。
いずれかのデバイスでブロックを非表示にする前に、カートへ明確かつ予測しやすい方法で移動できることを確認してください。詳細は表示設定リファレンスを参照してください。
使用上の注意
Section titled “使用上の注意”- まずレイアウトを設定します。 配置やカラーを調整する前に、デスクトップとモバイルの配置を選択します。
- 全幅は意図して使用します。 ヘッダーが、より縦に重なった、または余裕のあるレイアウトでメリットを得られる場合にのみ、ブロックを独立した行に移動します。
- 慎重に広げます。 カートブロックでデスクトップのヘッダー余白のバランスを取りたい場合に、利用可能なスペースを埋める を有効にします。
- カートへのアクセスを維持します。 このブロックを一方のデバイスサイズで非表示にする場合は、別のカートリンクまたはアイコンがその場所で明確に利用できるようにしてください。
- ヘッダーのコントラストを確認します。 カートが見つけやすいままになるよう、カスタムカラーをヘッダー背景に対してテストします。
- 両方の表示領域を確認します。 デスクトップとモバイルでは動作が異なる場合があるため、各画面サイズで配置、表示、余白を確認します。
- 代替スタイルも考慮します。 デフォルトまたは透明に見える設定は通常ヘッダーになじみ、明確な色を使うとカートが近くの要素からより独立して見えます。