ページの種類
各ページには、デフォルトのセクションと設定があります。
商品ページ
デフォルトでは、商品ページには[商品情報]セクションと[おすすめ商品]セクションがあります。
[商品情報]セクションには、次のデフォルトブロックが含まれています。
- テキスト (デフォルトでは
vendor
属性が表示されます) - Title
- テキスト (デフォルトでは
product subtitle
属性が表示されます) - 価格
- バリエーションピッカー
- 数量セレクター
- 購入ボタン
- 説明
- 提供する
次のブロックを追加することもできます。
- テキスト
- カスタムLiquid
- 商品評価
- 折りたたみ可能なタブ
- ポップアップ
- 付加的な商品
- 在庫
- SKU
- テキスト付きアイコン
[商品情報]セクションには、最大16個のブロックを含めることができます。
商品情報セクションの設定
設定 | 説明 |
---|---|
デスクトップ上のコンテンツ固定表示を有効にする | ページを下にスクロールしても、すべての画像がスクロールされるまで商品情報の列のスクロールは開始されません。 |
デスクトップメディアの幅 | [小]、[中]、[大] のメディアの幅をいずれか選択します。モバイルデバイスはメディアの位置が自動で最適化されるため、この設定は、デスクトップコンピューターを使用してページにアクセスするユーザーにのみ適用されます。 |
メディアを画面の高さに制限する | このオプションを選択すると、デバイスのブラウザウィンドウの高さに応じてメディアの高さの最大値が設定されます。 |
適合したメディア | メディアのオリジナルのアスペクト比を維持する場合は[オリジナル]を選択し、メディアをコンテナーに適合させる場合は[全体]を選択します。 |
デスクトップのレイアウト | 商品メディアがデスクトップに表示される方法。 |
デスクトップのメディア位置 | 掲載する商品のメディアを左側と右側のどちらに配置するかを選択します。この設定は、デスクトップコンピューター使用してページにアクセスするユーザーにのみ適用されます。 |
画像ズーム | デスクトップで画像を拡大する方法を選択します。 |
モバイルのレイアウト | モバイルで、サムネイル画像の表示・非表示を選択します。 |
バリエーションが選択された場合、他のバリエーションのメディアを非表示にする | バリエーションを選択すると、その他のバリエーションの画像は非表示になります。バリエーションの選択を解除すると、画像は再表示されます。 |
ビデオループを有効にする | ビデオをループ再生されるように設定すると、ビデオが終了した時点で自動再生されます。 |
セクションの余白 | [商品情報] セクションの上部か下部に間隔を追加します。範囲スライダーを使用してスペースを0ピクセルから100ピクセルの間で設定し、[商品情報] の上か下に追加します。 |
商品情報のブロック
以下のブロックを[商品情報]セクションに追加できます。
テキストブロック
テキストブロックには、動的ソースを使用して静的テキストや変数データを表示できます。たとえば、「100米ドル以上で無料配送」のようなマーケティングメッセージを伝えるテキストを追加して、すべての商品で同じメッセージを表示できます。また、商品の[販売元]フィールドなどの動的ソースを追加して、閲覧されている商品に応じて異なる情報を表示できます。
設定 | 説明 |
---|---|
テキスト | 商品ページに情報を追加します。テキストソースまたはダイナミックソースをサポートします。 |
テキストスタイル | テキストのスタイルを次のように変更します。
|
タイトルのブロック
このブロックでは、商品のタイトルが表示されます。調整可能な設定はありません。
価格のブロック
このブロックでは、価格や割引前価格など、商品の価格設定情報が表示されます。調整可能な設定はありません。
バリエーションピッカーのブロック
このブロックでは、商品のバリエーションのオプションが表示されます。
設定 | 説明 |
---|---|
タイプ | バリエーションがお客様に表示される方法を次のように変更します。
|
購入ボタンのブロック
このブロックには、「カートに追加する」ボタンと実店舗受け取り情報が表示されます。動的チェックアウトボタンを表示することもできます。
設定 | 説明 |
---|---|
動的チェックアウトボタンを表示する | [決済]設定で有効にした動的チェックアウトオプションを表示します。 |
ギフトカード商品の受取人情報フォームを表示する | お客様が受取人へのメッセージと共にギフトカードを送信したり、送信日程を設定したりできるようにするには、ギフトカード商品にオプションのチェックボックスを表示します。 |
説明のブロック
このブロックでは、商品の説明を表示します。調整可能な設定はありません。
商品評価のブロック
このブロックでは、商品の平均評価が星印と括弧内のレビュー数で表示されます。例: ★★★★★ (8)。
商品評価を表示するには、Shopify Product Reviewsなどの商品レビューアプリ、およびreviews.rating_count
とreviews.rating
のメタフィールド定義が必要です。
付加的な商品のブロック
このブロックには付加的な商品が表示されます。その商品はShopify Search and Discoveryアプリで設定する必要があります。
設定 | 説明 |
---|---|
見出し | ブロックのタイトル。 |
折りたたみ可能な行として表示する | この設定を選択すると、コンテンツは行タブの下に折りたたまれて表示されます。お客様がタイトルをクリックすると、タブが展開されて追加のコンテンツが表示されます。 |
アイコン | 付加的な商品が折りたたみ可能な行として表示される場合、見出しと対になるアイコンを選択します。 |
表示する商品の最大数 | 表示する付加的な商品の最大数を選択します。最小1、最大10を選択できます。 |
1ページあたりの商品数 | スライダーページごとに表示する付加的な商品の数です。1~4の値を選択します。 |
ページネーションのスタイル | 画像の下に表示されるスライダーメニューのスタイル
|
画像比 | 商品カード画像のアスペクト比を決めます。
|
クイック追加ボタンを表示する | [クイック追加] ボタンを使用すると、お客様は商品カードからカートにアイテムを追加できます。商品にバリエーションがある場合、ボタンを押すと[オプションを選択]と表示され、関連する商品の詳細がポップアップ表示されます。お客様はカートに追加するバリエーションを選択することや、[今すぐ購入]オプションを使用してすぐにチェックアウトすること、クリックしてアイテムの詳細を表示することができます。[今すぐ購入]オプションをクイック追加オプションに表示するには、商品ページとは別に設定する必要があります。[今すぐ購入]オプションが設定されていない場合でも、お客様はカートにアイテムを追加できます。 |
共有のブロック
このブロックでは、お客様がSNSで商品を共有できるクリック可能なリンクが表示されます。
設定 | 説明 |
---|---|
テキスト | お客様がクリックして商品をSNSに共有するクリック可能なテキスト。 |
SKUブロック
このブロックには、商品に関連する最小管理単位 (SKU) が表示されます (関連がある場合)。
設定 | 説明 |
---|---|
テキストスタイル | テキストのスタイルを次のように変更します。
|
テキストブロック付きアイコン
このブロックには、テキスト付きアイコンが最大で3個表示されます。標準ロゴの中から選択するか、独自のロゴ画像を選択することができます。
設定 | 説明 |
---|---|
レイアウト | このセクションのレイアウトは横型と縦型から選択できます。 |
最初のアイコン | 標準アイコンを選択します。 |
最初の画像 | 最初のアイコンの画像を選択します。画像を選択すると、最初のアイコン設定で選択したアイコンが上書きされます。[画像を選択]をクリックして画像を選択するか、[変更]ボタンをクリックして画像を変更または削除します。 |
代替テキストを編集 | 画像の簡潔な説明を追加して、SEOを向上させ、スクリーンリーダーを使用しているお客様のために画像の説明を入力します。 |
最初の見出し | 最初のアイコンの見出しを追加します。 |
2番目のアイコン | 標準アイコンを選択します。 |
2番目の画像 | 2番目アイコンの画像を選択します。画像を選択すると、2番目のアイコン設定で選択したアイコンが上書きされます。[画像を選択]をクリックして画像を選択するか、[変更]ボタンをクリックして画像を変更または削除します。 |
代替テキストを編集 | 画像の簡潔な説明を追加して、SEOを向上させ、スクリーンリーダーを使用しているお客様のために画像の説明を入力します。 |
2番目の見出し | 2番目アイコンの見出しを追加します。 |
3番目のアイコン | 標準アイコンを選択します。 |
3番目の画像 | 3番目のアイコンの画像を選択します。画像を選択すると、3番目のアイコン設定で選択したアイコンが上書きされます。[画像を選択]をクリックして画像を選択するか、[変更]ボタンをクリックして画像を変更または削除します。 |
代替テキストを編集 | 画像の簡潔な説明を追加して、SEOを向上させ、スクリーンリーダーを使用しているお客様のために画像の説明を入力します。 |
3番目の見出し | 3番目のアイコンの見出しを追加します。 |
在庫ステータスブロック
このブロックには商品の在庫ステータスが表示されます。
設定 | 説明 |
---|---|
テキストスタイル | テキストのスタイルを選択します。[本文]、[サブタイトル]、または[大文字]の中から選択します。 |
低在庫基準値 | スライダーを使用して商品の低在庫基準値を0~100に設定します。スライダーを0に設定すると、在庫が完全に切れるまで常に在庫があるものとして表示されます。 |
在庫数を表示 | 商品の在庫数を表示する場合はこのオプションを選択します。 |
数量セレクターのブロック
このブロックには、お客様が購入する商品のユニット数を変更する際に使用する数量セレクターが表示されます。この設定は調整できません。デフォルトの数量は1です。
カスタムLiquidのブロック
このブロックでは、ブロックに追加できるカスタムLiquidコードまたはHTMLコードが表示されます。
設定 | 説明 |
---|---|
カスタムLiquid | LiquidコードまたはHTMLコードとして入力できるコンテンツを表示します。 |
折りたたみ可能なタブのブロック
このブロックには、タイトルのついた折りたたみ可能なタブが表示されます。お客様がタイトルをクリックすると、タブが展開されて追加のコンテンツが表示されます。
設定 | 説明 |
---|---|
見出し | タブのタイトル。折りたたみ時と展開時に表示されます。 |
タブのコンテンツ | タブのコンテンツ。タブが展開されている場合にのみ表示されます。 |
ページからのタブのコンテンツ | ページのコンテンツをタブに表示します。このブロックでは、ページエディタからのページコンテンツのみが表示され、ページのテンプレートからのLiquidスタイルは表示されません。[タブコンテンツ]に入力されたコンテンツは、ページコンテンツの上に表示されます。 |
ポップアップのブロック
このブロックには、クリックするとポップアップウィンドウが開くクリック可能なテキストが表示されます。このポップアップには、ページのいずれかのコンテンツが表示されます。
設定 | 説明 |
---|---|
リンクラベル | お客様がクリックしてポップアップウィンドウを表示するクリック可能なテキスト。 |
ページ | ポップアップウィンドウに表示するコンテンツの元のページ。ページエディタからのページコンテンツのみを表示します。ポップアップには、ページテンプレートのLiquidスタイリングは表示されません。 |
SKUブロック
バリエーションに関連付けられたSKUがある場合、このブロックには、商品のSKU (最小管理単位) が表示されます。管理画面から商品バリエーションにSKU番号を追加することについて詳しくはこちらをご覧ください。
テキストブロック付きアイコン
このブロックには、プリインストールされたアイコンのリストまたはアップロードした画像から選択できる最大3個のアイコンが表示されます。画像をアップロードすることを選択した場合、アップロードされた画像によりアイコンのドロップダウン選択が上書きされます。
アイコンのレイアウトについては、垂直または水平の方向を選択できます。アイコンを削除するには、見出しフィールドをクリアします。3個を超えるアイコンを表示するには、別の[テキスト付きアイコン]ブロックを追加します。
在庫ステータスブロック
このブロックには、在庫あり、低在庫、在庫切れなど、商品在庫のステータスが表示されます。デフォルトでは、低在庫のしきい値は10に設定されています。低在庫のしきい値を、0から100までの任意の数値に変更できます。[在庫数を表示]チェックボックスを選択すると、在庫にあるアイテムの正確な数がお客様に表示されます。
アイテムが売り切れた場合、[在庫切れ]ステータスが表示されます。ただし、[在庫切れの時でも販売を続ける]を選択した場合、在庫がゼロ以下になった後も、[在庫あり]在庫ステータスが引き続き表示されます。
おすすめ商品セクションの設定
このセクションには、現在表示されている商品に基づいて、類似している商品、類似している商品説明が記載されている商品、またはこの商品と一緒によく購入される商品が表示されます。
設定 | 説明 |
---|---|
見出し | セクションのタイトル。セクションの見出しには動的ソースを使用できます。 |
見出しのサイズ | 見出しテキストのサイズを変更します。[小]、[中]、[大] のいずれかを選択します。 |
表示する商品の最大数 | 範囲スライダーを使用して、表示するおすすめ商品の最大数を選択します。最小: 2。最大: 10。 |
デスクトップでの列数 | デスクトップコンピューターで表示する列数。最小: 1。最大: 4 |
カラースキーム | このセクションに適用する色のセットです。カラースキームについて詳しくはこちらをご覧ください。 |
画像比 | おすすめ商品の画像には次の画像比があります。
|
マウスオーバー時に2番目の画像を表示する | お客様が画像にカーソルを合わせると、商品に2枚目の画像がある場合は、その画像が表示されます。 |
販売元を表示する | 各商品の販売元を表示します。 |
商品の評価を表示 | 商品の平均評価を星印と括弧内のレビュー数で表示します。例:★★★★★ (8)。また、Shopify Product Reviewsなどの商品レビューアプリが必要であり、メタフィールド定義もreviews.rating_countとreviews.ratingに必要です。 |
モバイルでの列数 | モバイルデバイス用の具体的な列のレイアウトを設定します。1列か2列から選択します。 |
セクションの余白 | セクションの上部または下部にスペースを追加します。範囲スライダーを使用してスペースを0ピクセルから100ピクセルの間で設定し、セクションの上か下に追加します。 |
おすすめ商品について詳しくは「おすすめ商品を理解する」を参照してください。
[迅速な注文リスト] セクションの設定
[商品]テンプレートに[迅速な注文リスト]セクションを追加して、お客様がさまざまな商品バリエーションで商品の数量が複数ある一括注文を簡単に購入できるようにします。
設定 | 説明 |
---|---|
カラースキーム | このセクションに適用する色のセットです。カラースキームについて詳しくはこちらをご覧ください。 |
セクションの余白 | セクションの上部または下部にスペースを追加します。範囲スライダーを使用してスペースを0ピクセルから100ピクセルの間で設定し、セクションの上か下に追加します。 |
画像を表示する | バリエーション画像を表示します。 |
SKUを表示する | バリエーションSKUを表示します。 |
商品ページに[迅速な注文リスト]セクションを追加する方法について、詳しくはこちらをご覧ください。
コレクションページ
コレクションページには、デフォルトで[コレクションバナー]セクションと[商品グリッド]セクションがあります。
コレクションバナーセクションの設定
設定 | 説明 |
---|---|
コレクションの説明を表示する | コレクションの説明を表示します。 |
コレクションの画像を表示する | コレクション画像を表示します。 |
カラースキーム | このセクションに適用する色のセットです。カラースキームについて詳しくはこちらをご覧ください。 |
商品グリッドセクションの設定
設定 | 説明 |
---|---|
ページあたりの商品数 | 各ページに表示する商品数。8から24で4の倍数を指定できます。デフォルトは16です。 |
デスクトップでの列数 | 範囲スケールを使用してデスクトップコンピューターで表示する列数を選択します。最小は1、最大は5です。 |
画像比 | 商品画像の画像比:
|
画像の形状 | 商品画像の形状を次から1つ選択します。
|
マウスオーバー時に2番目の画像を表示する | お客様が商品画像にカーソルを合わせると、商品に2枚目の商品画像がある場合は、その画像が表示されます。 |
販売元を表示する | 各商品の販売元を表示します。 |
商品の評価を表示 | 商品の平均評価を星印と括弧内のレビュー数で表示します。例: ★★★★★ (8)。また、Shopify Product Reviewsなどの商品レビューアプリが必要であり、メタフィールド定義もreviews.rating_countとreviews.ratingに必要です。 |
[クイック追加] ボタンを有効にする | お客様はクイック追加ボタンを使用して商品カードのアイテムをカートに追加できます。商品にバリエーションがある場合、ボタンのタイトルは[オプションを選択]になり、商品の詳細がポップアップに表示されます。お客様は、そのポップアップを見て希望するバリエーションを選択することや、カートにアイテムを追加すること、[今すぐ購入]ですぐにチェックアウトすることや、クリックしてアイテムの詳細を表示することができます。この設定を行うには、[商品ページ]で[今すぐ購入]ボタンが有効になっている必要があります。商品テンプレートで[今すぐ購入]ボタンが有効になっていない場合、お客様は商品をカートに追加することはできますが、[今すぐ購入]ボタンを使用するクイックチェックアウトワークフローは表示されません。メディアがクイック追加モーダルのどちら側に表示されるかは、ページの「デスクトップのメディア位置」設定で決定します。 |
絞り込みを有効にする | お客様は[メニュー]設定の絞り込みに基づいて、コレクションの商品を絞り込むことができます。 |
デスクトップの絞り込みレイアウト | [水平] (デフォルト)、[垂直]、[ドロワー] のいずれかのレイアウトを選択します。 |
並べ替えを有効にする | お客様に検索結果の並び替えを許可します。 |
モバイルでの列数 | モバイルデバイス用の具体的な列のレイアウトを設定します。1列か2列から選択します。 |
セクションの余白 | 商品グリッドの上部または下部にスペースを追加します。範囲スライダーを使用してスペースを0ピクセルから100ピクセルの間で設定し、商品グリッドの上か下に追加します。 |
コレクションリストのページ
コレクションリストのページには、オンラインストアの販売チャネルで利用可能なすべてのコレクションが表示されます。
設定 | 説明 |
---|---|
見出し | ページのタイトル。 |
コレクションの並べ替え方法 | 次の条件でコレクションを表示する順序を指定します。
|
画像比 | コレクション画像の画像比:
|
デスクトップでの列数 | デスクトップコンピューターで表示する列数。最小: 1。最大: 5 |
モバイルでの列数 | モバイルデバイス用の具体的な列のレイアウトを設定します。1列か2列から選択します。 |
ページ
管理画面でカスタムページを作成して、[会社概要] ページや商品に関する追加情報など、お客様向けコンテンツを作成できます。これらのページには、テーマエディタ内に追加設定はありません。
ブログページ
ブログページは、管理画面内で作成するブログのホームページです。ブログページには、デフォルトで[ブログ記事]セクションが含まれています。
ブログ記事セクションの設定
ブログ記事セクションには、ブログ内の最新のブログ記事が表示されます。各ブログ記事には、ブログ画像、ブログタイトル、ブログ記事の抜粋または最初の数語が表示されます。大きな画面の場合は、ブログ記事をグリッド形式またはコラージュ形式で表示することができます。
設定 | 説明 |
---|---|
大画面でのレイアウト | ブログ記事をグリッドまたはコラージュで表示します。 |
記事のサムネイルを表示する | ブログ記事のサムネイルを表示します。 |
記事のサムネイルの高さ | ドロップダウンメニューを使用して、デフォルトでの画像に対応、小、中、大から選択します。 |
日付を表示する | ブログ記事ごとに、ブログ記事が公開された日付を表示します。 |
筆者を表示する | ブログ記事ごとに、ブログ記事の筆者を表示します。 |
ブログ記事のページ
ブログ記事ページには、ブログ記事のコンテンツが表示されます。ブログ記事ページには、デフォルトで[ブログ記事]セクションが含まれています。[ブログ記事]セクション自体にカスタマイズ可能な設定はありませんが、次のデフォルトブロックが含まれています。
- 記事のサムネイル
- Title
- 提供する
- コンテンツ
記事のサムネイルのブロック
設定 | 説明 |
---|---|
記事のサムネイルの高さ | 次の条件でブログ記事のサムネイルの高さを指定します。
|
記事のサムネイルのサイズ
小さなカード | 大きなカード |
---|---|
小さい記事のサムネイルの高さ
|
大きい記事のサムネイルの高さ
|
中程度の記事のサムネイルの高さ
|
中程度の記事のサムネイルの高さ
|
大きい記事のサムネイルの高さ
|
大きい記事のサムネイルの高さ
|
タイトルのブロック
設定 | 説明 |
---|---|
日付を表示する | ブログ記事が公開された日付を表示します。 |
筆者を表示する | ブログ記事の筆者を表示します。 |
共有のブロック
このブロックでは、お客様がSNSでブログ記事を共有できるクリック可能なリンクが表示されます。
設定 | 説明 |
---|---|
テキスト | お客様がクリックしてブログ記事をSNSで共有するクリック可能なテキスト。 |
コンテンツブロック
コンテンツブロックには、ブログ記事のコンテンツが表示されます。カスタマイズ可能な設定はありません。
カートページ
カートページには、デフォルトで[アイテム]セクションと[小計]セクションがあります。
アイテムセクションの設定
[アイテム]セクションには、お客様がカートに追加した商品と数量が表示されます。
設定 | 説明 |
---|---|
販売元を表示する | カート内の各商品の販売元を表示します。 |
小計セクションの設定
[小計]セクションには、[小計金額]ブロックと[チェックアウトボタン]ブロックがあります。どちらのブロックにも、カスタマイズ可能な設定はありません。
設定 | 説明 |
---|---|
カートメモを有効にする | お客様が追加情報を入力できる[カートメモ]フィールドを表示します。 |
パスワードページ
パスワードページは、オンラインストアでパスワード保護が有効になっていて、お客様がウェブサイトにアクセスしようとすると表示されます。このページには、特有のヘッダーとフッターがあり、[メール登録]セクションがデフォルトで含まれています。
パスワードヘッダーセクション
設定 | 説明 |
---|---|
カラースキーム | このセクションに適用する色のセットです。カラースキームについて詳しくはこちらをご覧ください。 |
メール登録セクション
このセクションは、お客様がメールマーケティングに登録する方法を提供することを目的としています。これにより、お客様は営業時間など、ビジネスについての詳細情報を知ることができます。
設定 | 説明 |
---|---|
カラースキーム | このセクションに適用する色のセットです。カラースキームについて詳しくはこちらをご覧ください。 |
セクションを全幅にする | セクションをブラウザウィンドウの幅に拡大します。 |
見出しのブロック
設定 | 説明 |
---|---|
見出し | セクションのタイトル。 |
小見出しのブロック
設定 | 説明 |
---|---|
説明 | セクションのテキストコンテンツ。 |
メールフォームのブロック
このブロックでは、お客様がメールアドレスを入力できるメールフォームフィールドが表示されます。このブロックにカスタマイズ可能な設定はありません。
パスワードフッターセクション
設定 | 説明 |
---|---|
カラースキーム | このセクションに適用する色のセットです。カラースキームについて詳しくはこちらをご覧ください。 |
404 Page
404ページは、ストアから削除された商品の商品ページなど、存在しないサイトのリンクにお客様がアクセスしようとすると表示されます。このページには、カスタマイズ可能な設定はありません。
検索ページ
検索ページでは、お客様がオンラインストア内の特定の商品やページを検索できます。このページには、デフォルトで[検索結果]セクションが含まれています。
検索結果のセクションの設定
設定 | 説明 |
---|---|
デスクトップでの列数 | デスクトップコンピューターで表示する列数。最小: 1。最大: 5 |
画像比 | おすすめ商品の画像には次の画像比があります。
|
画像の形状 | 商品画像の形状を次から1つ選択します。
|
マウスオーバー時に2番目の画像を表示する | お客様が商品画像にカーソルを合わせると、商品に2枚目の商品画像がある場合は、その画像が表示されます。 |
販売元を表示する | 各商品の販売元を表示します。 |
商品の評価を表示 | 商品の平均評価を星印と括弧内のレビュー数で表示します。例: ★★★★★ (8)。また、Shopify Product Reviewsなどの商品レビューアプリが必要であり、メタフィールド定義もreviews.rating_countとreviews.ratingに必要です。 |
絞り込みを有効にする | クリックして、検索結果の絞り込み機能を有効にします。 |
デスクトップの絞り込みレイアウト | [水平] (デフォルト)、[垂直]、[ドロワー] のいずれかのレイアウトを選択します。 |
並べ替えを有効にする | クリックして、検索結果の並び替えを有効にします。 |
日付を表示する | ブログ記事ごとに、ブログ記事が公開された日付を表示します。 |
筆者を表示する | ブログ記事ごとに、ブログ記事の筆者を表示します。 |
モバイルでの列数 | モバイルデバイス用の具体的な列のレイアウトを設定します。1列か2列から選択します。 |
セクションの余白 | 検索結果の上部または下部にスペースを追加します。範囲スライダーを使用してスペースを0ピクセルから100ピクセルの間で設定し、検索結果の上か下に追加します。 |