> For the complete documentation index, see [llms.txt](https://help.pagefly.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.pagefly.io/pagefly-help-center-japanese/pjito/shopify-elements/product/shopify-elements-product-variant.md). # 商品バリエーション ### 商品バリエーション要素について **概要**: [Shopify 商品バリエーション](https://help.pagefly.io/manual/shopify-elements-product-variant/) 要素は、ページの Shopify 商品のバリエーションを表示してコンバージョン率を向上させるために設計されています。商品バリエーション要素を使用すると、商品ページ以外や商品ページのどちらでも商品を宣伝できます。 このビデオチュートリアルもご覧いただけます。 {% embed url="" %} {% hint style="info" %} **注**: オプションスウォッチ機能がリリースされ、これによりマーチャントはすべての商品バリエーションをさまざまな方法で表示できます。 {% endhint %} ### Shopify 商品バリエーション要素にアクセスする方法 以下の手順で商品バリエーション要素に移動します。 * **ステップ 1:** 要素カタログ（左サイドバー）の要素アイコンをクリックします。 * **ステップ 2:** 要素セクションで、Shopifyタブに切り替え、ドロップダウンメニューの**商品バリエーション**要素をクリックします。 * **ステップ 3:** 要素をページエディターにドラッグアンドドロップして、使用を開始します。 商品バリエーション要素には5つの一般的なバリエーションがありますが、時間を節約できるように、さらに多くのバリエーションを追加し続けます。 {% hint style="info" %} サイドバーで探すのではなく、検索機能を使用してこの要素を検索できることに注意してください。 {% endhint %} ![](/files/QLintLI4lLl6un0XSVRc) ### 商品バリエーション要素の設定方法（設定） 商品バリエーション要素には、コンテンツの外観を微調整して可能な限り最高のコンバージョン率を実現するための多くのパラメータが付属しています。 {% hint style="info" %} バリエーションのない商品がある場合、**ページエディターはバリエーション設定に関連するすべてのパラメータを非表示にする**ことに注意してください。 {% endhint %} 商品バリエーション要素をエディターページにドラッグアンドドロップすると、次のような2つの商品ソースオプションから選択できます。 * 自動 * カスタム商品 {% hint style="info" %} **注**: 商品バリエーションが商品詳細内にある場合、商品ソースは常に自動オプションになり、割り当てられている商品の値を取ります！ {% endhint %} ![](/files/YXVESjTfpkqdXYpm5TII) **商品ページで:** 商品バリエーションを商品詳細の外にドラッグした場合、自動とカスタムの2つのオプションがあります。 自動を選択した場合、商品バリエーションはこの商品ページに割り当てられた商品の値が表示されます。商品バリエーション要素を使用する際、自動オプションがデフォルトで設定されています。 **商品ページ以外で:** 商品バリエーションを商品詳細の外で使用する場合、商品ソースは無効になります。商品バリエーションは自動的にカスタム商品のバリエーションとして表示されます。 ![](/files/P8ufFSoGrkdQfZtouhox) #### 一般タブ | **商品ソース**: 上記の自動とカスタム商品の2つのオプションがあります。 - **自動**: 商品ページにいる場合、このページに割り当てられた商品がエディターに表示されます。 - **カスタム商品**: 表示する特定の商品を選択できます。 | | | :-----------------------------------------------------------------------------------------------------------------------: | - | | | | {% hint style="info" %} \*\*注\*\*: レギュラーページでは、商品ソースオプションは利用できません。 {% endhint %} \| |\ \| \*\*結合オプション\*\*: 結合バリエーションを有効にするか無効にするかの2つのオプションがあります。 - \*\*結合オプションを有効にする\*\*: すべてのバリエーションを1行に結合します。 - \*\*結合オプションを無効にする\*\*: すべてのオプション値を個別に表示します。 | !\[]\(../../../images/AD\_4nXfVAAwj2O0WGj3w7MG7xJGMDImE7v-VFp2pnrXEehA\_xR1vOMNxnsQgMP885mAcxVkiW6YOHe\_d\_7MwkvF4GEntw-8OEkWAnrtn0YmSgut9\_gJyBBTYZTHezWsEThnPW0waSHAEGyGiR6UOMNcpSwkey0exu5oC1GsuAMTGncK5Brw\.gif) |\ | {% hint style="info" %} \*\*注\*\*: 結合オプションを無効にした場合にのみ、オプションスウォッチが機能します。 {% endhint %} \| |\ \| \*\*価格表示\*\*: 各バリエーションの価格を表示または非表示にします。 | !\[]\(../../../images/AD\_4nXcGouGmtVLBDjQjjEISK-Edhju4xF7mlk7rwsQA3oMx4FYpqTZd20a4GXMHWltDbmywwIUbL1ilQ-5tvV1jd3CzrVpXbGKRj5AfnGuQc6rf6VJNNLi2-dKgxNpUClfwwY3e\_5Xb7wTwypJeWWXzAwkey0exu5oC1GsuAMTGncK5Brw\.gif) |\ | {% hint style="info" %} \*\*注\*\*: 結合オプションがオンになっている場合にのみ、価格表示が表示されます。 {% endhint %} \| |\ \| \*\*バリエーション表示\*\*: バリエーションの2つの表示タイプがあります。 - ドロップダウンメニュー - ラジオボタン - バリエーション画像（結合オプションがオンでオプションスウォッチがオフの場合にのみ表示） | !\[]\(../../../images/AD\_4nXd0Pt53h7sCi1RxBa8FXQCvPVwjPLj8R0BQfIUdj2f7cmvqAwzf4fXmQtoZTDvVTT9q-YLrTbfcOX0ocfxCe45oYS2TMQl150M8arLHAQdQBAKzUePHX-keRIT-Oq8DkS1OEqFZVkobcFhK98iqkey0exu5oC1GsuAMTGncK5Brw\.png) |\ | {% hint style="info" %} \*\*注\*\*: 結合オプションがオンになっている場合にのみ、バリエーション表示が表示されます。 {% endhint %} ``` | | ``` \| **オプション値表示**: バリエーション表示について、「**ラジオボタン**」または「**バリエーション画像**」のいずれかを選択して、オプション値の表示を設定できます。各オプション値の表示を調整する方法については、以下の設定を参照してください。 | ![](/files/XrbpnLTL5a38gQMkSKs3) |\ \| **オプション値間隔**: オプション値間のスペースを調整します。 | ![](/files/yjYs6FvEn2N4CZLftnw8) |\ \| **オプション値レイアウト**: 2つのバリエーションがあります。 - 水平 - 垂直 注: この設定は、バリエーション表示が「**ラジオボタン**」の場合にのみ利用可能です。 | ![](/files/QRdl4FqvXb5dDvMClFd7) | ページに2つ以上の商品が割り当てられている場合、商品バリエーションは割り当てられた商品リストの最初の商品のオプションを表示します。 属性、表示、アニメーションパラメータに関する詳細情報は[こちら](https://help.pagefly.io/manual/elements-style-settings/)で確認できます。 #### スタイルタブ スタイルタブでは、要素のサイズ、間隔、境界線、タイポグラフィ、色など、さまざまなパラメータを変更して、商品バリエーション要素がページの全体的なレイアウトと一致するように保証できます。 スタイルタブに関する詳細情報は[こちら](https://help.pagefly.io/manual/elements-style-settings/)で確認できます。 ### 一般的なケース #### バリエーションにホバー状態を追加する バリエーションにホバー状態を追加するには、オプション値をクリックし、スタイルタブに移動して、「**マウスオーバー状態**」オプションに変更し、ホバー状態のコンテンツの色と背景色を調整します。 ### ヒントとベストプラクティス * 利用可能なバリエーションを顧客が簡単に理解できるように、明確で分かりやすいオプション名を使用します。 * 顧客により良い視覚的な表現を提供するために、各バリエーションに高品質の画像またはスウォッチを提供します。 * バリエーションオプションの視覚的に魅力的で整理されたレイアウトを作成するために、「**オプション間隔**」と「**オプション値間隔**」パラメータを活用します。 * あなたの商品と顧客にとって最も効果的な表示タイプ（ドロップダウンメニュー、ラジオボタン、またはバリエーション画像）をテストします。 ### よくある質問 * **1. 商品バリエーションを使用するには、Shopify バリアント API を追加する必要がありますか？**\ いいえ、Shopify バリアントはShopify 管理画面内に既にインストールされているため、Shopify バリアント API を追加する必要はありません。このガイドの「Shopify 要素」の下にある「商品バリエーション」にアクセスすることで、これらを見つけて編集できます。 * **2. Shopify で複数のバリエーションを追加するにはどうすればよいですか？**\ いいえ、現時点では、PageFly 管理ダッシュボードで一度に1つずつのみ追加できますが、さまざまな種類のバリエーションを柔軟に選択できます。 * **3. 商品バリエーションの例は何ですか？**\ 解像度や画面サイズのオプションが付いたテレビ、さまざまな色とサイズがある T シャツなどです。 * **4. バリエーションとメタフィールドの違いは何ですか？**\ Shopify 商品メタフィールドは主にサイズ表、ダウンロード可能なドキュメント、リリース日、画像、部品番号などの仕様を保持します。一方、Shopify バリエーションは顧客が選択するためのオプションを提供します。 ### バージョンアップデート 従来のページビルディングメカニズム（行、列）に加えて、PageFly 4.23.0 では、複雑で高度にカスタマイズ可能なレイアウトの作成を可能にする、より柔軟で効率的なテクノロジーである Gen 2 レイアウトが追加されました。これは直感的でユーザーフレンドリーなインターフェースを備えています。 {% hint style="warning" %} **重要事項:** Gen 2 レイアウトは、従量課金制モデル（[スロットプラン](https://help.pagefly.io/manual/pricing-plans/)）でのみ利用可能になります。 {% endhint %} ### 追加リソース * [コンバージョン率の高いプロフェッショナルサイトのための Web デザインのヒントとコツ](https://academy.pagefly.io/guide/web-design-tips-tricks-for-a-professional-site-that-converts/?utm_source%3Dmanual%26utm_medium%3Darticle%26utm_campaign%3Dguides) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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/shopify-elements/product/shopify-elements-product-variant.md?ask= ``` 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.