ページの種類

各ページには、デフォルトのセクションと設定があります。

商品ページ

デフォルトでは、商品ページには[商品情報]セクションと[おすすめ商品]セクションがあります。

[商品情報]セクションには、次のデフォルトブロックが含まれています。

  • テキスト (デフォルトではvendor属性が表示されます)
  • Title
  • テキスト (デフォルトではproduct subtitle属性が表示されます)
  • 価格
  • バリエーションピッカー
  • 数量セレクター
  • 購入ボタン
  • 説明
  • 提供する

次のブロックを追加することもできます。

  • テキスト
  • カスタムLiquid
  • 商品評価
  • 折りたたみ可能なタブ
  • ポップアップ
  • 付加的な商品

[商品情報]セクションには、最大16個のブロックを含めることができます。

商品情報セクションの設定

商品情報セクションの設定
設定 説明
デスクトップ上のコンテンツ固定表示を有効にする ページを下にスクロールしても、すべての画像がスクロールされるまで商品情報の列のスクロールは開始されません。
デスクトップのレイアウト

商品メディアがデスクトップに表示される方法。

  • サムネイルカルーセル——商品に複数のメディアタイプがある場合,残りのメディアはメインの商品メディアの下のカルーセルにサムネイルとして表示されます。お客様はサムネイルをクリックしてメディアを読み込むか、カルーセルメニューの矢印を使用して他のメディアを表示することができます。
  • サムネイル——商品に複数のメディアタイプがある場合,残りのメディアはメインの商品メディアの下にサムネイルとして表示されます。お客様はサムネイルをクリックしてメディアを読み込むことができます。
  • スタック- すべての商品メディアが重なり合うように表示されます。スタックされたメディアタイプをクリックすると、ポップアップウィンドウが開き、選択したメディアが拡大表示されます。
  • デスクトップのメディアサイズ メディアサイズを、[小]、[中]、[大] から選択します。モバイルの場合、メディアは自動的に最適化されます。
    モバイルのレイアウト モバイルで、サムネイル画像の表示・非表示を選択します。
    バリエーションが選択された場合、他のバリエーションのメディアを非表示にする バリエーションを選択すると、その他のバリエーションの画像は非表示になります。バリエーションの選択を解除すると、画像は再表示されます。
    ビデオループを有効にする ビデオをループ再生されるように設定すると、ビデオが終了した時点で自動再生されます。
    セクションの余白 [商品情報] セクションの上部か下部に間隔を追加します。範囲スライダーを使用してスペースを0ピクセルから100ピクセルの間で設定し、[商品情報] の上か下に追加します。

    商品情報のブロック

    以下のブロックを[商品情報]セクションに追加できます。

    テキストブロック

    テキストブロックには、動的ソースを使用して静的テキストや変数データを表示できます。たとえば、「100米ドル以上で無料配送」のようなマーケティングメッセージを伝えるテキストを追加して、すべての商品で同じメッセージを表示できます。また、商品の[販売元]フィールドなどの動的ソースを追加して、閲覧されている商品に応じて異なる情報を表示できます。

    商品情報セクションのテキストブロックの設定
    設定 説明
    テキスト 商品ページに情報を追加します。テキストソースまたはダイナミックソースをサポートします。
    テキストスタイル

    テキストのスタイルを次のように変更します。

    • 本文- テキストを段落スタイルのテキストに変更します。
    • サブタイトル- テキストを段落スタイルのテキストよりも少し大きいサブタイトルテキストに変更します。
    • 大文字- テキストを段落スタイルのテキストよりも小さいサイズに変更し、すべての文字を大文字にします。

    タイトルのブロック

    このブロックでは、商品のタイトルが表示されます。調整可能な設定はありません。

    価格のブロック

    このブロックでは、価格や割引前価格など、商品の価格設定情報が表示されます。調整可能な設定はありません。

    バリエーションピッカーのブロック

    このブロックでは、商品のバリエーションのオプションが表示されます。

    商品情報セクションのバリエーションピッカーブロックの設定
    設定 説明
    タイプ

    バリエーションがお客様に表示される方法を次のように変更します。

    • ピル型ボタン- クリック可能なボタンとしてバリエーションを表示します。
    • ドロップダウン- 展開可能なドロップダウンメニューにバリエーションを表示します。

    購入ボタンのブロック

    このブロックには、「カートに追加する」ボタンと実店舗受け取り情報が表示されます。動的チェックアウトボタンを表示することもできます。

    商品情報セクションの購入ボタンブロックの設定
    設定 説明
    動的チェックアウトボタンを表示する [決済]設定で有効にした動的チェックアウトオプションを表示します。

    説明のブロック

    このブロックでは、商品の説明を表示します。調整可能な設定はありません。

    商品評価のブロック

    このブロックでは、商品の平均評価が星印と括弧内のレビュー数で表示されます。例: ★★★★★ (8)。

    商品評価を表示するには、Shopify Product Reviewsなどの商品レビューアプリ、およびreviews.rating_countreviews.ratingメタフィールド定義が必要です。

    付加的な商品のブロック

    このブロックには付加的な商品が表示されます。その商品はShopify Search & Discoveryアプリで設定する必要があります。

    商品情報セクションにある付加的な商品ブロックの設定
    設定 説明
    見出し

    ブロックのタイトル。

    折りたたみ可能な行として表示する

    この設定を選択すると、コンテンツは行タブの下に折りたたまれて表示されます。お客様がタイトルをクリックすると、タブが展開されて追加のコンテンツが表示されます。

    アイコン

    付加的な商品が折りたたみ可能な行として表示される場合、見出しと対になるアイコンを選択します。

    表示する商品の最大数

    表示する付加的な商品の最大数を選択します。最小1、最大10を選択できます。

    1ページあたりの商品数

    スライダーページごとに表示する付加的な商品の数です。1~4の値を選択します。

    ページネーションのスタイル

    画像の下に表示されるスライダーメニューのスタイル

    • ドット
    • カウンター (デフォルト)
    • 数字
    画像比

    商品カード画像のアスペクト比を決めます。

    • 縦長
    • 正方形 (デフォルト)
    クイック追加ボタンを表示する

    [クイック追加] ボタンを使用すると、お客様は商品カードからカートにアイテムを追加できます。商品にバリエーションがある場合、ボタンを押すと[オプションを選択]と表示され、関連する商品の詳細がポップアップ表示されます。お客様はカートに追加するバリエーションを選択することや、[今すぐ購入]オプションを使用してすぐにチェックアウトすること、クリックしてアイテムの詳細を表示することができます。[今すぐ購入]オプションをクイック追加オプションに表示するには、商品ページとは別に設定する必要があります。[今すぐ購入]オプションが設定されていない場合でも、お客様はカートにアイテムを追加できます。

    共有のブロック

    このブロックでは、お客様がSNSで商品を共有できるクリック可能なリンクが表示されます。

    商品情報セクションの共有ブロックの設定
    設定 説明
    テキスト お客様がクリックして商品をSNSに共有するクリック可能なテキスト。

    数量セレクターのブロック

    このブロックには、お客様が購入する商品のユニット数を変更する際に使用する数量セレクターが表示されます。この設定は調整できません。デフォルトの数量は1です。

    カスタムLiquidのブロック

    このブロックでは、ブロックに追加できるカスタムLiquidコードまたはHTMLコードが表示されます。

    商品情報セクションのカスタムLiquidブロックの設定
    設定 説明
    カスタムLiquid LiquidコードまたはHTMLコードとして入力できるコンテンツを表示します。

    折りたたみ可能なタブのブロック

    このブロックには、タイトルのついた折りたたみ可能なタブが表示されます。お客様がタイトルをクリックすると、タブが展開されて追加のコンテンツが表示されます。

    商品情報セクションの折りたたみ可能なタブのブロックの設定
    設定 説明
    見出し タブのタイトル。折りたたみ時と展開時に表示されます。
    タブのコンテンツ タブのコンテンツ。タブが展開されている場合にのみ表示されます。
    ページからのタブのコンテンツ ページのコンテンツをタブに表示します。このブロックでは、ページエディターからのページコンテンツのみが表示され、ページのテンプレートからのLiquidスタイルは表示されません。[タブコンテンツ]に入力されたコンテンツは、ページコンテンツの上に表示されます。

    ポップアップのブロック

    このブロックには、クリックするとポップアップウィンドウが開くクリック可能なテキストが表示されます。このポップアップには、ページのいずれかのコンテンツが表示されます。

    商品情報セクションのポップアップブロックの設定
    設定 説明
    リンクラベル お客様がクリックしてポップアップウィンドウを表示するクリック可能なテキスト。
    ページ ポップアップウィンドウに表示するコンテンツの元のページ。ページエディターからのページコンテンツのみを表示します。ポップアップには、ページテンプレートのLiquidスタイリングは表示されません。

    おすすめ商品セクションの設定

    このセクションには、現在表示されている商品に基づいて、類似している商品、類似している商品説明が記載されている商品、またはこの商品と一緒によく購入される商品が表示されます。

    おすすめ商品セクションの設定
    設定 説明
    見出し セクションのタイトル。セクションの見出しには動的ソースを使用できます。
    見出しのサイズ 見出しテキストのサイズを変更します。[小]、[中]、[大] のいずれかを選択します。
    表示する商品の最大数 範囲スライダーを使用して、表示するおすすめ商品の最大数を選択します。最小: 2。最大: 10。
    デスクトップでの列数 デスクトップコンピューターで表示する列数。最小: 1。最大: 4
    カラースキーム おすすめ商品セクションの背景色。[アクセント1]、[アクセント2]、[背景1]、[背景2]、[反転] から選択します。
    画像比 おすすめ商品の画像には次の画像比があります。
    • 画像に合わせる- 画像のアスペクト比を使用します。この比率を使用すると、画像がトリミングされないようになります。
    • 縦長- 画像を2:3の比率で使用できるようにトリミングします。
    • 正方形- 画像を1:1の比率で使用できるようにトリミングします。
    マウスオーバー時に2番目の画像を表示する お客様が画像にカーソルを合わせると、商品に2枚目の画像がある場合は、その画像が表示されます。
    販売元を表示する 各商品の販売元を表示します。
    商品の評価を表示 商品の平均評価を星印と括弧内のレビュー数で表示します。例: ★★★★★ (8)。また、Shopify Product Reviewsなどの商品レビューアプリが必要であり、メタフィールド定義reviews.rating_countreviews.ratingに必要です。
    モバイルでの列数 モバイルデバイス用の具体的な列のレイアウトを設定します。1列か2列から選択します。
    セクションの余白 セクションの上部または下部にスペースを追加します。範囲スライダーを使用してスペースを0ピクセルから100ピクセルの間で設定し、セクションの上か下に追加します。

    おすすめ商品について詳しくは「おすすめ商品を理解する」を参照してください。

    コレクションページ

    コレクションページには、デフォルトで[コレクションバナー]セクションと[商品グリッド]セクションがあります。

    コレクションバナーセクションの設定

    コレクションバナーセクションの設定
    設定 説明
    コレクションの説明を表示する コレクションの説明を表示します。
    コレクションの画像を表示する コレクション画像を表示します。
    カラースキーム マルチカラムセクションの背景色。[アクセント1]、[アクセント2]、[背景1]、[背景2]、[反転] から選択します。

    商品グリッドセクションの設定

    商品グリッドセクションの設定
    設定 説明
    ページあたりの商品数 各ページに表示する商品数。8から24で4の倍数を指定できます。デフォルトは16です。
    デスクトップでの列数 範囲スケールを使用してデスクトップコンピューターで表示する列数を選択します。最小は1、最大は5です。
    画像比 商品画像の画像比:
    • 画像に合わせる (デフォルト)- 画像のアスペクト比を使用します。この比率を使用すると、画像がトリミングされないようになります。
    • 縦長- 画像を2:3の比率で使用できるようにトリミングします。
    • 正方形- 画像を1:1の比率で使用できるようにトリミングします。
    マウスオーバー時に2番目の画像を表示する お客様が商品画像にカーソルを合わせると、商品に2枚目の商品画像がある場合は、その画像が表示されます。
    販売元を表示する 各商品の販売元を表示します。
    商品の評価を表示 商品の平均評価を星印と括弧内のレビュー数で表示します。例: ★★★★★ (8)。また、Shopify Product Reviewsなどの商品レビューアプリが必要であり、メタフィールド定義reviews.rating_countreviews.ratingに必要です。
    [クイック追加] ボタンを有効にする [クイック追加] ボタンを使用すると、お客様は商品カードのアイテムをカートに追加できます。商品にバリエーションがある場合、ボタンのタイトルは [オプションを選択] になり、商品の詳細がポップアップに表示されます。ポップアップでは、お客様は希望するバリエーションを選択したり、カートにアイテムを追加したり、[今すぐ購入] ですぐにチェックアウトしたり、クリックしてアイテムの詳細を表示したりすることができます。この設定は、[商品ページ](/manual/online-store/dynamic-checkout) で [今すぐ購入] ボタンが有効になっているかどうかで変わります。商品テンプレートで [今すぐ購入] ボタンが有効になっていない場合、お客様は商品をカートに追加することはできますが、お客様に [今すぐ購入] のクイックチェックアウトワークフローは表示されません。
    絞り込みを有効にする お客様は[メニュー]設定の絞り込みに基づいて、コレクションの商品を絞り込むことができます。
    デスクトップの絞り込みレイアウト [水平] (デフォルト)、[垂直]、[ドロワー] のいずれかのレイアウトを選択します。
    並べ替えを有効にする お客様に検索結果の並び替えを許可します。
    モバイルでの列数 モバイルデバイス用の具体的な列のレイアウトを設定します。1列か2列から選択します。
    セクションの余白 商品グリッドの上部または下部にスペースを追加します。範囲スライダーを使用してスペースを0ピクセルから100ピクセルの間で設定し、商品グリッドの上か下に追加します。

    コレクションリストのページ

    コレクションリストのページには、オンラインストアの販売チャネルで利用可能なすべてのコレクションが表示されます。

    コレクションリストページの設定
    設定 説明
    見出し ページのタイトル。
    コレクションの並べ替え方法

    次の条件でコレクションを表示する順序を指定します。

    • アルファベット順 (A~Z)- コレクションをアルファベット順に表示します。
    • アルファベット順 (Z~A)- コレクションを逆アルファベット順に表示します。
    • 日付、新しい順- ストアで各コレクションが作成された時に基づいて、コレクションを新しい順に表示します。
    • 日付、古い順- 各コレクションがストアで作成された時に基づいて、コレクションを古い順に表示します。
    • 商品数、多い順- コレクションに含まれる商品数の多い順にコレクションを表示します。
    • 商品数、少ない順- コレクションに含まれる商品数の少ない順にコレクションを表示します。
    画像比 コレクション画像の画像比:
    • 画像に合わせる (デフォルト)- 画像のアスペクト比を使用します。この比率を使用すると、画像がトリミングされないようになります。
    • 縦長- 画像を2:3の比率で使用できるようにトリミングします。
    • 正方形- 画像を1:1の比率で使用できるようにトリミングします。
    デスクトップでの列数 デスクトップコンピューターで表示する列数。最小: 1。最大: 5
    モバイルでの列数 モバイルデバイス用の具体的な列のレイアウトを設定します。1列か2列から選択します。

    ページ

    管理画面でカスタムページを作成して、[会社概要] ページや商品に関する追加情報など、お客様向けコンテンツを作成できます。これらのページには、テーマエディター内に追加設定はありません。

    ブログページ

    ブログページは、管理画面内で作成するブログのホームページです。ブログページには、デフォルトで[ブログ記事]セクションが含まれています。

    ブログ記事セクションの設定

    ブログ記事セクションには、ブログ内の最新のブログ記事が表示されます。各ブログ記事には、ブログ画像、ブログタイトル、ブログ記事の抜粋または最初の数語が表示されます。大きな画面の場合は、ブログ記事をグリッド形式またはコラージュ形式で表示することができます。

    ブログ記事セクションの設定
    設定 説明
    大画面でのレイアウト ブログ記事をグリッドまたはコラージュで表示します。
    記事のサムネイルを表示する ブログ記事のサムネイルを表示します。
    記事のサムネイルの高さ ドロップダウンメニューを使用して、デフォルトでの画像に対応から選択します。
    日付を表示する ブログ記事ごとに、ブログ記事が公開された日付を表示します。
    筆者を表示する ブログ記事ごとに、ブログ記事の筆者を表示します。

    ブログ記事のページ

    ブログ記事ページには、ブログ記事のコンテンツが表示されます。ブログ記事ページには、デフォルトで[ブログ記事]セクションが含まれています。[ブログ記事]セクション自体にカスタマイズ可能な設定はありませんが、次のデフォルトブロックが含まれています。

    • 記事のサムネイル
    • Title
    • 提供する
    • コンテンツ

    記事のサムネイルのブロック

    ブログ記事ページの記事のサムネイルブロックの設定
    設定 説明
    記事のサムネイルの高さ

    次の条件でブログ記事のサムネイルの高さを指定します。

    • 画像に合わせる (デフォルト)- 画像の元のアスペクト比を維持します。
    • 画像の仕様は以下のとおりです。の記事のサムネイルの中から選択します。

    記事のサムネイルのサイズ

    ブログ記事ページの記事のサムネイルブロックのサイズ
    小さなカード 大きなカード
    小さい記事のサムネイルの高さ

    • デスクトップ- 177ピクセル
    • タブレット- 143ピクセル
    • モバイル- 該当なし
    大きい記事のサムネイルの高さ

    • デスクトップ- 275ピクセル
    • タブレット- 220ピクセル
    • モバイル- 110ピクセル
    中程度の記事のサムネイルの高さ

    • デスクトップ- 307ピクセル
    • タブレット- 219ピクセル
    • モバイル- 該当なし
    中程度の記事のサムネイルの高さ

    • デスクトップ- 550ピクセル
    • タブレット- 440ピクセル
    • モバイル- 220ピクセル
    大きい記事のサムネイルの高さ

    • デスクトップ- 407ピクセル
    • タブレット- 275ピクセル
    • モバイル- 該当なし
    大きい記事のサムネイルの高さ

    • デスクトップ- 825ピクセル
    • タブレット- 660ピクセル
    • モバイル- 330ピクセル

    タイトルのブロック

    ブログ記事ページのタイトルブロックの設定
    設定 説明
    日付を表示する ブログ記事が公開された日付を表示します。
    筆者を表示する ブログ記事の筆者を表示します。

    共有のブロック

    このブロックでは、お客様がSNSでブログ記事を共有できるクリック可能なリンクが表示されます。

    ブログ記事ページの共有ブロックの設定
    設定 説明
    テキスト お客様がクリックしてブログ記事をSNSで共有するクリック可能なテキスト。

    コンテンツブロック

    コンテンツブロックには、ブログ記事のコンテンツが表示されます。カスタマイズ可能な設定はありません。

    カートページ

    カートページには、デフォルトで[アイテム]セクションと[小計]セクションがあります。

    アイテムセクションの設定

    [アイテム]セクションには、お客様がカートに追加した商品と数量が表示されます。

    カートページのアイテムセクションの設定
    設定 説明
    販売元を表示する カート内の各商品の販売元を表示します。

    小計セクションの設定

    [小計]セクションには、[小計金額]ブロックと[チェックアウトボタン]ブロックがあります。どちらのブロックにも、カスタマイズ可能な設定はありません。

    カートページの小計セクションの設定
    設定 説明
    カートメモを有効にする お客様が追加情報を入力できる[カートメモ]フィールドを表示します。

    パスワードページ

    パスワードページは、オンラインストアでパスワード保護が有効になっていて、お客様がウェブサイトにアクセスしようとすると表示されます。このページには、特有のヘッダーとフッターがあり、[メール登録]セクションがデフォルトで含まれています。

    パスワードヘッダーセクション

    パスワードページのパスワードヘッダーセクションの設定
    設定 説明
    ロゴ画像 表示させるロゴ。
    ロゴの幅をカスタマイズする ロゴの幅は、50ピクセルから250ピクセルの10の倍数に設定します。デフォルトでは100ピクセルです。
    背景のスキーム パスワードヘッダーセクションの背景および画像の余白の背景は、[アクセント1]、[アクセント2]、[背景1]、[背景2]、[反転] から選択できます。

    メール登録セクション

    このセクションは、お客様がメールマーケティングに登録する方法を提供することを目的としています。これにより、お客様は営業時間など、ビジネスについての詳細情報を知ることができます。

    パスワードページのメール登録セクションの設定
    設定 説明
    カラースキーム メール登録セクションの背景色。アクセント1、アクセント2、背景1、背景2、反転から選択できます。
    セクションを全幅にする セクションをブラウザーウィンドウの幅に拡大します。

    見出しのブロック

    パスワードページのパスワードヘッダーセクションにある見出しブロックの設定
    設定 説明
    見出し セクションのタイトル。

    小見出しのブロック

    パスワードページのパスワードヘッダーセクションにある見出しブロックの設定
    設定 説明
    説明 セクションのテキストコンテンツ。

    メールフォームのブロック

    このブロックでは、お客様がメールアドレスを入力できるメールフォームフィールドが表示されます。このブロックにカスタマイズ可能な設定はありません。

    パスワードフッターセクション

    パスワードページのパスワードフッターセクションの設定
    設定 説明
    カラースキーム パスワードフッターセクションの背景色。アクセント1、アクセント2、背景1、背景2、反転から選択できます。

    404 Page

    404ページは、ストアから削除された商品の商品ページなど、存在しないサイトのリンクにお客様がアクセスしようとすると表示されます。このページには、カスタマイズ可能な設定はありません。

    検索ページ

    検索ページでは、お客様がオンラインストア内の特定の商品やページを検索できます。このページには、デフォルトで[検索結果]セクションが含まれています。

    検索結果のセクションの設定

    検索結果セクションの設定
    設定 説明
    デスクトップでの列数 デスクトップコンピューターで表示する列数。最小: 1。最大: 5
    画像比 おすすめ商品の画像には次の画像比があります。
    • 画像に合わせる (デフォルト)- 画像のアスペクト比を使用します。この比率を使用すると、画像がトリミングされないようになります。
    • 縦長- 画像を2:3の比率で使用できるようにトリミングします。
    • 正方形- 画像を1:1の比率で使用できるようにトリミングします。
    マウスオーバー時に2番目の画像を表示する お客様が商品画像にカーソルを合わせると、商品に2枚目の商品画像がある場合は、その画像が表示されます。
    販売元を表示する 各商品の販売元を表示します。
    商品の評価を表示 商品の平均評価を星印と括弧内のレビュー数で表示します。例: ★★★★★ (8)。また、Shopify Product Reviewsなどの商品レビューアプリが必要であり、メタフィールド定義reviews.rating_countreviews.ratingに必要です。
    絞り込みを有効にする クリックして、検索結果の絞り込み機能を有効にします。
    デスクトップの絞り込みレイアウト [水平] (デフォルト)、[垂直]、[ドロワー] のいずれかのレイアウトを選択します。
    並べ替えを有効にする クリックして、検索結果の並び替えを有効にします。
    日付を表示する ブログ記事ごとに、ブログ記事が公開された日付を表示します。
    筆者を表示する ブログ記事ごとに、ブログ記事の筆者を表示します。
    モバイルでの列数 モバイルデバイス用の具体的な列のレイアウトを設定します。1列か2列から選択します。
    セクションの余白 検索結果の上部または下部にスペースを追加します。範囲スライダーを使用してスペースを0ピクセルから100ピクセルの間で設定し、検索結果の上か下に追加します。

    Shopifyで販売を開始する準備はできていますか?

    無料体験を試す