> 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-view-details.md). # 商品詳細を見る ### プロダクトビュー詳細要素について [プロダクトビュー詳細](https://help.pagefly.io/manual/shopify-elements-product-view-details/)要素は、コンバージョン率を高めるために、対応する商品ページに商品の詳細を表示するように設計されています。プロダクトビュー詳細要素を使用して、商品ページ以外の任意のページで商品を宣伝したり、商品ページで使用したりできます。 ### プロダクト詳細要素へのアクセス方法 * ステップ1: **Element**機能をクリックし、**Shopify**タブに移動します * ステップ2: メニューの**Product View Details**要素をクリックします * ステップ3: 要素をページエディターにドラッグアンドドロップして使用を開始します。 ![](/files/3qRJrffFo6rbls5uPIcm) プロダクトビュー詳細要素には3つの一般的なバリエーションがありますが、時間を節約するためにさらに多くのバリエーションを追加し続けます。 注: この要素は、サイドバーで探すのではなく、検索機能を使用して検索できます。 ### Gen 2 レイアウト - プロダクトビュー詳細要素の設定方法 {% hint style="warning" %} **重要事項**: Gen 2 レイアウトは、従量課金制モデル（[スロットプラン](https://help.pagefly.io/manual/pricing-plans/)）でのみ利用可能です。 {% endhint %} プロダクトビュー詳細要素には、最高のコンバージョン率を実現するためにコンテンツの表示を微調整できる多くのパラメーターが付属しています。 レイアウトで要素を選択すると、そのパラメーターが表示されます。 プロダクトビュー詳細要素をエディターページにドラッグアンドドロップすると、Product Sourceオプションとして以下の2つの選択肢があります。 * **Auto** * **Custom product** [商品ページ](https://help.pagefly.io/manual/add-more-content-to-my-shopify-product-page/)にいてプロダクトビュー詳細要素を使用する場合、Product Sourceオプションを選択できることに注意してください。ただし、通常ページにいてこの要素を使用する場合、Product Sourceオプションは無効になり、Custom Productがデフォルトで選択されます。 Autoを選択すると、この商品ページを作成したときに割り当てられた商品がページエディターに表示されます。Product View Details要素を使用する場合、Autoオプションがデフォルトです。 顧客がView Detailsボタンをクリックすると、対応する商品ページに移動します。以下の例でライブページでの動作を見てみましょう。 ![](/files/sVlpTMQRIsWmVWwVZ2Zj) GeneralタブとStylingタブのパラメーターはこの要素固有のものです。これらの詳細については、この記事を参照してください。 #### General Settings \| **Button type**: ボタンタイプをText only、Text with icon、またはIcon onlyから選択します | | | | ------------------------------------ | | **Button text**: ボタンに表示したいテキストを入力します | ![](/files/cuL9prkxol6Z1z9P7jas) |\ \| **Enable full width**: ボタンの全幅を有効にするにはこれを選択します | | VISIBILITY、TRACKING、ATTRIBUTES、ANIMATIONパラメーターの詳細については、[こちら](https://help.pagefly.io/manual/elements-general-settings/)を参照してください。 #### Styling Settings Stylingタブの詳細については、[こちら](https://help.pagefly.io/manual/elements-style-settings/)を参照してください。 ### Legacy Layout - プロダクトビュー詳細要素の設定方法 プロダクトビュー詳細要素には、最高のコンバージョン率を実現するためにコンテンツの表示を微調整できる多くのパラメーターが付属しています。 レイアウトで要素を選択すると、そのパラメーターが表示されます。 プロダクトビュー詳細要素をエディターページにドラッグアンドドロップすると、Product Sourceオプションとして以下の2つの選択肢があります。 * **Auto** * **Custom product** ![](/files/Nz3X6L4umFJyK4ee1NfC) [商品ページ](https://help.pagefly.io/manual/add-more-content-to-my-shopify-product-page/)にいてプロダクトビュー詳細要素を使用する場合、Product Sourceオプションを選択できることに注意してください。ただし、通常ページにいてこの要素を使用する場合、Product Sourceオプションは無効になり、Custom Productがデフォルトで選択されます。 Autoを選択すると、この商品ページを作成したときに割り当てられた商品がページエディターに表示されます。Product View Details要素を使用する場合、Autoオプションがデフォルトです。 顧客がView Detailsボタンをクリックすると、対応する商品ページに移動します。以下の例でライブページでの動作を見てみましょう。 ![](/files/sVlpTMQRIsWmVWwVZ2Zj) GeneralタブとStylingタブのパラメーターはこの要素固有のものです。これらの詳細については、この記事を参照してください。 #### General Settings \| **Button type**: ボタンタイプをText only、Text with icon、またはIcon onlyから選択します | | ![](/files/jaZYdjEHnBAljn6q4CPN) | | ------------------------------------ | | **Button text**: ボタンに表示したいテキストを入力します | ![](/files/oDuiMllUdJCASKG9jeG1) |\ \| **Enable full width**: ボタンの全幅を有効にするにはこれを選択します | ![](/files/zDRfN8AOiLsoZLE8tzyn) | VISIBILITY、TRACKING、ATTRIBUTES、ANIMATIONパラメーターの詳細については、[こちら](https://help.pagefly.io/manual/elements-general-settings/)を参照してください。 #### Styling Settings Stylingタブの詳細については、[こちら](https://help.pagefly.io/manual/elements-style-settings/)を参照してください。 ### 一般的なケース ホームページ、ランディングページ、ブログ記事ページなどの商品詳細セクション内でプロダクトビュー詳細要素を使用して、顧客を商品ページに誘導し、商品に関する詳細情報を提供することができます。 ### よくある質問 **1. プロダクトビュー詳細とプロダクト詳細の違いは何ですか？** [Shopify プロダクト詳細](https://help.pagefly.io/manual/shopify-elements-product-details/)要素は、Shopifyストアの任意の商品をページに配置できるように設計されています。一方、[プロダクトビュー詳細](https://help.pagefly.io/manual/shopify-elements-product-view-details/)要素は、対応する商品ページに商品の詳細を表示します。 **2. 対応する商品ページでプロダクトビュー詳細を見た人を追跡できますか？** はい、Google AnalyticsとFacebook Pixelsのトラッキングを使用して追跡できます。 ### 追加リソース * [Shopify 商品リスト | PageFlyでの作成方法](https://help.pagefly.io/manual/shopify-elements-product-list/) * [Shopify 商品タイトル | PageFlyでの編集方法](https://help.pagefly.io/manual/shopify-elements-product-title/) --- # 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-view-details.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.