・Shopifyのトップページの作り方を知りたい
・トップページに追加できる要素を知りたい
・HTMLの知識がないけどどこまでいじれるか知りたい
そんな人に向けて、Debutテーマ限定ですが、ホームページの編集できる項目と、実際の表示についてまとめます。
※画面は2021年2月現在のものです
Debutテーマのトップページの編集・カスタマイズ方法
管理画面の「オンラインストア」→「カスタマイズ」を選択すると、トップページ（ホームページ）の編集画面が開きます。
以下です。
こちらの画面の左側から、HTML/CSSの知識がなくても、簡単にセクションを追加したり、順番を変えたり、表示をカスタマイズしたりできます。
Debutテーマのトップページで編集できる全項目一覧
編集できる項目は以下です。
- コレクション
- コレクションリスト
- 特集コレクション
- ストア情報
- マップ
- テキスト
- お客様の声
- リッチテキスト
- 画像付きテキスト列
- ブログ
- ブログ記事
- プロモーション用
- ニュースレター
- 動画
- 動画
- 商品
- おすすめ商品
- 画像
- ギャラリー
- スライドショー
- テキストオーバーレイ付き画像
- テキスト付き画像
- ロゴリスト
- 高度なレイアウト
- コンテンツをカスタムする
コレクション
コレクションリスト
コレクションリストとは、作成したコレクションを一覧で表示したい場合に使用します。
例えば、カテゴリ一覧を並べたいときなど。
それぞれのコレクションの編集画面は以下です。
実際の表示は以下のようになります。
特集コレクション
特集コレクションは、1つのコレクションの商品一覧を表示する場合に使います。
例えば新着商品を数商品表示したいなど。
実際の表示は以下のようになります。
ストア情報
マップ
マップは店舗情報を表示したい場合などに使用します。
注意としては、Google Maps APIを設定しても、API キーの制限が間違っていたり、請求先アカウントをリンクしていない場合は地図が表示されずにエラーになります。また、maps javascript API と Geocoding API の2つが必要です。ハマりやすいので注意。
Solved: Google Maps: “Error looking up that address” – Shopify Community
実際の表示は以下のようになります。
テキスト
お客様の声
その名の通り、お客様の声一覧を表示します。顔写真やアバターなどはデフォルトでは表示できません。
それぞれのお客様の声の編集画面は以下です。
実際の表示は以下のようになります。
リッチテキスト
見出し＋テキストを表示します。
実際の表示は以下のようになります。
画像付きテキスト列
画像＋テキストを表示します。ボタンにリンクを貼ることも可能です。
それぞれのタイトルまたはキャッチコピーの編集画面は以下です。
実際の表示は以下のようになります。
ブログ
ブログ記事
特定のブログの記事一覧を表示する場合に使用します。
実際の表示は以下のようになります。
プロモーション用
ニュースレター
メルマガ登録フォームを表示したい場合に使用します。
実際の表示は以下のようになります。
動画
動画
YouTube動画を埋め込みたい場合に使用します。
YouTube以外の場合や、埋め込みタグを使用したい場合は、高度なレイアウトでHTMLタグを直接入れることが可能です。
実際の表示は以下のようになります。
商品
おすすめ商品
商品を表示します。
実際の表示は以下のようになります。
画像
ギャラリー
画像を横並びに表示します。キャプションを設定すると画像の上に表示されます。
それぞれの画像の編集画面は以下です。
実際の表示は以下のようになります。
スライドショー
スライドショーを表示したい場合に使用します。
それぞれの画像スライドの編集画面は以下です。
実際の表示は以下のようになります。
なぜか、リンクはボタンにのみしか設定できないため、画像全体をリンクにしたい場合はカスタマイズが必要です。
テキストオーバーレイ付き画像
スライドショーの1枚のみの場合と似ていますが、画像の上にテキストとボタンを表示します。
実際の表示は以下のようになります。
こちらもデフォルトでは画像全体にリンクは貼れません。
テキスト付き画像
画像＋テキスト＋ボタンを表示する場合に使用します。
実際の表示は以下のようになります。
ロゴリスト
ロゴの一覧を表示します。ロゴにリンクを貼ることも可能です。
それぞれのロゴの編集画面は以下です。
実際の表示は以下のようになります。
高度なレイアウト
コンテンツをカスタムする
高度なレイアウトについては、以下のページに解説しています。さらに様々なカスタマイズが可能です。
以上です！
