# 商品バリエーションのカスタムオプションスウォッチを管理する方法

### 概要

[オプションスウォッチ](https://help.pagefly.io/manual/how-to-custom-option-swatches-for-product-variants/)は、顧客が商品ページで直接、色やサイズなどの製品バリアントを簡単に選択できるようにする視覚的な要素です。異なるオプションのテキスト説明を見るだけでなく、顧客は各バリアントを表す小さな画像、色付きボックス、またはラベルを見ることができます。

### 要件

オプションスウォッチ機能を使用するには、Shopify製品に少なくとも1つのバリアントが必要です。[Shopify製品にバリアントを追加する方法](https://help.shopify.com/en/manual/products/variants/add-variants)については、こちらをご覧ください。

### オプションスウォッチにアクセスする方法

オプションスウォッチ機能にアクセスするには、PageFlyダッシュボードの左サイドバーにある「**Extra functions**」に移動し、「**Option Swatches**」の横にある「**Manage**」ボタンを選択します。

![](/files/FQ24gpJ5BTU2SHQ8CEjx)

### オプションスウォッチ設定を構成する方法

このビデオチュートリアルでは、製品スウォッチオプションの設定方法を案内します。

{% embed url="<https://youtu.be/qVnzTJrwfLo>" %}

#### ステップ1：オプションスウォッチを追加する

* 「**Add option swatch**」ボタンをクリックすると、Shopifyストアで利用可能なすべてのオプションが表示されます。

![](/files/k4Kl8nQUF6SE1sSl48bg)

* スウォッチとして表示したいオプションを選択し、「**Add option**」をクリックします。

![](/files/ktBiM6vT94KaqWIQf4pD)

{% hint style="info" %}
**Note**: 検索フィールドを使用して、特定のオプションを名前で検索できます。
{% endhint %}

#### ステップ2：表示タイプを構成する

各オプションについて、6種類の異なる表示タイプから選択できます。

1. **Label**: オプション値がテキストラベルとして表示されます。

![](/files/7I2cfI3kZvfEfvBQAre4)

2. **Color**: バリアントを表す単色を選択します。

![](/files/gVwLWHiIc2eMjy23kGGD)

3. **Custom Image**: バリアントを表すカスタム画像を選択します。

![](/files/JJbBrjclVx2XiTNKKXJf)

4. **Variant Image**: Shopifyストア管理でバリアントに設定した画像を使用します。

![](/files/sLFM00XXhLBtwnTAioD0)

5. **Radio Buttons**: オプション値がラジオボタンとして表示され、ページエディターでスタイルを設定できます。

![](/files/lVlSOPPebscTKeEiXVdO)

6. **Dropdown**: オプション値がドロップダウンメニューとして表示され、これもページエディターでスタイルを設定できます。

![](/files/EHrSyjn20ERO5tTpsDv8)

各バリアントに適切な表示タイプを選択したら、「**Save**」ボタンをクリックして変更を適用します。

![](/files/0DL10ueufL69Ui1ZH8W1)

### ユースケース

#### オプションスウォッチのデータを更新する

Shopifyストアで製品に変更を加えると、オプションスウォッチ機能には「**Data outdated**」という通知が表示され、Shopifyで行ったすべての変更が表示されます。

データを更新するには、「**Update data**」ボタンをクリックすると、ページが再度読み込まれ、現時点でShopifyストアにあるすべての有効なデータが表示されます。

![](/files/O4TQacWs9MFEphbSGwO3)

#### PageFlyエディターでオプションスウォッチを使用する

PageFlyページでオプションスウォッチを有効にするには、以下の手順に従います。

1. PageFlyエディターで、「**Product Variant**」要素をページキャンバスの「**Product Details**」セクションにドラッグアンドドロップします。
2. Product Variant設定の「**General**」タブで、「**Combine options**」パラメーターに「**No**」を選択し、「**Use option swatches**」パラメーターに「**Yes**」を選択します。

これにより、その製品のバリアントに対して選択された表示タイプが表示されます。利用可能な表示タイプには、label、color、custom image、variant image、radio buttons、dropdownなどがあります。

![](/files/iNdXXB1UgAX3pgONN356)

#### オプションスウォッチの値をカスタマイズする

オプションスウォッチ機能を有効にした後、オプション値の外観をさらにカスタマイズできます。

1. PageFlyエディターで個別のオプション値をクリックします。
2. 「**Styling**」タブに移動して、オプション値の外観をカスタマイズします。

オプションスウォッチのスタイル設定に関する詳細については、[PageFlyドキュメント](https://help.pagefly.io/manual/elements-style-settings/)を参照してください。

![](/files/QkxMr84idkEFOC6MOYLP)

### ヒントとベストプラクティス

* 製品バリアントを最もよく表す表示タイプを選択します。例えば、色オプションにはカラーパッチを使用し、サイズオプションにはラベルオプションを使用します。
* 使用するカスタム画像やバリアント画像は、高品質でサイズと外観に一貫性があることを確認してください。
* 製品ページの全体的な美学を考慮し、ブランドとデザインを補完する表示タイプを選択します。
* さまざまなデバイスや画面サイズでオプションスウォッチをテストし、表示や操作が容易であることを確認します。
* Shopifyストアで製品バリアントに変更を加えた場合は、オプションスウォッチを定期的に更新します。「**Data outdated**」通知が必要な更新を知らせます。

### よくある質問

**1. オプションスウォッチのスタイリングを、組み込みの表示タイプ以外にカスタマイズできますか？**

はい、PageFlyページエディターでオプションスウォッチのスタイリングをさらにカスタマイズできます。これにより、サイズ、形状、色、およびその他の視覚的なプロパティを調整して、全体的なデザインに合わせることができます。

**2. Shopify製品に新しいバリアントを追加した場合どうなりますか？**

Shopify製品に新しいバリアントを追加すると、PageFlyオプションスウォッチ設定に「**Data outdated**」通知が表示されます。「**Update data**」ボタンをクリックするだけで、新しいバリアントがオプションスウォッチに反映されます。

**3. サイズ、色、素材など、すべてのタイプの製品バリアントにオプションスウォッチを使用できますか？**

はい、PageFlyのオプションスウォッチ機能は柔軟であり、サイズ、色、素材など、さまざまなタイプの製品バリアントを表示するために使用できます。各バリアントを最もよく表す表示タイプを選択してください。

**4. オプションスウォッチは顧客のユーザーエクスペリエンスを向上させますか？**

はい、オプションスウォッチは、顧客が求める製品バリアントを視覚化して選択しやすくすることで、ユーザーエクスペリエンスを大幅に向上させることができます。これにより、エンゲージメントの向上、カート放棄の減少、そして最終的に売上の増加につながります。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.pagefly.io/pagefly-help-center-japanese/pjito/editor/extra-functions/how-to-custom-option-swatches-for-product-variants.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.