成功
商品カード設定
商品カードのスタイル、画像、テキスト、ボタン、スウォッチを微調整して、よりすっきりした商品グリッドにします。
この設定を使用して、共有カードパターンが使われるあらゆる場所で商品カードの表示を微調整します。カードをテーマ全体のデフォルトに合わせたままにすることも、特定の商品一覧で別の表示が必要な場合に上書きすることもできます。これらの設定がテーマエディターのどこに当てはまるかについての詳細は、テーマエディターに関するShopifyドキュメント を参照してください。
このグループでは、商品カードの全体的な見た目と情報量を制御します。すべてのカード関連設定を一括で変更せずに、商品一覧の見た目をより視覚的にするか、コンパクトにするか、アクション重視にするかを調整したい場合に特に便利です。これらのコントロールがテーマコンポーネントとどう関係するかについての詳しい背景は、セクションとブロックに関するShopifyドキュメント を参照してください。
カード設定のリファレンスページには、これらの上書きがテーマ全体の挙動とどう関係するかについての追加ガイダンスがあります: 商品カード設定
カードスタイル
Section titled “カードスタイル”カードスタイルは、各商品カードの構造と余白を変更します。コレクションや商品画像の品質に応じて、より編集的に、よりコンパクトに、またはより実用的にカードを見せるために使用します。
より構造的で余白のあるスタイルは、商品写真のフレーミングや背景が揃っていない場合に、通常最も適しています。より詰まったスタイルは1行に多くの商品を配置できますが、不一致も目立ちやすくなります。
商品画像のトリミングが一貫していない場合は、商品グリッドを意図的に見せるために、より視覚的な構造または余白のあるスタイルを選んでください。
画像のアスペクト比
Section titled “画像のアスペクト比”デスクトップ用とモバイル用で別々の画像比率を選択できます。1つのトリミングでは両方の画面サイズにうまく対応できない場合に便利です。固定比率は、特にカタログにさまざまな画像形状が混在している場合、通常、よりすっきりして一貫したグリッドを作成します。
横長の比率はより編集的に感じられ、正方形や縦長の比率は商品一覧を見やすくすることが多いです。写真がすでに丁寧に用意されている場合は、デフォルトまたはテーマレベルの比率を使用することで、意図したフレーミングをよりよく保てることがあります。
ボタンスタイル
Section titled “ボタンスタイル”この設定では、商品カードのアクションをどの程度目立たせるかを制御します。よりすっきりした閲覧体験にしたい場合は非表示にし、顧客により明確なアクションの手がかりが必要な場合はテキストベースのスタイルを使用します。
コンパクトなボタンスタイルは、密度の高いグリッドを整然と保つのに役立ちます。モバイルではアクションがアイコンのみのスタイルになるため、ラベルが表示されなくてもカードが明確で使いやすく感じられるか確認してください。
カードテキスト
Section titled “カードテキスト”カードテキストは、各カードに表示される商品情報の文章量を制御します。テキストを増やすと商品をすばやく説明しやすくなり、減らすとよりすっきりした画像中心のレイアウトになります。
タイトルと抜粋の両方を表示するのは、補足文が短く一貫している場合に最適です。抜粋の文調や長さにばらつきがある場合は、タイトルのみのカードのほうが通常は見やすくなります。
テキスト配置
Section titled “テキスト配置”テキスト配置は、読みやすさと視覚的な印象の両方に影響します。商品グリッドでは左揃えが通常最も見やすく、中央揃えのテキストはより販促的、またはデザイン重視の印象になります。
縦方向の配置は、テキストがよりスタイルの強いカード内に配置されるレイアウトで特に重要です。中央位置はバナーカードスタイルにのみ適用されるため、主にバナー型の商品カードの表現で役立ちます。
カードのバリアントセレクター
Section titled “カードのバリアントセレクター”バリアントセレクターを使用すると、スウォッチまたはピルを使って、商品カードから直接オプションをプレビューしたり選択したりできます。色、パターン、画像ベースのバリエーションが購入判断の重要な要素である場合に特に便利です。
カタログがシンプルな商品で構成されている場合や、バリアントの表示が一貫していない場合は、セレクターを非表示にするとカードをよりすっきり保てます。スウォッチまたはピルを有効にする場合は、顧客に信頼できる体験を提供できるよう、バリアントデータが一貫して設定されていることを確認してください。
設定方法については、product variants を参照してください
使用上の注意
Section titled “使用上の注意”- 上書きは選択的に使用します。 特定の商品カードの文脈で別の見た目や動作が必要な場合を除き、テーマレベルの設定はそのまま維持してください。
- 一貫性のために比率を選びます。 固定の画像比率は混在した写真を統一するのに役立ち、デフォルト比率はより自然な画像フレーミングを保ちます。
- モバイルファーストで設計します。 商品カードのアクションはモバイルではアイコンのみになるため、強い画像と明確なテキストに頼ってカードを分かりやすくしてください。
- テキストは目的を持たせます。 抜粋は、商品コンテキストを補ううえで役立つ場合にのみ表示してください。それ以外では、タイトル中心のシンプルなカードのほうが通常は見やすくなります。
- 重要な場面でセレクターを有効にします。 意味のある視覚的選択がある商品にはスウォッチまたはピルを使用し、広く展開する前にバリアント設定が一貫していることを確認してください。
- スライダー形式のカードは両方の表示領域で確認します。 スライダーのような表示を選ぶ場合は、デスクトップとモバイルでナビゲーション、ページ送り、余白を確認してください。レイアウトが静的なグリッドとは異なる動作をすることがあります。
- 別々のメディア選択を慎重に確認します。 デスクトップとモバイルで異なる画像トリミングを使う場合は、可読性、代替フレーミング、意図しないトリミングがないか、両方のバージョンを確認してください。