商品バリエーション

注目のリンク

1. Shopifyブログ：スウォッチ
2. スウォッチオブジェクトに関するShopify開発者ドキュメント
3. 名前付きカラーに関するMDNドキュメント
4. バリエーションの追加に関するShopifyドキュメント
5. Shopify Translate & Adaptアプリ
6. カテゴリー・メタフィールドを使用したカラースウォッチの追加に関するShopifyドキュメント

役立つ動画

Shopify Academy動画：ストアのカスタマイズ

Shopify Academy動画：ストアのカスタマイズ

Align の Variant selector ブロックを使用すると、サイズ、カラー、袖丈などの商品オプションをお客様が選択できるようになります。このブロックは、商品テンプレートの Product information セクション、または別のテンプレートの Featured product セクションに追加します。

Shopifyでの商品とバリエーションの設定については、バリエーションの追加に関するShopifyドキュメントを参照してください。

バリエーションオプションがある商品では、カート追加アクションを機能させるためにVariant selectorブロックが必要です。バリエーションオプションがない商品には、このブロックは表示されません。

バリエーションセレクターのスタイル

選択したAlignテンプレートで標準のバリエーションオプションをどのように表示するかを選択します。各Variant selectorブロックには個別の設定があるため、商品やコレクションごとに表示を調整できます。

ドロップダウンとピル

Variant selector style 設定を使用して、次のレイアウトから1つを選択します。

• Dropdowns はデフォルトのレイアウトで、Size、Color、Sleevesなどのオプションを選択メニューに配置します。

  Dropdown style

• Pills はオプションを選択可能なボタンとして表示します。

  Pills style

スウォッチ

スウォッチは視覚的なバリエーションコントロールです。テキストのみのドロップダウンやボタンよりもオプションを比較しやすくなります。視覚的なフィードバックを提供し、よりコンパクトなレイアウトをサポートし、お客様がカラー、パターン、商品画像をすばやく識別できるようにします。

Alignでは、次の2種類のスウォッチに対応しています。

1. Color swatches は、オプション値のカラーを表示します。
2. Image swatches は、バリエーションオプションに割り当てられたサムネイルを表示します。

カラースウォッチ

カラースウォッチは、オプション値を名前付きCSSカラーに自動的に一致させようとします。たとえば、オプション値が Black の場合、デフォルトで #000000 が使用されます。オプション値に特定のカラー処理が必要な場合は、カスタムカラー定義を追加してください。

カラースウォッチを有効にする

1. Shopifyテーマエディターで商品テンプレートを開きます。

2. Product information セクションで、Variant selector ブロックを選択します。

3. カラースウォッチを有効にします。

   [!NOTE] カラースウォッチは選択したVariant selector styleを上書きするため、対象のオプションではドロップダウンまたはピルコントロールが使用されなくなります。

4. バリエーションの option name または複数の名前を Color swatch Option names に入力します。

   • 値（Black, Brown, Blue など）ではなく、Color のようなオプション名を使用します。
   • 複数のオプション名はコンマで区切って入力できます。
   • 翻訳されたオプション名も使用できます。たとえば、Shopify Translate & Adaptアプリを使用するストアでは、Color、Couleur、Spalva を使用できます。

5. スウォッチをプレビューします。デフォルトでは、各スウォッチはオプション値をカラー名として使用します。使用可能な名前付きカラーについては、CSSの名前付きカラーを参照してください。

6. 必要に応じてカスタムカラー値を追加します。

   1. テーマエディターで Theme settings を開きます。
   2. Colors を開き、Custom color swatches を見つけます。
   3. コンマで区切ったオプション値とHEXカラーのペアを入力します。例：Black: #000, Red: #ff0000。

カテゴリー・メタフィールドでのカラー設定については、カテゴリー・メタフィールドを使用したカラースウォッチの追加に関するShopifyドキュメントを参照してください。

Materialなどのカラー以外のオプションをカラースウォッチとして使用する場合は、各値を Custom color swatches で定義してください。一致する定義がない場合、スウォッチは空で表示されます。

画像スウォッチ

画像スウォッチは、各バリエーションオプションに割り当てられたサムネイルを表示します。関連付けられた画像がないオプションは空で表示されます。同じオプションにカラースウォッチと画像スウォッチの両方が適用される場合は、画像スウォッチが優先されます。

画像スウォッチを有効にする

1. Shopifyテーマエディターで商品テンプレートを開きます。

2. Product information セクションで、Variant selector ブロックを選択します。

3. 画像スウォッチを有効にします。

   [!NOTE] 画像スウォッチは、対象のオプションで選択したVariant selector styleを上書きします。

4. バリエーションの option name または複数の名前を Image swatch Option names に入力します。

画像スウォッチの動作

• カラースウォッチと画像スウォッチは組み合わせて使用できます。 商品ごとに異なるオプショングループで異なる種類のスウォッチを使用できます。
• 各バリエーションで使用できる画像スウォッチは1つです。
• バリエーションの組み合わせには、その組み合わせ専用の画像が使用されます。 たとえば、SmallとBlackのオプションを持つバリエーションでは、その組み合わせに割り当てられた画像が使用されます。
• 同じ画像は1回だけ表示されます。 複数のオプショングループで同じ画像が使用される場合、設定で先に記載されたオプショングループだけに画像スウォッチが表示されます。同じ画像が繰り返し表示されないよう、後のオプショングループではデフォルトのインターフェースが使用されます。

スウォッチスタイル設定

カラースウォッチと画像スウォッチには、形状やレイアウトを調整するための表示設定があります。

スウォッチスタイル

商品画像と利用可能なスペースに適したスウォッチスタイルを選択します。

• Default は画像スウォッチを自然なアスペクト比で表示します。このオプションは画像スウォッチでのみ使用できます。
• Circle
• Landscape
• Portrait
• Square
• Widescreen

列数

デスクトップとモバイルで個別の列設定を使用して、レスポンシブレイアウトでのスウォッチの幅を制御します。列数を増やすとスウォッチは狭くなり、列数を減らすと広くなります。

1. 1列から8列の間で選択します。
2. デスクトップとモバイルの両方の表示を確認し、タップしやすく読みやすいレイアウトになるよう各設定を調整します。
3. 列数によってカラースウォッチと画像スウォッチの幅が制御され、適切な画像サイズが自動的に使用されます。

ヒント

特にオプション値が多い商品では、必ずモバイルでスウォッチをプレビューしてください。デスクトップで適切な列数でも、小さい画面ではスウォッチが小さすぎたり、詰まりすぎたりすることがあります。

使用上の注意

1. セレクターブロックを使用できる状態にします。 バリエーションがある商品では、お客様が選択したバリエーションをカートに追加できるよう、Variant selectorブロックが必要です。
2. 正確なオプション名を使用します。 スウォッチを有効にするときは、個々のオプション値ではなく、Color や Material などのオプションラベルを入力します。
3. 標準外のカラーを定義します。 空のカラースウォッチが表示されないよう、認識されないカラー名の値にはカスタムカラー定義を追加します。
4. バリエーション画像を慎重に割り当てます。 画像スウォッチは、関連するバリエーションの組み合わせに割り当てられた画像を使用します。
5. モバイルレイアウトを確認します。 変更を公開する前に、モバイルの列数とスウォッチサイズを確認します。