成功
注目商品
商品ギャラリー、購入コントロール、補足コンテンツを任意のページに追加します。
- セクションとブロックに関するShopifyドキュメント
- バリアントセレクターブロックに関するCompany XYZドキュメント
- Buy buttonsブロックに関するCompany XYZドキュメント
- Complementary productsブロックに関するCompany XYZドキュメント
- Accordionブロックに関するCompany XYZドキュメント
- セクションの余白設定に関するCompany XYZドキュメント
- セクション背景設定に関するCompany XYZドキュメント
- 区切り線設定に関するCompany XYZドキュメント
- 表示設定に関するCompany XYZドキュメント
- レイアウト幅設定に関するCompany XYZドキュメント
ほとんどのページで、商品詳細と購入体験を完全に表示できます。このセクションでは、選択した商品のギャラリー、商品情報、柔軟なコンテンツブロックを組み合わせて、1つの商品を中心に、ランディングページ、ホームページのプロモーション、または編集的な商品特集を作成できます。テーマエディターでセクションとブロックがどのように機能するかの詳細については、セクションとブロックに関するShopifyドキュメントを参照してください。
まず Product を選択します。この選択により、セクション全体で使用されるギャラリー、タイトル、価格、説明、バリアント対応のコントロール、購入アクションが有効になります。
商品が選択されていなくても、レイアウトには一般的なコンテンツブロックを表示できますが、商品固有のブロックと購入コントロールは役立ちません。
ギャラリー設定
Section titled “ギャラリー設定”ギャラリー設定では、デスクトップとモバイルで商品メディアがどのように表示されるかを調整できます。デバイスごとに個別のアスペクト比を選択し、デスクトップの列バランスを調整し、ギャラリーを商品情報の左または右に配置できます。
ギャラリースタイルは、セクションの印象をすばやく変えます。複数画像のレイアウトは、複数の写真で詳細を比較する必要がある場合に適しています。一方、Slideshow は、より引き締まった、より制御された表示になります。テキストを優先したレイアウトにしたい場合や、代わりに個別の画像ブロックと動画ブロックに頼る予定がある場合は、None が便利です。
バリアント画像の動作は、購入者が別のバリアントを選択したときにギャラリーがどう反応するかを決定します。Default はメディアを選択したバリアントに連動させたままにし、None はギャラリーを変更せず、Variant only は選択したバリアントの画像のみを表示して、より集中した体験を作ります。
ズームと動画コントロールは、閲覧体験を洗練します。画像の詳細が重要な場合はライトボックスズームを使用し、動きが購入導線の妨げにならないよう、オートプレイは控えめに使ってください。
スライドショー設定
Section titled “スライドショー設定”これらの設定は、ギャラリーがスライドショーレイアウトを使用する場合に適用されます。スライドの表示、アニメーションのスタイルと速度、オートプレイ動作、ループ、ナビゲーションやページネーションの表示を制御できます。
デスクトップとモバイルのスライドショー列設定は、次のスライドがどの程度見えるかに影響します。小さい値は従来の1枚スライドのカルーセルに近い印象になり、大きい値はさらに多くのメディアがあることを示します。
フェードアニメーションは、より落ち着いた編集的な表示を作りますが、同時に1枚スライドのレイアウトを強制し、複数スライドの動きに依存するページネーションスタイルを非表示にします。よりインタラクティブなギャラリーの印象にしたい場合は、デフォルトのアニメーションスタイルを使用してください。
対応ブロックタイプ
Section titled “対応ブロックタイプ”- App
- Accordion
- Buy buttons
- Benefits
- Button
- Contact form
- Complementary products
- Custom liquid
- Description
- Heading
- Icon with text
- Image
- Price
- Quantity selector
- Rich text
- Separator
- Social media icons
- Title
- Testimonial
- Variant selector
- Video
ブロックガイダンス
Section titled “ブロックガイダンス”メインの商品購入ブロック
Section titled “メインの商品購入ブロック”これらのブロックは、このセクションの基本的な購入フローを作成します。
- Title: 商品名と、共有または印刷アクションのオプション。
- Price: 価格と、オプションのポリシーメッセージ。
- Description: 主な商品説明。長い文章に対応する展開オプションを含みます。
- Variant selector: サイズや色などのオプション選択。
- Quantity selector: 数量コントロールと在庫対応メッセージ。
- Buy buttons: カートに追加と関連する購入アクション。
基本の構成は、Title、Price、Description、Variant selector、Quantity selector、Buy buttons の順がおすすめです。まずはそこから始め、購入者の判断をより早めるのに役立つ場合のみ、補助ブロックを追加してください。
バリアントセレクター
Section titled “バリアントセレクター”Variant selector ブロックは、購入者が商品オプションをどのように選ぶかを制御します。バリアントセレクターに関するCompany XYZドキュメントを参照してください。
コンパクトなレイアウトにしたい場合は、ドロップダウンを使用します。オプションが視覚的な場合や、より速い比較が重要な場合は、ピルまたはスウォッチを使用します。
カラーまたは画像スウォッチを有効にする場合は、オプション名が実際のバリアントオプション名と一致していることを確認してください。画像スウォッチは、同じオプションに対して両方が設定されている場合、カラー スウォッチより優先されます。
Buy buttons ブロックは、主な購入アクションを追加します。購入ボタンに関するCompany XYZドキュメントを参照してください。
エリアはシンプルに保ってください。追加のチェックアウトボタン、受け取り詳細、配送メッセージ、支払いアイコン、分割払いメッセージは役立つことがありますが、カートに追加ボタンの周りに多すぎる要素があると、主アクションが弱まる可能性があります。
関連アドオン商品
Section titled “関連アドオン商品”Complementary products ブロックは、注目商品と相性のよい関連アイテムを表示します。関連アドオン商品に関するCompany XYZドキュメントを参照してください。
これは、追加商品、アクセサリー、詰め替え、または定期的なクロスセルに最適です。アイテムはグリッドまたはスライドショーで表示でき、カードレイアウトをページに合わせて調整できます。
補助コンテンツブロック
Section titled “補助コンテンツブロック”補助ブロックは、反論への対応、信頼性の追加、または商品により多くの背景情報を与えるために使用します。
- Accordion: FAQ、素材、お手入れの詳細、配送情報、またはポリシー要約。アコーディオンに関するCompany XYZドキュメントを参照してください。
- Benefits と Icon with text: 保証、配送特典、商品のハイライトなどの短い価値訴求。
- Testimonial: 購入コントロールの近くで社会的証明を示します。
- Image と Video: メインギャラリー外の追加メディア。
- Button、Rich text、Heading、Separator: カスタムのページ構成。
高度なブロックとユーティリティブロック
Section titled “高度なブロックとユーティリティブロック”一部のブロックは、特定の用途にのみ使用するのが最適です。
- App: アプリで動作する商品機能。
- Custom liquid: 高度なカスタム出力や連携。
- Contact form: コンサルティング、受注生産、または事前問い合わせのフロー。
- Social media icons: 商品の近くにブランドコミュニティへのリンクを表示。
標準セクション設定
Section titled “標準セクション設定”余白設定 は、このセクションの上下のスペースを制御します。この商品機能が密度の高いランディングページ内にある場合は余白を小さめにし、主要なコンバージョン領域として目立たせたい場合は余白を大きくしてください。
セクション背景設定
Section titled “セクション背景設定”セクション背景設定 では、セクション全体の背後に色、グラデーション、画像、または動画を追加できます。商品機能をヒーローバンドのように見せたい場合や、明確に分離されたプロモーション領域にしたい場合に便利です。
要素の多い商品ギャラリーの背後に、細部が多い背景を使う場合は注意してください。レイアウトがより視覚的になるほど、強いコントラストと十分な余白が重要になります。
区切り線設定
Section titled “区切り線設定”区切り線設定 は、セクションの上または下に区切り線を追加します。別の大きなデザイン要素を追加せずに、この商品機能を周囲のコンテンツと分けるのに使用します。
表示設定 は、セクションをデスクトップ、モバイル、またはその両方に表示するかを制御します。異なる画面サイズ向けに異なる商品機能レイアウトを使いたい場合に特に便利です。
幅設定 は、最大コンテンツ幅とセクション外側の幅を制御します。これらの設定は、ギャラリーのバランス、テキストの読みやすさ、購入エリアのゆったり感に明確に影響します。
エディタのプレビューでは、幅の変更が実際のライブページよりも制約されて見えることがあります。そのため、レイアウトを確定する前に実際のストアフロントを確認してください。
使用上の注意
Section titled “使用上の注意”- まず購入導線を構築します。 追加コンテンツを入れる前に、Title、Price、Variant selector、Quantity selector、Buy buttons から始めてください。
- ギャラリーを商品に合わせます。 詳細の多い商品には複数画像レイアウトを、より引き締まった制御された表示にはスライドショーを使用してください。
- バリアントの動作を明確にします。 バリアントに固有の画像がある場合は、Variant selector と、その視覚的な違いをわかりやすくするギャラリー設定を組み合わせてください。
- 補助ブロックでためらいを減らします。 購入者が次の判断をより早く行える場合は、アコーディオン、Benefits、Testimonial、または Complementary products を追加してください。
- モバイルレイアウトを注意深く確認します。 このセクションは小さい画面では1列表示に折りたたまれるため、公開前にメディアの順序、コンテンツ量、ボタンの目立ちやすさを確認してください。
- スライド状態と非スライド状態の両方を確認します。 ブロックを追加したりギャラリースタイルを切り替えたりすると、セクションはシンプルな商品レイアウトから、よりコンテンツ中心またはカルーセル主体の体験に変わることがあります。
- レコメンドは条件付きとして扱います。 補完商品コンテンツは、適切な商品コンテキストと利用可能なレコメンドに依存するため、レイアウトを壊さずにブロックが表示されない余地を残してください。
- デスクトップとモバイルを個別に比較します。 レイアウト、配置、メディアの表示、スライドショーコントロールはブレークポイントごとに異なる動作をする場合があるため、公開前に両方の表示を確認してください。
- 明示的なビジュアル上書きは意図して使います。 空の値やデフォルトスタイルの値は通常、テーマのフォールバックスタイルを保持しますが、カスタムカラー、グラデーション、またはデスクトップとモバイルで別々のメディアを使うと、このセクションをより自己完結させられます。