成功
商品情報
メディア、バリエーション、購入コントロール、補足情報を備えたメイン商品ページをカスタマイズします。
- セクションとブロックに関するShopifyドキュメント
- メタフィールドと動的ソースに関するShopifyドキュメント
- タイトルブロックに関するCompany XYZドキュメント
- 価格ブロックに関するCompany XYZドキュメント
- バリエーションセレクターブロックに関するCompany XYZドキュメント
- 数量セレクターブロックに関するCompany XYZドキュメント
- 購入ボタンブロックに関するCompany XYZドキュメント
- 説明ブロックに関するCompany XYZドキュメント
- アコーディオンブロックに関するCompany XYZドキュメント
- 関連商品ブロックに関するCompany XYZドキュメント
- セクションの余白設定に関するCompany XYZドキュメント
- セクション背景設定に関するCompany XYZドキュメント
- 区切り線設定に関するCompany XYZドキュメント
- レイアウト幅設定に関するCompany XYZドキュメント
このセクションは、商品テンプレートにおけるメインの商品詳細エリアです。商品ギャラリーとカスタマイズ可能なコンテンツブロックのスタックを組み合わせることで、購入者によるメディアの閲覧、オプションの比較、詳細の確認、購入への移行方法を管理できます。テーマレイアウト構築の概要については、セクションとブロックに関するShopifyドキュメントを参照してください。
このセクションは、ブロックごとに並べ替えられるように設計されています。ほとんどの構成では、タイトル、価格、バリエーションセレクター、数量セレクター、購入ボタンの順に配置し、その後に説明、アコーディオン、信頼性を高めるブロックなどの補足コンテンツを置くのが効果的な開始構成です。
カタログに大きく異なる商品タイプが含まれている場合、このセクションでは、商品ごとにコンテンツの重点を調整しながら、一貫したページ構造を維持できる柔軟性が得られます。
ギャラリー設定
Section titled “ギャラリー設定”ギャラリー設定では、デスクトップとモバイルでの商品メディアの表示方法を管理します。アスペクト比、ギャラリーとコンテンツ列のバランス、大きな画面でのギャラリー位置、各デバイスで使用するギャラリースタイルを変更できます。
デスクトップでは、ギャラリーをどちら側に表示するか、どの列により多くのスペースを割り当てるかなど、より細かくレイアウトを管理できます。モバイルでは、セクションは常に1列に積み重なるため、主な判断事項は、小さな画面で閲覧しやすいギャラリースタイルを選ぶことです。
写真、仕上げ、細部の確認が重要な商品には、より視覚的なギャラリースタイルを使用してください。仕様、バリエーションの選択、長い商品説明を優先する必要がある場合は、よりシンプルなレイアウトを使用してください。
ギャラリーは、バリエーションの変更に応じて反応させることもできます。これは、選択したオプションによって表示メディアをすぐに変更したい、色や仕上げを基準とする商品に特に便利です。
バリエーションに基づくギャラリー動作には、このセクション内の Variant selector ブロックが必要です。これがない場合、オプションの変更によってギャラリーは更新されません。
ズームと動画コントロールは、メディアの閲覧体験を調整するのに役立ちます。ライトボックスズームは、テクスチャや細部を確認する必要がある場合に適しています。一方、自動再生動画は、長いデモンストレーションよりも短いクリップに適しています。
スライドショー設定
Section titled “スライドショー設定”これらの設定は、ギャラリーでスライドショーレイアウトを使用する場合に適用されます。表示するスライドの幅、アニメーションのスタイルと速度、自動再生、ループ、ナビゲーション、ページネーションを管理できます。
次のスライドを一部プレビューできるスライドショーでは、多数のメディアセットをよりインタラクティブに見せることができます。フェードアニメーションに切り替えると、ギャラリーは単一スライドのプレゼンテーションに近い動作になるため、一部の複数スライド用インターフェースオプションはあまり役立たなくなります。
自動再生は、短い視覚的なシーケンスに適しています。購入者が静止画像を注意深く比較する必要がある商品では、通常、手動ナビゲーションの方が安全です。
対応ブロックタイプ
Section titled “対応ブロックタイプ”- App
- Accordion
- Buy buttons
- Benefits
- Button
- Complementary products
- Contact form
- Custom liquid
- Description
- Heading
- Icon with text
- Image
- Price
- Quantity selector
- Rich text
- Separator
- Social media icons
- Title
- Testimonial
- Variant selector
- Video
主要ブロックのガイダンス
Section titled “主要ブロックのガイダンス”Title ブロックには商品名が表示され、共有または印刷アクションも表示できます。通常、コンテンツスタックの最上部に配置すると効果的です。Title blockについて詳しく見る。
Price ブロックには現在の価格と、任意のポリシーメッセージが表示されます。購入者がスクロールして戻らなくても価格とオプションを比較できるよう、タイトルと購入コントロールの近くに配置してください。Price blockについて詳しく見る。
Variant selector
Section titled “Variant selector”Variant selector ブロックでは、購入者が商品オプションを選択でき、カラーまたは画像スウォッチも表示できます。また、セクションのバリエーションに基づくギャラリー動作も有効になります。Variant selector blockについて詳しく見る。
長いオプションリストには通常ドロップダウンが適しています。短く視覚的なオプションセットには、ピルまたはスウォッチが適しています。スウォッチを使用する場合は、オプション名が商品オプションの命名と正確に一致していることを確認してください。
Quantity selector
Section titled “Quantity selector”Quantity selector ブロックでは、数量コントロールと任意の在庫状況メッセージを追加できます。購入ボタンのすぐ上または下に配置すると、特に便利です。Quantity selector blockについて詳しく見る。
在庫僅少メッセージを有効にする場合は、信頼でき、商品に適した印象になるよう、しきい値を十分に低く設定してください。
Buy buttons
Section titled “Buy buttons”Buy buttons ブロックは、メインの購入アクションエリアです。追加のチェックアウトボタン、送料無料の詳細、店舗受け取り情報、決済アイコン、ギフトカード受取人オプション、分割払いメッセージ、スクロール時のスティッキーバーも表示できます。Buy buttons blockについて詳しく見る。
購入に関する補足情報は、必要なものだけを選んで使用してください。メインボタンの周囲にアドオンを配置しすぎると、特にモバイルで購入エリアが雑然として見えることがあります。
ここでボタンの色を上書きする場合は、プライマリアクションが目立ち、読みやすい状態を維持できるよう、デフォルト状態とホバー状態の両方を確認してください。
Description
Section titled “Description”Description ブロックにはメインの商品説明が表示され、展開可能にすることもできます。Description blockについて詳しく見る。
展開可能な説明は、長い商品説明に適しています。短い説明の場合は、最初から全文を表示する方がシンプルに感じられることが多いです。
Accordion
Section titled “Accordion”Accordion ブロックは、よくある質問、素材、お手入れ方法、サイズガイド、配送の詳細に便利です。直接入力したコンテンツを使用することも、他のコンテンツソースから取得することもできます。Accordion blockについて詳しく見る。
すべてを1つの長いパネルにまとめるのではなく、トピックを別々の行に分けてください。そうすると、補足情報をより簡単に確認できます。商品データから取得するコンテンツについては、メタフィールドと動的ソースに関するShopifyドキュメントを参照してください。
Complementary products
Section titled “Complementary products”Complementary products ブロックでは、現在の商品と組み合わせて購入できる関連商品を追加できます。アクセサリー、詰め替え商品、定期的な追加購入に適しています。Complementary products blockについて詳しく見る。
このブロックを密度の高い商品ページ内に表示する場合は、コンパクトなレイアウトを選択してください。スライドショーレイアウトを使用する場合は、レコメンデーションが隠れているように感じられないよう、ナビゲーションを表示したままにしてください。
補足コンテンツブロック
Section titled “補足コンテンツブロック”残りのブロックを使用して、商品のストーリーと購入フローに合わせてページを調整してください。
- Benefits、Icon with text、または Testimonial を使用して、信頼性と価値を強調します。
- Image または Video を使用して、情報列内に補足的なビジュアルコンテンツを追加します。
- Rich text、Heading、Separator を使用して、長いコンテンツをより明確に構成します。
- サイズガイドやお手入れページなどの補足アクションには、Button を使用します。
- Social media icons、Contact form、Custom liquid、または App ブロックは、明確な商品ページの目的をサポートする場合にのみ使用してください。
標準セクション設定
Section titled “標準セクション設定”余白設定では、このセクションの上下の間隔を管理します。商品ページでは、余白を狭くすると通常、ギャラリーと購入コントロールが上部に近づきます。一方、余白を広くすると、よりエディトリアルな印象になります。
セクション背景設定
Section titled “セクション背景設定”セクション背景設定では、商品セクション全体の背後にカラー、グラデーション、画像、動画を追加できます。より強いブランド表現を作るのに役立ちますが、機能的なコンテンツを多く含むセクションでは、通常、控えめな処理が最も効果的です。
区切り線設定
Section titled “区切り線設定”区切り線設定では、セクションの上部または下部に任意の線を追加できます。商品エリアと周辺コンテンツをより明確に視覚的に分けたい場合に最も便利です。
幅設定では、コンテンツ幅と外側のセクション幅の両方を管理します。幅の広いレイアウトは画像中心の商品に適しています。一方、幅の狭いレイアウトは、テキストの多い商品ページの読みやすさを向上させることがあります。
エディター上では幅の変更を正確に判断しにくい場合があるため、重要なレイアウト変更を確定する前に、ライブページで確認してください。
使用上の注意
Section titled “使用上の注意”- 購入アクションをまとめる。 タイトル、価格、バリエーションセレクター、数量セレクター、購入ボタンを近くに配置し、購入者がページ内を探し回らずに操作できるようにしてください。
- メディアを商品に合わせる。 視覚的な商品にはより豊かなギャラリーレイアウトを使用し、オプション、仕様、説明により注意を向ける必要がある場合は、よりシンプルなギャラリーを使用してください。
- 補足情報にはアコーディオンを使用する。 よくある質問、素材、配送に関する注意、お手入れ情報を別々のアコーディオン行に移し、メインコンテンツエリアに集中できるようにしてください。
- モバイルの流れを確認する。 小さな画面ではセクションが1列になるため、メディアの順序、ブロックの積み重ね、購入ボタンの表示を注意深く確認してください。
- 両方のビューポートサイズを確認する。 デスクトップとモバイルのコントロールでは、レイアウト、配置、メディアの動作が異なる方法で変わることがあるため、公開前に両方の表示を確認してください。
- ブロックによる変更に注意する。 ブロックの追加や並べ替えによって商品ページのバランスが大きく変わることがあるため、コンテンツスタックを変更したらセクションを再確認してください。
- 実際の商品データでレコメンデーションを確認する。 関連商品コンテンツは、商品コンテキストと返される商品が利用可能な場合にのみ表示されるため、空の状態を設定の失敗とみなさないでください。
- エディター外でスタイル設定したレイアウトをプレビューする。 幅、背景、間隔の変更は、エディター内とライブページで異なって感じられることがあります。