備考：マーチャントがいくつかの方法ですべての商品のバリアントを表示できるようにするオプションスウォッチ機能がリリースされました。
商品のバリアント要素について
商品のバリアント要素はShopify商品のバリアントをページに表示させてコンバージョン率を高めるために設計されている要素です。商品のバリアント要素を用いて商品ページ以外でも商品をプロモートしたり、商品ページにも使用できます。
以下のビデオチュートリアルをご覧ください。:
商品のバリアント要素のアクセス方法
- ステップ1：要素カタログでShopify要素追加機能である3つ目のアイコンをクリックします。
- ステップ2：ドロップダウンメニューで商品のバリアント要素をクリックします。
- ステップ3：対象の要素をページエディタにドラッグ＆ドロップして使用します。
商品のバリアント要素には5つのバリエーションが含まれていますが、お客様が時間を節約できるように、新規のバリエーションを追加していきます。
サイドバーメニューだけではなく検索機能を使用することで要素も見つけられます。
商品のバリアント要素の構成
商品のバリアント要素には、アピアランスを微調整して最高のコンバージョン率を取得できる多くのパラメータがあります。
レイアウントで要素を選択して含まれるパラメータを確認できます。
バリアントなしの商品がある場合、バリアント設定に関するすべてのパラメータがページエディタに非表示にされます。
商品のバリアント要素をページエディタにドラッグ＆ドロップすると、商品ソースに以下の2つから選択できます。
- オート
- カスタム商品
備考：
- 商品詳細に含まれる商品のバリアントの場合、商品ソースは常にオートにセットされ、アサインされた商品の値を取得します。
- 商品ページで商品詳細に含まれない商品のバリアントをドラッグすると、オートとカスタムの2つのオプションがあります。
- 商品ページ以外で商品詳細の外側に商品のバリアントをドラッグすると、商品ソースはカスタムになります。
- オートを選択すると、商品ページにアサインされた商品がページエディタに表示されます。商品のバリアント要素を使用すると、デフォルトとしてオートになります。
オプションスウォッチの構成
このビデオチュートリアルで商品スウォッチオプションを設定する方法についてご紹介します。:
この機能をアクセスするには、PageFlyのアドオン→オプションスウォッチを開きます。
その後、オプションスウォッチ追加ボタンをクリックすると、ストアにすべてのオプションが表示されます。検索フィールドでオプションを検索できます。
調整対象のオプションを選択してから選択ボタンをクリックします。
表示タイプでオプションごとにスタイルを選択できます。選択したオプションが以下のサンプルのように表示されます。
オプションごとに表示するために６つのタイプのオプションがあります。:
| コンテンツ | |
| ラベル：オプション値がテキストラベルとして表示されます。 |  |
| 色：バリアントの色を選択します。 |  |
| カスタム画像：バリアントにカスタム画像を選択します。画像をこちらで編集し、管理することができます。 |  |
| バリアント要素：Shopifyストア管理画面でバリアントにセットした画像を適用します。 |  |
| ラジオボタン |  |
| ドロップダウンメニュー |  |
ページエディタでスタイリングを設定できます。
Shopifyストアで商品を変更すると、オプションスウォッチ機能が「Data is not up-to-dated」という通知を表示し、Shopifyで変更したところをすべて表示します。
データを更新するためには、データ更新ボタンをクリックしてページがリロードされ、Shopifyストアですべての有効なデータが表示されます。
すべてのバリアントにタイプを選択してから右下の保存ボタンをクリックします。
一般タブの構成
| コンテンツ | |
| 商品ソースにはオートとカスタム商品があります。 | オート
カスタム
|
| 組み合わせオプション：「組み合わせオプションを有効にする」と「組み合わせオプションを無効にする」のオプションがあります。
組み合わせオプションが無効になった場合のみにオプションスウォッチが機能することにご注意ください。 |
|
| 有効になった組み合わせバリアント | |
| 価格の表示：各バリアントの価格を表示/非表示にします。
備考：組み合わせオプションが有効になった場合のみに、価格の表示が表示されます。 |
 |
| バリアントの表示：
バリアントの表示は3つのタイプがあります。
|
 |
| 売り切れテキスト：商品のバリアントが売り切れた時に顧客に知らせるために表示されるテキストを入力します。 |  |
| 無効になった組み合わせバリアント | |
| オプションの表示：ドロップダウンメニューとラジオボタンでオプションの表示を設定できます。
オプションスウォッチが無効になった場合、オプションの表示がすべてのオプション値に適用されます。 オプションスウォッチが有効になった場合、スウォッチ管理でオプション値の設定がなくて、オプション値は「オプション値の表示」のタイプの設定を取得します。 |
 |
| オプション値の余白：オプション値の間の余白を調整します。 |  |
| オプション名の表示 |  |
| オプション名の位置（オプション名の表示が有効になった場合） |  |
| オプションのレイアウト |  |
| オプション間の余白：オプショングループ間の余白を調整します。
備考：商品のオプション数が2つ以上の場合のみにこのパラメータが機能します。 |
 |
ページが2つ以上の商品にアサインされると、商品のバリアントは1番目の商品のオプションを商品がアサインされたリストに表示します。
属性パラメータ、可視性パラメータ、アニメーションパラメータに関する詳細情報はこちらをご覧ください。
スタイリングタブの構成
スタイリングタブの詳細情報については、こちらをご参照ください。
