商品ページ
商品ページは、ストアで販売する商品に関する情報を表示し、お客様が商品を購入できる場所です。
商品ページにはデフォルトで、テーマエディタでの [商品情報] セクションと [関連商品] セクションが用意されています。
商品情報セクション
[商品情報] セクションには、タイトル、説明、価格、画像など、商品の詳細が表示されます。
商品情報セクションの設定
| 設定 | 説明 |
|---|---|
| デスクトップ上のコンテンツ固定表示を有効にする | ページを下にスクロールしても、すべての画像がスクロールされるまで商品情報の列のスクロールは開始されません。 |
| カラースキーム | このセクションに適用する色のセットです。カラースキームの詳細はこちらを参照してください。 |
| デスクトップメディアの幅 | デスクトップコンピューターでの商品ページに表示する商品メディアの幅を設定します。[小]、[中]、[大] から選択します。 |
| メディアを画面の高さに制限する | このオプションを選択すると、デバイスのブラウザウィンドウの高さに応じてメディアの高さの最大値が設定されます。 |
| 適合したメディア | メディアのオリジナルのアスペクト比を維持する場合は [オリジナル] を選択し、メディアをコンテナーに適合させる場合は [全体] を選択します。 |
| デスクトップのレイアウト |
デスクトップコンピューターで表示する商品メディアのレイアウトを以下のオプションから選択します。
|
| デスクトップのメディア位置 | デスクトップコンピューターで、商品メディアをページの左右どちら側に表示するかを選択します。 |
| 画像ズーム | デスクトップで画像を拡大する方法を選択します。
|
| モバイルのレイアウト | モバイルデバイスでの商品メディアのレイアウトを設定します。以下のオプションから選択します。
|
| バリエーションを選択した後、他のバリエーションのメディアを非表示にする | バリエーションを選択すると、他のバリエーションの画像は非表示になります。バリエーションの選択を解除すると、画像は再表示されます。 |
| ビデオループを有効にする | 商品メディアにビデオが含まれる場合、この設定ではビデオがループで再生され、ビデオが終了すると自動的に初めから再生されます。 |
| 上部の余白 | セクションの上部の余白の量を設定します。 |
| 下部の余白 | セクションの下部の余白の量を設定します。 |
[商品情報] セクションの設定と同様に、商品バッジのテーマ設定の一部を表示およびカスタマイズし、独自のセクション固有のカスタムCSSを追加することもできます。
商品情報のブロック
[商品情報] セクションでは、以下のブロックを使用できます。
- テキスト
- Title
- 価格
- バリエーションピッカー
- 数量セレクター
- 購入ボタン
- 説明
- 提供する
- SKU
- 在庫ステータス
- カスタムLiquid
- 折りたたみ可能な行
- ポップアップ
- 商品評価
- 付加的な商品
- テキスト付きアイコン
テキストブロック
テキストブロックは、静的テキスト、または動的ソースを使用した可変データを表示するために使用できます。たとえば、 「100米ドル以上の注文には無料配送」などのマーケティングメッセージを表示するテキストを追加し、各商品に表示することができます。テキストブロックを使用すると、表示されている商品に応じて変化する動的なソースを追加できます。たとえば、テキストブロック内の商品の販売元フィールドを動的ソースとして接続し、商品に固有の販売元を表示できます。
| 設定 | 説明 |
|---|---|
| テキスト | 商品ページに情報を追加するテキストフィールド。 |
| テキストスタイル |
テキストのスタイルを変更します。以下のオプションから選択します。
|
[タイトル] ブロックには、表示中の商品のタイトルが表示されます。このブロックにはカスタマイズ可能な設定はありません。
価格のブロック
[価格] ブロックには、表示されている商品の価格情報 (価格および割引前価格など) が表示されます。このブロックにはカスタマイズ可能な設定はありません。
バリエーションピッカーのブロック
バリエーションピッカーブロックには、閲覧中の商品のバリエーションのオプションが表示されます。バリエーションピッカーはバリエーションのオプションがある商品のみ表示されます。このブロックを削除すると、バリエーションのオプションを含む商品がある場合、お客様は希望するバリエーションのオプションを選択または購入できなくなります。ドロップダウンまたはピル型の選択肢を表示するバリエーションピッカーブロックを追加し、色見本の形状をカスタマイズできます。カテゴリメタフィールドを使用してバリエーションに色見本を追加する方法について、詳しくはこちらをご覧ください。
| 設定 | 説明 |
|---|---|
| スタイル |
商品バリエーションをお客様に表示する方法を選択します。以下のオプションから選択します。
|
| 見本 |
お客様にカラー見本を表示する方法を選択します。以下のオプションから選択します。
|
[数量セレクター] ブロックには、お客様が購入したい商品の個数を変更するために使用できる、クリックおよび編集可能な数値フィールドが表示されます。このブロックにはカスタマイズ可能な設定はありません。
購入ボタンのブロック
[購入ボタン] ブロックには、[カートに追加] ボタンと店舗受取情報が表示されます。また、ストアにある動的チェックアウトボタンを表示することもできます。
| 設定 | 説明 |
|---|---|
| 動的チェックアウトボタンを表示する | [決済] 設定で有効にした動的チェックアウトオプションが表示されます。 |
| ギフトカードの受取人情報フォームを表示する | ギフトカード商品にオプションのチェックボックスを表示して、お客様がメッセージとともに受取人にギフトカードを送信したり、送信日程を設定したりできるようにします。 |
[説明] ブロックには、表示されている商品の説明が表示されます。このブロックにはカスタマイズ可能な設定はありません。
共有のブロック
[共有] ブロックでは、お客様がSNSで商品を共有できるクリック可能なリンクが表示されます。
| 設定 | 説明 |
|---|---|
| テキスト | お客様がクリックして商品をSNSに共有するテキスト。 |
[SKU] ブロックには、商品またはバリエーションに関連する最小管理単位 (SKU) が表示されます (関連がある場合)。商品バリエーションにSKU番号を追加する詳細についてはこちらをご覧ください。
| 設定 | 説明 |
|---|---|
| テキストスタイル |
テキストのスタイルを変更します。以下のオプションから選択します。
|
[在庫ステータス] ブロックには、商品の在庫ステータスが表示されます。在庫ステータスと残りの在庫数を常に表示することも、商品の在庫数が設定したしきい値に達した時点でのみ表示することもできます。在庫ステータスは、在庫追跡が有効になっている商品についてのみ表示されます。
| 設定 | 説明 |
|---|---|
| テキストスタイル |
テキストのスタイルを変更します。以下のオプションから選択します。
|
| 低在庫基準値 | 範囲スライダーを使用して、[低在庫] メッセージとともに商品を表示する際のしきい値を設定します。0～100の数字を選択します。スライダーを0に設定すると、商品が完全に在庫切れになるまで [在庫あり] と表示されます。 |
| 在庫数を表示 | 商品の在庫数を表示する場合は、このオプションを選択します。 |
[カスタムLiquid] ブロックには、ブロックに追加したカスタムのLiquidコードまたはHTMLコードが表示されます。
| 設定 | 説明 |
|---|---|
| Liquidコード | 入力したLiquidコードまたはHTMLコードによってレンダリングされるコンテンツを表示します。 |
[折りたたみ可能な行] ブロックには、タイトルのついた展開/折りたたみ可能な行が表示されます。お客様がアイコン、タイトル、または下矢印をクリックすると、行が展開され、追加のコンテンツが表示されます。
| 設定 | 説明 |
|---|---|
| 見出し | 行のタイトル。行の折りたたみ時と展開時の両方で表示されます。 |
| アイコン | 折りたたみ可能な行で表示するアイコンを選択します。[なし] を選択すると、行のタイトルのみが表示されます。 |
| 行のコンテンツ | リッチテキストエディタを使用して行のコンテンツを入力します。コンテンツは、行が展開された場合にのみ表示されます。 |
| ページからの行のコンテンツ | ページから行にコンテンツを追加します。これにより、管理画面の [オンラインストア] > [ページ] セクションでページに追加したコンテンツのみが表示されます。テーマエディタでページテンプレートに追加したコンテンツは表示されません。[行のコンテンツ] フィールドに入力したコンテンツは、追加したページコンテンツの上に表示されます。 |
[ポップアップ] ブロックには、クリック可能なテキストが表示され、クリックするとポップアップダイアログが開きます。
| 設定 | 説明 |
|---|---|
| リンクラベル | お客様がクリックしてポップアップダイアログを表示するクリック可能なテキスト。 |
| ページ | ポップアップダイアログでコンテンツを表示するページを選択します。これにより、管理画面の [オンラインストア] > [ページ] セクションでページに追加したコンテンツのみが表示されます。テーマエディタでページテンプレートに追加したコンテンツは表示されません。 |
[商品評価] ブロックには、商品の平均評価が星印で、レビュー数が括弧内に表示されます。例：★★★★★ (8)。
商品評価を表示するには、商品レビューアプリと、reviews.rating_countおよびreviews.ratingのメタフィールド定義を使用する必要があります。
このブロックにはカスタマイズ可能な設定はありません。
付加的な商品のブロック
[付加的な商品] ブロックには、Shopify Search & Discoveryアプリで設定した付加的な商品が表示されます。
| 設定 | 説明 |
|---|---|
| 見出し | ブロックのタイトル。 |
| 折りたたみ可能な行として表示する | この設定を選択すると、コンテンツは行内で折りたたまれた状態で表示されます。お客様がタイトルをクリックすると、行が展開されて追加のコンテンツが表示されます。 |
| アイコン | 付加的な商品を折りたたみ可能な行内で表示する場合の、タイトルと対になるアイコンを選択します。 |
| 表示する商品の最大数 | 表示する付加的な商品の最大数を選択します。1～10の数字を選択してください。 |
| 1ページあたりの商品数 | スライダーページごとに表示する付加的な商品の数を選択します。1～4の数字を選択します。 |
| ページネーションのスタイル | 商品の下に表示されるスライダーメニューのスタイルを設定します。[ドット]、[カウンター]、[数字] から選択します。 |
| 画像比 | 商品カード画像のアスペクト比を設定します。[ポートレート] または [正方形] から選択します。 |
| [クイック追加] ボタンを有効にする |
クイック追加ボタンを有効にした場合、お客様は次のいずれかのオプションを使用して、商品カードからカートにアイテムを追加できます。
|
[テキスト付きアイコン] ブロックには、最大3つのアイコンが付随するテキストとともに表示されます。プリインストールされているアイコンのリストから選択するか、アップロードした画像を使用します。
| 設定 | 説明 |
|---|---|
| レイアウト | ブロックの [水平] レイアウトまたは [垂直] レイアウトから選択します。 |
| 最初のアイコン | ブロックに表示するアイコンを選択するか、[なし] を選択するとタイトルのみが表示されます。 |
| 最初の画像 | アイコンの代わりに使用する画像を選択します。 |
| 最初の見出し | 最初のアイコンまたは画像のタイトルを追加します。 |
| 2番目のアイコン | ブロックに表示するアイコンを選択するか、[なし] を選択するとタイトルのみが表示されます。 |
| 2番目の画像 | アイコンの代わりに使用する画像を選択します。 |
| 2番目の見出し | 2番目のアイコンまたは画像のタイトルを追加します。 |
| 3番目のアイコン | ブロックに表示するアイコンを選択するか、[なし] を選択するとタイトルのみが表示されます。 |
| 3番目の画像 | アイコンの代わりに使用する画像を選択します。 |
| 3番目の見出し | 3番目のアイコンまたは画像のタイトルを追加します。 |
表示されている商品に基づいて、[関連商品] セクションには、類似の商品、同様の説明を含む商品、表示されている商品とともによく購入される商品が表示されます。Shopify Search & Discoveryアプリを使用して、独自の商品を [関連商品] セクションに手動で追加できます。
おすすめ商品について詳しくは「おすすめ商品を理解する」を参照してください。
関連商品セクションの設定
| 設定 | 説明 |
|---|---|
| 見出し | セクションのタイトル。 |
| 見出しのサイズ | タイトルテキストのサイズ。[小]、[中]、[大]、[特大]、[4L] のいずれかを選択します。 |
| 表示する商品の最大数 | 表示する関連商品の最大数を設定します。2～10の数字を選択します。 |
| デスクトップでの列数 | デスクトップコンピューターで表示する商品の列数を設定します。1～6に設定します。 |
| カラースキーム | このセクションに適用する色のセットです。カラースキームの詳細はこちらを参照してください。 |
| 画像比 | 表示される関連商品の記事のサムネイルの画像比を設定します。以下のオプションから選択します。
|
| 画像の形状 | 関連する商品画像の形状を次のいずれかから選択します。
|
| マウスオーバー時に2番目の画像を表示する | お客様がデスクトップコンピューターで商品画像にカーソルを合わせると、商品に2枚目の商品画像がある場合は、その画像が表示されます。 |
| 販売元を表示する | 各商品の販売元を表示します。 |
| 商品の評価を表示 | 商品の平均評価を星印で、レビュー数を括弧内に表示します。例：★★★★★ (8)。これには商品レビューアプリも必要であり、メタフィールド定義もreviews.rating_countとreviews.ratingに対して必要です。 |
| モバイルでの列数 | モバイルデバイスで表示する商品の列数を設定します。1列または2列に設定します。 |
| 上部の余白 | セクションの上部の余白の量を設定します。 |
| 下部の余白 | セクションの下部の余白の量を設定します。 |