> 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-details.md).

# 商品詳細

### 商品詳細エレメントについて

**概要：** [Shopifyの商品詳細](https://help.pagefly.io/manual/shopify-elements-product-details/)エレメントは、コンバージョン率を高めるために、Shopifyストアのあらゆる商品をページに配置できるように設計されています。商品詳細エレメントを使用して、非商品ページで商品を宣伝したり、商品ページでShopifyのデフォルトの商品エレメントが気に入らない場合に使用したりすることができます。

{% hint style="info" %}
このエレメントはページで頻繁に使用でき、異なる商品に割り当てることができることに注意してください。
{% endhint %}

詳細については、以下のビデオチュートリアルを確認してください。

{% embed url="<https://youtu.be/jeCafYvfPV8>" %}

### Shopify商品詳細エレメントへのアクセス方法

* **ステップ1：** エレメントカタログ（左サイドバー）の**エレメント**アイコンをクリックします。
* **ステップ2：** エレメントセクションで、Shopifyタブに切り替え、ドロップダウンメニューの**商品詳細**エレメントをクリックします。
* **ステップ3：** エレメントをページエディタにドラッグ＆ドロップし、使用を開始します。

![](/files/kDFkS8Wbloh3cL65VfQF)

{% hint style="info" %}
**注：** このエレメントを[商品ページ](https://help.pagefly.io/manual/add-more-content-to-my-shopify-product-page/)タイプで使用すると、ページに2つの商品エレメントが表示されます。Shopifyの商品エレメントは、ストアの現在のテーマによってコードが異なるため、ライブサポートに問い合わせて取得できるカスタムコードで削除可能です。
{% endhint %}

**商品詳細**エレメントには2つの一般的なバリエーションがありますが、時間を節約するために今後もバリエーションを追加していきます。

![](/files/AdXmey96GcCoJi3INIUi)

{% hint style="info" %}
このエレメントは、サイドバーで見つける代わりに検索機能を使用して検索できることに注意してください。
{% endhint %}

### 商品詳細エレメントの設定方法

Shopifyの商品詳細エレメントには、可能な限り最高のコンバージョン率を得るためにコンテンツの外観を微調整できる多くのパラメータが付属しています。

#### 一般設定

**商品ソース：** 商品詳細エレメントをエディタページにドラッグ＆ドロップすると、商品ソースオプションとしてAuto（自動）とCustom product（カスタム商品）の2つの選択肢が表示されます。

* 商品ソースが「**Auto**」に設定されている場合、商品ページにのみ表示され、そのページに割り当てた特定の商品に基づいて機能します。他のページタイプでは、ソースを選択する必要があります。「**Auto**」ソースオプションを使用すると、複数の商品に割り当てることができる商品ページテンプレートを作成できます。

{% hint style="info" %}
**注：** 「**Auto**」ソースオプションでは、プレビューで商品は確認されません。プレビューしたい場合は、テストするために特定の商品を割り当てる必要があります。
{% endhint %}

![](/files/f4AozsusyiS0Ag4CJOCx)

* Custom Productを選択した場合、「**Select product**」ボタンをクリックして、目的の特定の商品を選択できます。

{% hint style="info" %}
**ご注意ください：**

* 商品ソースの「Custom product」オプションは、このページの商品のみを変更します。「Page assignment」セクションに割り当てられた他の商品には影響しません。
* 商品ページにいて商品詳細エレメントを使用する場合、商品ソースオプションを選択できます。ただし、通常ページにいてこのエレメントを使用する場合、商品ソースオプションは無効になり、Custom Productがデフォルトで選択されます。
  {% endhint %}

**Custom Product**を使用する際に新しいオプションがあります。それがDefault variantオプションです。このオプションを使用すると、顧客が見ることができるライブページに表示したいバリアントのリストから商品のバリアントを選択できます。

![](/files/M0C9RAGIOva386TRBkMw)

**ATTRIBUTES、VISIBILITY、およびANIMATION**パラメータに関する詳細情報は[こちら](https://help.pagefly.io/documentation/pagefly-elements-general-settings/)から入手できます。

#### スタイリング設定

スタイリングタブを使用すると、商品詳細エレメントの外観をカスタマイズして、ブランドのデザインに合わせることができます。ここでは、サイズ、レイアウト、全体、間隔、タイポグラフィ、背景、境界線、エフェクト、詳細設定など、さまざまな視覚的側面を調整して、エレメントを目立たせ、プロフェッショナルに見せることができます。

利用可能なオプションの詳細については、[スタイリングタブガイド](https://help.pagefly.io/manual/elements-style-settings/)をご覧ください。

商品詳細エレメント内には、他のサブエレメントがあります。詳細については、以下の記事を参照してください。

* [Shopify商品概要エレメント](https://help.pagefly.io/manual/shopify-elements-product-description/)
* [Shopify商品メディアエレメント](https://help.pagefly.io/manual/shopify-elements-product-media/)
* [Shopify商品価格エレメント](https://help.pagefly.io/manual/shopify-elements-product-price/)

### 商品詳細エレメントの使用に関するベストプラクティス

* 名前、価格、サイズ、色のバリエーション（該当する場合）、在庫状況（在庫ありまたは在庫なし）など、必須の商品詳細情報を表示することを優先します。
* 商品詳細情報を論理的に構成し、各情報カテゴリ（例：素材、寸法、手入れ方法）に箇条書き、表、または明確な見出しを使用します。
* 高品質の商品画像を組み込み、ユーザーが視覚的に商品詳細を確認できるようにズーム機能の追加を検討します。

### よくある質問

**1. Shopifyの商品詳細エレメントとは何ですか？**

Shopifyの商品詳細は、サイズ、色、価格、配送情報、レビュー、その他の関連情報など、商品に関するすべての情報を含みます。基本的には、顧客が購入前に知りたいすべての情報です。

**2. Shopifyの商品詳細と商品概要の違いは何ですか？**

Shopifyの商品概要は、商品のメリットを説明するためのものです。Shopifyの商品詳細は、商品名、価格、概要、チェックアウトボタンなど、商品全体のパッケージです。

**3. sectionとflex section (Gen 2)の違いは何ですか？**

Sectionsを使用すると、行-列コンテナ構造でページレイアウトを設計でき、PageFly SectionsとPageFlyページのどちらにも追加できます。一方、Flex sectionsには行-列構造がありません。これは、PageFlyページに直接エレメントを追加でき、Flexブロックによってより柔軟なカスタマイズされたレイアウトを可能にします。

### バージョンアップデート

{% hint style="warning" %}
**重要事項：** Gen 2レイアウトは、ペイ・アズ・ユー・ゴー料金モデル（[スロットプラン](https://help.pagefly.io/manual/pricing-plans/)）でのみ利用可能になります。
{% endhint %}

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

### 追加リソース

* [コンバージョンにつながるプロフェッショナルなサイトのための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-details.md?ask=<question>
```

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.