サイトで商品を表示するさまざまな方法を比較します。

ストア ページと商品ブロックを使用して、サイトに商品を表示できます。ストア ページは、商品を追加し、ストア レイアウトを構築するための主要な方法です。商品ブロックは、既存のストア ページからの個々の商品をブログ投稿やレイアウト ページなどに表示します。どちらのオプションでも、商品をクリックすると、詳細、寸法、画像、バリエーションを含む商品詳細ページが開きます。

ストア ページと商品ブロックがどのように違うのかについてよく質問を受けます。このガイドでは、主な相違点、ベスト プラクティス、およびどちらかをサイトに追加する際の考慮事項について説明します。

ストア ページ

ストア内の商品を追加および編集するには、ストア ページを使用します。ストア ページには、複数のアイテムがまとまったレイアウトで表示されます。ストア ページのレイアウトはテンプレートによって異なり、通常はカテゴリー ナビゲーション、ホバー効果、商品のアイテム ページからメイン ストア ページに戻る自動ナビゲーションのオプションが含まれます。

複数のストア ページ、タグ、カテゴリーを追加して商品をさまざまなコレクションに整理できます。[サイト スタイル] パネルでストア ページをカスタマイズすることもできます。

以下は、Supplyテンプレートのストア ページの例です。

いずれかの商品をクリックすると、その商品の詳細ページが表示されます。これには、追加情報、バリエーション ドロップダウン メニュー、[カートに追加] ボタンなどを含めることができます。

商品ブロック

ページ、ブログ投稿、またはその他のコンテンツ エリアに既存の商品を表示するには、商品ブロックを使用します。各商品ブロックには1つの商品が表示されます。商品ブロックは、サイト全体で特別商品、新商品、セール商品を宣伝するのに最適です。

商品ブロックを使用して新しい商品を作成することはできません。代わりに、商品ブロックは、ストア ページに追加された既存の商品から情報を取得します。つまり、商品ブロックを使用する場合は、まずそれらの商品をストア ページに追加する必要があります。

商品ブロックを他のブロックと組み合わせて、テンプレートのストア ページのデザインを超えてカスタマイズされたレイアウトを作成できます。たとえば、テンプレートでは使用できないレイアウトを作成するには、ページ上で複数の商品ブロックを使用し、それらのブロックが取り込まれるストア ページを [リンクなし] セクションに移動して、ナビゲーション メニューに表示されないようにします。

ブロックに含める詳細は、商品の画像、タイトル、説明、価格、および [カートに追加] ボタンを表示または非表示にすることでカスタマイズできます。

以下は、ブログ投稿の商品ブロックの例です。