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

概要

オプションスウォッチは、顧客が商品ページで直接、色やサイズなどの製品バリアントを簡単に選択できるようにする視覚的な要素です。異なるオプションのテキスト説明を見るだけでなく、顧客は各バリアントを表す小さな画像、色付きボックス、またはラベルを見ることができます。

要件

オプションスウォッチ機能を使用するには、Shopify製品に少なくとも1つのバリアントが必要です。Shopify製品にバリアントを追加する方法については、こちらをご覧ください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ユースケース

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

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

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

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などがあります。

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

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

1. PageFlyエディターで個別のオプション値をクリックします。

2. 「Styling」タブに移動して、オプション値の外観をカスタマイズします。

オプションスウォッチのスタイル設定に関する詳細については、PageFlyドキュメントを参照してください。

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

• 製品バリアントを最もよく表す表示タイプを選択します。例えば、色オプションにはカラーパッチを使用し、サイズオプションにはラベルオプションを使用します。

• 使用するカスタム画像やバリアント画像は、高品質でサイズと外観に一貫性があることを確認してください。

• 製品ページの全体的な美学を考慮し、ブランドとデザインを補完する表示タイプを選択します。

• さまざまなデバイスや画面サイズでオプションスウォッチをテストし、表示や操作が容易であることを確認します。

• Shopifyストアで製品バリアントに変更を加えた場合は、オプションスウォッチを定期的に更新します。「Data outdated」通知が必要な更新を知らせます。

よくある質問

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

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

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

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

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

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

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

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