Dawnで利用可能なページタイプ

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

商品ページ

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

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

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

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

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

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

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

商品情報セクションの設定
設定 説明
大画面で商品情報の常時表示を有効にする ページを下にスクロールしても、すべての画像がスクロールされるまで商品情報の列のスクロールは開始されません。
バリエーションが選択された場合、他のバリエーションのメディアを非表示にする バリエーションを選択すると、その他のバリエーションの画像は非表示になります。バリエーションの選択を解除すると、画像は再表示されます。
ビデオループを有効にする ビデオをループ再生されるように設定すると、ビデオが終了した時点で自動再生されます。

商品情報のブロック

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

テキストブロック

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

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

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

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

タイトルのブロック

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

価格のブロック

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

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

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

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

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

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

購入ボタンのブロック

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

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

説明のブロック

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

商品評価のブロック

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

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

共有のブロック

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

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

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

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

カスタムLiquidのブロック

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

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

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

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

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

ポップアップのブロック

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

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

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

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

おすすめ商品セクションの設定
設定 説明
見出し セクションのタイトル。
画像比 おすすめ商品の画像には次の画像比があります。
  • 画像に合わせる - 画像のアスペクト比を使用します。この比率を使用すると、画像がトリミングされないようになります。
  • 縦長 - 画像を2:3の比率で使用できるようにトリミングします。
  • 正方形 - 画像を1:1の比率で使用できるようにトリミングします。
マウスオーバー時に2番目の画像を表示する お客様が画像にカーソルを合わせると、商品に2枚目の画像がある場合は、その画像が表示されます。
画像の余白を追加する 商品画像の周囲に余分のスペースを追加します。
画像の枠線を表示する 画像の周囲に枠線を表示します。
販売元を表示する 各商品の販売元を表示します。
商品の評価を表示 商品の平均評価を星印と括弧内のレビュー数で表示します。例: ★★★★★ (8)。また、Shopify Product Reviewsなどの商品レビューアプリが必要であり、メタフィールド定義reviews.rating_countreviews.ratingに必要です。

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

コレクションページ

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

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

コレクションバナーセクションの設定
設定 説明
コレクションの説明を表示する コレクションの説明を表示します。
コレクションの画像を表示する コレクション画像を表示します。

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

商品グリッドセクションの設定
設定 説明
ページあたりの商品数 各ページに表示する商品数。8から24で4の倍数を指定できます。デフォルトは16です。
画像比 商品画像の画像比:
  • 画像に合わせる (デフォルト) - 画像のアスペクト比を使用します。この比率を使用すると、画像がトリミングされないようになります。
  • 縦長 - 画像を2:3の比率で使用できるようにトリミングします。
  • 正方形 - 画像を1:1の比率で使用できるようにトリミングします。
マウスオーバー時に2番目の画像を表示する お客様が商品画像にカーソルを合わせると、商品に2枚目の商品画像がある場合は、その画像が表示されます。
画像の余白を追加する 商品画像の周囲に余分のスペースを追加します。
画像の枠線を表示する 画像の周囲に枠線を表示します。
販売元を表示する 各商品の販売元を表示します。
商品の評価を表示 商品の平均評価を星印と括弧内のレビュー数で表示します。例: ★★★★★ (8)。また、Shopify Product Reviewsなどの商品レビューアプリが必要であり、メタフィールド定義reviews.rating_countreviews.ratingに必要です。
絞り込みを有効にする お客様は [メニュー] 設定の絞り込みに基づいて、コレクションの商品を絞り込むことができます。
並べ替えを有効にする

お客様は次の条件に基づいて、コレクション内の商品を並べ替えることができます。

  • おすすめ - その商品を含む注文のこれまでの最大数に基づく、ベストセラー商品。まだ商品を販売していない場合、このオプションを選択すると、商品は新着順に並べ替えられます。
  • ベストセラー - 各商品の注文回数に基づいて、商品を降順で表示します。
  • アルファベット順 (A~Z) - 商品をアルファベット順に表示します。
  • アルファベット順 (Z~A) - 商品を逆アルファベット順に表示します。
  • 価格、低い順 - 商品を価格の低い順に表示します。
  • 価格、高い順 - 商品を価格の高い順に表示します。
  • 日付、古い順 - 各商品がストアに追加された時に基づいて、商品を古い順に表示します。
  • 日付、新しい順 - 各商品がストアに追加された時に基づいて、商品を新しい順に表示します。
大画面で折りたたむ お客様が絞り込みと並べ替えのオプションを表示するには、「絞り込みと並べ替え」の見出しをクリックする必要があります。「絞り込みと並べ替え」の見出しを表示するには、[絞り込みを有効にする] または [並べ替えを有効にする] の少なくとも一方を有効にする必要があります。

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

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

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

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

  • アルファベット順 (A~Z) - コレクションをアルファベット順に表示します。
  • アルファベット順 (Z~A) - コレクションを逆アルファベット順に表示します。
  • 日付、新しい順 - ストアで各コレクションが作成された時に基づいて、コレクションを新しい順に表示します。
  • 日付、古い順 - 各コレクションがストアで作成された時に基づいて、コレクションを古い順に表示します。
  • 商品数、多い順 - コレクションに含まれる商品数の多い順にコレクションを表示します。
  • 商品数、少ない順 - コレクションに含まれる商品数の少ない順にコレクションを表示します。
画像比 コレクション画像の画像比:
  • 画像に合わせる (デフォルト) - 画像のアスペクト比を使用します。この比率を使用すると、画像がトリミングされないようになります。
  • 縦長 - 画像を2:3の比率で使用できるようにトリミングします。
  • 正方形 - 画像を1:1の比率で使用できるようにトリミングします。
カラースキーム コレクションタイトルセクションおよび画像の余白の背景色。アクセント1、アクセント2、背景1、背景2、反転から選択できます。
画像の余白を追加する コレクション画像の周囲に余分のスペースを追加します。

ページ

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

ブログページ

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

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

ブログ記事セクションには、ブログ内の最新のブログ記事が表示されます。各ブログ記事には、ブログ画像、ブログタイトル、ブログ記事の抜粋または最初の数語が表示されます。

ブログ記事セクションの設定
設定 説明
記事のサムネイルを表示する ブログの記事のサムネイルを表示します。
日付を表示する ブログ記事ごとに、ブログ記事が公開された日付を表示します。
筆者を表示する ブログ記事ごとに、ブログ記事の筆者を表示します。

ブログ記事のページ

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

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

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

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

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

  • 画像に合わせる - 画像の元のアスペクト比を維持します。
  • - 545ピクセル
  • - 660ピクセル

タイトルのブロック

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

共有のブロック

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

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

コンテンツブロック

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

カートページ

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

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

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

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

小計セクションの設定

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

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

パスワードページ

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

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

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

メール登録セクション

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

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

見出しのブロック

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

小見出しのブロック

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

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

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

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

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

404 Page

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

検索ページ

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

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

検索結果セクションの設定
設定 説明
画像比 おすすめ商品の画像には次の画像比があります。
  • 画像に合わせる (デフォルト) - 画像のアスペクト比を使用します。この比率を使用すると、画像がトリミングされないようになります。
  • 縦長 - 画像を2:3の比率で使用できるようにトリミングします。
  • 正方形 - 画像を1:1の比率で使用できるようにトリミングします。
マウスオーバー時に2番目の画像を表示する お客様が商品画像にカーソルを合わせると、商品に2枚目の商品画像がある場合は、その画像が表示されます。
画像の余白を追加する 商品画像の周囲に余分のスペースを追加します。
画像の枠線を表示する 画像の周囲に枠線を表示します。
販売元を表示する 各商品の販売元を表示します。
商品の評価を表示 商品の平均評価を星印と括弧内のレビュー数で表示します。例: ★★★★★ (8)。また、Shopify Product Reviewsなどの商品レビューアプリが必要であり、メタフィールド定義reviews.rating_countreviews.ratingに必要です。
日付を表示する ブログ記事ごとに、ブログ記事が公開された日付を表示します。
筆者を表示する ブログ記事ごとに、ブログ記事の筆者を表示します。

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

無料体験を試す