商品バリエーション

商品バリエーション要素について

概要: Shopify 商品バリエーション 要素は、ページの Shopify 商品のバリエーションを表示してコンバージョン率を向上させるために設計されています。商品バリエーション要素を使用すると、商品ページ以外や商品ページのどちらでも商品を宣伝できます。

このビデオチュートリアルもご覧いただけます。

Shopify 商品バリエーション要素にアクセスする方法

以下の手順で商品バリエーション要素に移動します。

• ステップ 1: 要素カタログ（左サイドバー）の要素アイコンをクリックします。

• ステップ 2: 要素セクションで、Shopifyタブに切り替え、ドロップダウンメニューの商品バリエーション要素をクリックします。

• ステップ 3: 要素をページエディターにドラッグアンドドロップして、使用を開始します。

商品バリエーション要素には5つの一般的なバリエーションがありますが、時間を節約できるように、さらに多くのバリエーションを追加し続けます。

商品バリエーション要素の設定方法（設定）

商品バリエーション要素には、コンテンツの外観を微調整して可能な限り最高のコンバージョン率を実現するための多くのパラメータが付属しています。

商品バリエーション要素をエディターページにドラッグアンドドロップすると、次のような2つの商品ソースオプションから選択できます。

• 自動

• カスタム商品

商品ページで:

商品バリエーションを商品詳細の外にドラッグした場合、自動とカスタムの2つのオプションがあります。

自動を選択した場合、商品バリエーションはこの商品ページに割り当てられた商品の値が表示されます。商品バリエーション要素を使用する際、自動オプションがデフォルトで設定されています。

商品ページ以外で:

商品バリエーションを商品詳細の外で使用する場合、商品ソースは無効になります。商品バリエーションは自動的にカスタム商品のバリエーションとして表示されます。

一般タブ

| | | **結合オプション**: 結合バリエーションを有効にするか無効にするかの2つのオプションがあります。 - **結合オプションを有効にする**: すべてのバリエーションを1行に結合します。 - **結合オプションを無効にする**: すべてのオプション値を個別に表示します。 |  | |

| | | **価格表示**: 各バリエーションの価格を表示または非表示にします。 |  | |

| | | **バリエーション表示**: バリエーションの2つの表示タイプがあります。 - ドロップダウンメニュー - ラジオボタン - バリエーション画像（結合オプションがオンでオプションスウォッチがオフの場合にのみ表示） |  | |

                                                                                                                                                                                                       |                                                                                                                                                                                                                                   |

| オプション値表示: バリエーション表示について、「ラジオボタン」または「バリエーション画像」のいずれかを選択して、オプション値の表示を設定できます。各オプション値の表示を調整する方法については、以下の設定を参照してください。 | | | オプション値間隔: オプション値間のスペースを調整します。 | | | オプション値レイアウト: 2つのバリエーションがあります。 - 水平 - 垂直 注: この設定は、バリエーション表示が「ラジオボタン」の場合にのみ利用可能です。 | |

ページに2つ以上の商品が割り当てられている場合、商品バリエーションは割り当てられた商品リストの最初の商品のオプションを表示します。

属性、表示、アニメーションパラメータに関する詳細情報はこちらで確認できます。

スタイルタブ

スタイルタブでは、要素のサイズ、間隔、境界線、タイポグラフィ、色など、さまざまなパラメータを変更して、商品バリエーション要素がページの全体的なレイアウトと一致するように保証できます。

スタイルタブに関する詳細情報はこちらで確認できます。

一般的なケース

バリエーションにホバー状態を追加する

バリエーションにホバー状態を追加するには、オプション値をクリックし、スタイルタブに移動して、「マウスオーバー状態」オプションに変更し、ホバー状態のコンテンツの色と背景色を調整します。

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

• 利用可能なバリエーションを顧客が簡単に理解できるように、明確で分かりやすいオプション名を使用します。

• 顧客により良い視覚的な表現を提供するために、各バリエーションに高品質の画像またはスウォッチを提供します。

• バリエーションオプションの視覚的に魅力的で整理されたレイアウトを作成するために、「オプション間隔」と「オプション値間隔」パラメータを活用します。

• あなたの商品と顧客にとって最も効果的な表示タイプ（ドロップダウンメニュー、ラジオボタン、またはバリエーション画像）をテストします。

よくある質問

• 1. 商品バリエーションを使用するには、Shopify バリアント API を追加する必要がありますか？ いいえ、Shopify バリアントはShopify 管理画面内に既にインストールされているため、Shopify バリアント API を追加する必要はありません。このガイドの「Shopify 要素」の下にある「商品バリエーション」にアクセスすることで、これらを見つけて編集できます。

• 2. Shopify で複数のバリエーションを追加するにはどうすればよいですか？ いいえ、現時点では、PageFly 管理ダッシュボードで一度に1つずつのみ追加できますが、さまざまな種類のバリエーションを柔軟に選択できます。

• 3. 商品バリエーションの例は何ですか？ 解像度や画面サイズのオプションが付いたテレビ、さまざまな色とサイズがある T シャツなどです。

• 4. バリエーションとメタフィールドの違いは何ですか？ Shopify 商品メタフィールドは主にサイズ表、ダウンロード可能なドキュメント、リリース日、画像、部品番号などの仕様を保持します。一方、Shopify バリエーションは顧客が選択するためのオプションを提供します。

バージョンアップデート

従来のページビルディングメカニズム（行、列）に加えて、PageFly 4.23.0 では、複雑で高度にカスタマイズ可能なレイアウトの作成を可能にする、より柔軟で効率的なテクノロジーである Gen 2 レイアウトが追加されました。これは直感的でユーザーフレンドリーなインターフェースを備えています。

追加リソース

• コンバージョン率の高いプロフェッショナルサイトのための Web デザインのヒントとコツ