成功
バリアントセレクター
ドロップダウン、ピル、任意のカラーまたは画像スウォッチで商品バリアントを表示します。
このブロックを使用して、商品の最適な形式で商品バリアントのオプションを表示します。これはバリアントオプションが存在する場合にのみ表示され、標準のセレクタースタイルと任意のカラーまたは画像スウォッチを組み合わせて、より視覚的に選びやすくできます。 バリアントセレクターに関するCompany XYZドキュメント Shopifyテーマにおけるブロックの仕組みのより詳しい概要については、セクションとブロックに関するShopifyドキュメント をご覧ください。
表示するオプションの数と、商品フォームをどれだけ視覚的に見せたいかに基づいて、主なセレクタースタイルを選択します。Dropdown は、コンパクトなレイアウトや値が多い商品に適しており、Pills は少数のオプションを見やすく、タップしやすくします。
このメインスタイルは、スウォッチとして設定されていないオプションタイプのフォールバックとしても機能します。
カラースウォッチ設定
Section titled “カラースウォッチ設定”顧客が色だけで選択肢を確実に判別できる場合は、カラースウォッチを使用します。これは一般的な色ベースのオプションに最適で、テーマ設定でカスタムの色定義を使用してさらに調整できます。 Company XYZ getting started guide on product variants
カラースウォッチを表示するには、商品設定で使用されているものとまったく同じ option names を入力してください。Color のような名前を使用し、Black や Navy のような値は使用しないでください。選択されたスウォッチの形状と、デスクトップ/モバイルの列数によって、オプショングリッドの密度や余白の感覚が変わります。
カラースウォッチは、ここに一覧表示したオプション名にのみ適用されます。名前が完全に一致しない場合、そのオプションには代わりに通常のセレクタースタイルが使用されます。
画像スウォッチ設定
Section titled “画像スウォッチ設定”バリアントの選択に、単なる色の手がかりではなく、実際のサムネイルが必要な場合は画像スウォッチを使用します。これは、パターン、仕上げ、バンドル、または選択前の視覚的な確認が安心感を高めるその他のオプションに特に便利です。 Company XYZ getting started guide on product variants
画像スウォッチは、関連するバリアントオプションに画像が割り当てられていることが前提です。オプションに関連付けられた画像がない場合、そのスウォッチは空白で表示されます。同じオプション名に対して画像スウォッチとカラースウォッチの両方が有効な場合は、画像スウォッチが優先されます。
スウォッチ枠線設定
Section titled “スウォッチ枠線設定”これらの設定は、カラーおよび画像スウォッチにのみ影響します。枠線があると、特に選択肢が明るい場合、コントラストが低い場合、または同じようなページ背景の上に表示される場合に、スウォッチを区別しやすくなります。
アクティブなオプションには常に枠線が表示されるため、現在の選択内容が明確に保たれます。カスタムの枠線色を空のままにすると、ブロックはテーマのプライマリーボタンの枠線スタイルにフォールバックし、より一貫した見た目になります。
標準ブロック設定
Section titled “標準ブロック設定”表示コントロールを使用して、このブロックをデスクトップ、モバイル、またはその両方に表示するかを決定します。これは、小さい画面で異なる商品フォームのレイアウトにしたい場合に便利です。 表示設定に関するCompany XYZドキュメント
使用上の注意
Section titled “使用上の注意”- オプション名を正確に一致させます。 スウォッチの動作は正確なオプションラベルに依存するため、個々の値ではなくオプション名そのものを使用してください。
- 適切なスウォッチタイプを選びます。 単純な色の選択にはカラースウォッチを、顧客に本当の視覚的なプレビューが必要な場合は画像スウォッチを使用します。
- 画像の対応範囲を確認します。 画像スウォッチを使用する前に、関連する各バリアントオプションに画像が割り当てられていることを確認し、空のスウォッチを避けてください。
- フォールバックのスタイルを予測しやすく保ちます。 スウォッチにテーマのデフォルトの見た目を継承させたい場合は、カスタムカラーや枠線を設定しないままにし、ブロックを目立たせたい場合のみ明示的な値を追加します。
- 両方のビューポートを確認します。 デスクトップとモバイルのコントロールは、余白、配置、表示、メディア表示で異なる動作をする場合があるため、公開前に両方のサイズでブロックを確認してください。
- モバイルでの見やすさを保ちます。 小さい画面でも快適にタップできるように、十分なスペースを確保できる列数とスウォッチ形状を使用してください。