成功
商品カード設定
テーマ全体で商品カードのレイアウト、メディア、アクション、スウォッチのグローバルデフォルトを設定します。
これらの設定は、テーマ全体にわたる商品カードの既定の外観と動作を定義します。商品グリッド、一覧、その他のカードベースの商品表示で一貫した閲覧体験を作成するために使用し、特定のテンプレートで別の方法が必要な場合のみ上書きしてください。テーマレベルの設定について詳しくは、テーマのカスタマイズに関するShopifyドキュメントを参照してください。
グローバルなカードレイアウト
Section titled “グローバルなカードレイアウト”ここから始めて、商品カード全体の構造を調整します。カードスタイル、画像比率、テキスト表示、配置、ボタンの扱いが組み合わさって、商品一覧がどれだけ視覚的で、コンパクトで、情報量が多く見えるかが決まります。
デスクトップとモバイルで別々の画像比率を使うと、画面サイズが異なってもカードのバランスを保てます。商品写真が一定でない場合は、比率を統一するとグリッドがより整って見え、見やすくなります。
テキスト設定では、顧客が商品を開く前にどれだけの情報を表示するかを制御します。タイトルと抜粋の両方を表示すると発見を促しやすく、タイトルのみのレイアウトは、より密度の高いグリッドや視覚要素の多いカタログでうまく機能することが多いです。
バナースタイルのカードは常に1枚の画像を表示するため、スライドショー設定は適用されません。中央の縦方向のテキスト配置も、バナースタイルでのみ機能します。
商品詳細とアクション
Section titled “商品詳細とアクション”これらのコントロールでは、価格、販売元、バッジ、クイック追加アクション、バリエーション選択など、カードに表示する主要な商品詳細を決めます。カード上でどこまで購入を完結させるか、商品ページに進めるかを判断するために使用します。
クイック追加は、顧客がグリッド上で安心して購入できる場合に最も効果的です。バリエーション選択が有効で商品が利用可能な場合、カードはより直接的なカート追加フローを支援できます。そうでない場合、アクションは代わりに顧客を商品ページ全体へ誘導することがあります。
コレクションバッジは、選択した商品を軽量な販促ラベルで強調できます。これは、プロモーション、厳選した編集、または顧客にすばやく気づいてほしい商品グループに適しています。
ホバーメディアを使うと、デスクトップでカーソルを重ねたときに商品カードに別のアセットを表示できます。これは、別角度、詳細ビュー、または補足的なビジュアルを、カードにテキストを追加せずに示すのに便利です。
ギャラリーの位置を自動で選ぶことも、各商品のホバー用アセットをより細かく制御したい場合はメタフィールドを指定することもできます。メタフィールドベースの設定は、理想的なホバー画像がカタログ全体で常に同じ位置にあるとは限らない場合に特に役立ちます。
商品カードの画像スタイルがスライドショーに設定されている場合、ホバーメディアは機能しません。
スライドショー設定
Section titled “スライドショー設定”スライドショー形式の商品カードを使用する場合、このサブグループではデスクトップとモバイルでのギャラリーの動作を制御します。表示するスライド数、アニメーションスタイル、速度、自動再生、ループ、カード上のナビゲーションやページネーションを調整できます。
スライドショーは、複数の商品画像がグリッドからの商品比較や評価に役立つ場合に最も適しています。よりシンプルなカタログでは、1枚画像の設定のほうが見やすく、商品一覧全体により注意を向けやすくなります。
フェードアニメーションはよりシンプルな表示になりますが、単一スライドのレイアウトに固定され、ページネーションは表示されません。スライド数とナビゲーションのフィードバックが重要な場合は、フェード以外のアニメーションスタイルを選択してください。
カラースウォッチ設定
Section titled “カラースウォッチ設定”カラースウォッチを使うと、顧客は商品カード上で直接バリエーションを確認できます。色が主要な閲覧判断要素であり、オプション名が商品間で一貫している場合に最も効果的です。
スウォッチを表示するバリエーションオプションには、オプション値ではなくオプション名を入力してください。命名が一貫していない場合、スウォッチは一部の商品にのみ表示されるか、まったく表示されないことがあります。
カスタムカラー定義は、色名が標準的な名前を超えている場合や、スウォッチの見え方をより細かく制御したい場合に役立ちます。
画像スウォッチ設定
Section titled “画像スウォッチ設定”画像スウォッチは、単色のチップをバリエーションに関連付けられたサムネイルに置き換えます。バリエーションの違いを、柄、質感、仕上げ、小さな商品画像で示したほうがよい場合に適した選択です。
表示するには、各関連バリエーションオプションに対応する画像が必要です。一部のバリエーションに画像がない場合、スウォッチが不完全に見えることがあります。
同じオプション命名パターンに対して画像スウォッチとカラースウォッチの両方が設定されている場合、画像スウォッチが優先されます。ほとんどの場合、各バリエーションタイプごとに主要なスウォッチ方法を1つ選ぶほうが適しています。
スウォッチ枠線設定
Section titled “スウォッチ枠線設定”スウォッチ枠線のコントロールを使うと、カラースウォッチと画像スウォッチをさまざまな背景や画像の上でも見やすく保てます。特に、明るいスウォッチ、コントラストの低いカードデザイン、または控えめなインターフェーススタイルのテーマで役立ちます。
枠線色を空欄にすると、テーマは代わりにプライマリボタンの枠線色を使用します。アクティブなバリエーションは常に見える選択状態を保持するため、顧客は現在どのオプションが選択されているかを確認できます。
使用上の注意
Section titled “使用上の注意”- 例外を作る前に既定値を設定します。 まずここで強固なグローバル商品カードスタイルを作成し、特定のレイアウトで本当に別の動作が必要な場合のみテンプレートレベルの上書きを使用してください。テーマの各領域の構成については、セクションとブロックに関するShopifyドキュメントを参照してください。
- メディアパターンは1つに絞ります。 すばやく見分けたい場合は単一画像、短く2枚目を見せたい場合はホバーメディア、複数のカードレベル画像が閲覧の助けになる場合はスライドショーを使用します。
- 両方のブレークポイントを確認します。 デスクトップとモバイルのカードは異なる動作をすることがあるため、公開前に両方の画面サイズで画像比率、配置、ナビゲーション、メディアの表示可否を確認してください。
- フォールバックのスタイルを明確に保ちます。 空欄または既定スタイルの値は、通常テーマの組み込みの見た目を維持します。一方、明示的な色、グラデーション、またはメディアの上書きは、商品カード領域をより独立した印象にします。
- 機能の相互作用に注意します。 バナーカードはスライドショーを使用せず、スライドショーカードはホバーメディアをサポートせず、画像スウォッチは同じオプションを対象にする場合にカラースウォッチを上書きします。