- ストア構築の準備をしよう
- 商品を登録しよう
- コレクションを登録しよう
- ブログ記事を作成しよう
- サイトのデザインを選ぼう
- テーマを編集しよう（セクション編）
- テーマを編集しよう（テーマ設定編）
- トップページ以外を編集しよう（← 今回はここ）
- サイトのフォントを編集しよう
- アカウントページを作成しよう
- コンタクトフォーム を作成しよう
- About ページを作成しよう
- 規約を入力しよう
- メニューの編集をしよう
- 送料を設定しよう
- 一般設定を編集しよう
- 各種設定を編集しよう
- 決済テストを行おう
- ストアの所有権を移行しよう
前回までで、サイトのトップページのデザインが出来上がりました。
前回の記事はこちら
今回は、トップページ以外の商品ページやパスワードページなどを編集していきます。
いつも通り、テーマのカスタマイズ画面へ移動しておいてください。
今回の記事は、以下の記事を参考にしています。
【Shopify マスターへの道】#8 トップページ以外を編集しよう
今回の目標
- パスワードページを編集できるようになる
- 商品ページを編集できるようになる
- コレクションページを編集できるようになる
- コレクションリストのページを編集できるようになる
- その他のページについて理解する
デモサイトを構築する際に使用する商品画像や CSV ファイルのダウンロードをしてない方はこちらからダウロードしてください。
【Shopify マスターへの道】商品画像・CSV ファイルのダウンロード
パスワードページの編集
「パスワードページ」とは、ストアの準備期間中にストア URL にアクセスした際に表示されるページです。一般的に、「ティザーサイト」と呼ばれます。
ストアのカスタマイズ画面を開いてもらって、「パスワードページ」へ移動します。
デフォルトでは、以下のような表示になっています。
パスワードヘッダー
「パスワードヘッダー」セクションでヘッダーを編集できます。
「配色」の項目でヘッダーの配色を編集できます。今回は、「スキーム：2」を選択しましょう。
メール登録者バナー
次にパスワードページのメール登録者バナー」セクションを編集していきます。
見出しを編集します。「Opening soon」と書かれているブロックをクリックしてください。
「見出し」の項目でセクションの見出しを編集できます。今回は、「Coming Soon ...」としておきます。
テキストを編集します。「Be the first to know when we launch.」と書かれているブロックをクリックしてください。
「説明」の項目で、セクションの説明テキストを編集できます。テキストの入力欄に
「メールアドレスを登録していただくと、UnReact Accessories の最新情報や開店日をいち早くお知らせいたします。」
と入力してください。
メール登録者バナーの編集は以上で完了です。
パスワードフッター
「パスワードフッター」セクションでフッターを編集できます。今回は、特に何も編集する必要はありません。配色を変更したい場合は、「配色」の項目で編集可能です。
以上で、パスワードページの編集は終わりです。
商品ページの編集
次に商品ページを編集していきましょう。「商品ページ」へ移動しましょう。テンプレートは「デフォルトの商品」を選択します。
ヘッダー・フッター
ヘッダーとフッターのセクションは、トップページで編集した設定が適用されています。基本的には、先ほど設定したパスワードページ以外は同じ設定が適用されているので特に設定することはありません。
商品情報
「商品情報」のセクションを編集していきます。
商品情報の設定
「デスクトップ上のコンテンツ固定表示を有効にする」のチェックボックスで、スクロール時に右側のコンテンツ表示を固定するかどうかを設定できます。今回は固定させたいので、チェックをつけたままにしてください。
「配色」で、セクションの配色を設定できます。今回は「スキーム：1」を選択します。
「メディア」の設定は基本的に、トップページの「特集商品」のセクションと同様です。思い出しながら色々試してみてください。
「モバイルのレイアウト」では、スマホ時に画像をどのように表示するかを選択できます。今回は「サムネイルを表示する」に変更しましょう。
販売元の設定
「テキスト」ブロックで、販売元が設定されています。
これは「動的ソース（Dynamic Sources）」という機能です。動的ソースとは、コンテンツを動的に表示するための仕組みです。これにより、テーマ設定で選択されたコンテンツを自動的にページに表示できるようになります。
複数の販売元が存在するストアの場合、チェックを入れると顧客も販売元を判別することができるので、このように販売元を表示すると良いでしょう。
動的ソースを設定できるフィールドには動的ソースアイコンがあります。アイコンをクリックすると、接続することができるデータが表示されます。
タイトルの設定
「タイトル」のブロックには、編集項目はありません。ブロックなので、順番を入れ替えて表示順を変更することはできます。
商品価格の設定
「商品価格」のブロックには、編集項目はありません。ブロックなので、順番を入れ替えて表示順を変更することはできます。
バリエーションピッカーの設定
「バリエーションピッカー」のブロックで、バリエーションを選択する UI に関する設定ができます。
「スタイル」で、バリエーションピッカーのスタイルを設定できます。今回は「ピル型ボタン」を選択します。
「見本（英語だと Swatch）」で、色見本などの形を設定できます。この設定に関してはこちらの公式サイトの説明を参考にしてください。
今回はこちらの設定は関係ないのでスルーします。
数量セレクターの設定
「数量セレクター」のブロックには、編集項目はありません。ブロックなので、順番を入れ替えて表示順を変更することはできます。
購入ボタンの設定
「購入ボタン」のブロックで、カートに追加ボタンや今すぐ購入ボタンの設定を変更できます
「動的チェックアウトボタンを表示」のチェックボックスで、今すぐ購入ボタンを表示するかどうかを設定できます。今回はボタンを表示したいので、チェックをつけます。「動的チェックアウトボタン」は、顧客の端末によって Apple Pay や Google Pay などの決済手段をサジェストしてくれる機能です。
「ギフトカードの受取人情報フォームを表示する」のチェックボックスで、商品がギフトカードの場合の情報入力フォームを表示するかどうかを設定できます。
今回はギフトカード商品は扱わないので、この設定は関係ありません。
商品説明の設定
「商品説明」のブロックには、編集項目はありません。ブロックなので、順番を入れ替えて表示順を変更することはできます。
共有の設定
「共有」ブロックで、商品 URL を共有するための UI に関する設定を変更できます。
「テキスト」で表示されるテキストを設定できます。今回は「Share」のままで OK です。
関連商品
「関連商品」のセクションを編集していきましょう。
見出しの設定
「見出し」で、セクションの見出しを設定できます。今回は「あなたへのおすすめ」というテキストにします。
そのほかの設定
そのほかの設定に関しては、基本的にはトップページの「特集コレクション」と同じ設定です。思い出しながら色々試してみてください。
コレクションページの編集
次は、「コレクションページ」を編集していきます。
「コレクションページ」に移動しましょう。テンプレートは「デフォルトのコレクション」を選択します。
コレクションバナー
「コレクションバナー」のセクションで、コレクションのバナー表示を設定できます。
「コレクションの説明を表示する」のチェックボックスで、コレクションの説明を表示するかどうかを設定できます。今回はコレクションに説明は設定していないので、チェックは外しておきます。
「コレクションの画像を表示する」のチェックボックスで、コレクションに設定している画像を表示するかどうかを設定できます。今回は画像を表示したいので、チェックをつけます。
「配色」でバナー部分の色を設定できます。今回は「スキーム：1」を選択してください。
商品グリッド
「商品グリッド」のセクションで、コレクションの商品一覧表示の設定ができます。
商品グリッドの設定
「ページあたりの商品数」で 1 ページあたりに表示される商品数を変更できます。今回はテストなので少なめの「8」くらいに変更しておきます。
「デスクトップの列数」で、PC で見た時に何列で表示するかを選択できます。今回は列数を「4」に設定してください。
「配色」で、コレクション一覧の色を設定できます。今回は「スキーム：1」を使用します。
商品カードの設定
商品カードの設定はこれまでと基本的に同じです。復習も兼ねて触ってみてください。
絞り込みと並び替えの設定
「絞り込みを有効にする」のチェックボックスで、絞り込みを表示します。絞り込みは、Shopify 公式が提供している「Search & Discovery」アプリでさらに拡張することができます。アプリとの連携は、今回の記事では割愛します。
「デスクトップの絞り込みレイアウト」で、絞り込みの UI を変更できます。今回は「ドロワー」を選択します。
「並び替えを有効にする」のチェックボックスで、一覧の並び替えをできるようにするかどうかを設定できます。
モバイルのレイアウトの設定
「モバイルでの列数」で、スマホで見た時に何列で表示するかを選択できます。今回は列数を「2」に設定してください。
セクションの余白の設定
セクションの余白の設定は、基本的にほかのセクションと同じです。
そのほかのページ
ここまでで編集したページ以外にも Shopify にはページがあります。
今回は編集しないページもありますので、簡単に紹介しておきます。
コレクションリスト
「コレクションリスト」のページでは、コレクションの一覧が表示されます。
見出しやコレクションの並び順などを編集することができます。
ブログ
「ブログ」のページでは、ブログ記事の一覧が表示されるページの設定を行うことができます。
レイアウトや記事のサムネイルを表示するかどうかなどを編集することができます。
ブログ記事
「ブログ記事」のページでは、ブログ記事詳細の設定を行うことができます。
「ブログ記事」セクションに、「記事のサムネイル」ブロックや「タイトル」ブロックがあり編集が可能です。
カート
「カート」のページでは、ユーザーのカートページの表示設定を行うことができます。
「アイテム」セクションと「小計」セクションがあり、それぞれカートの見た目などを編集可能です。カートページに関しては、前の記事で解説したように「テーマ設定」にも編集項目があります。
404
「404」のページでは、リンク切れやユーザーがアクセスしたページが存在しない場合に、表示されるエラーページの設定を行うことができます。
Dawn の場合は、編集可能な項目はありません。
以上が、代表的なストアのページになります。
まとめ
今回は、ストアのトップページ以外のカスタマイズを行いました。トップページ以外にも設定が必要な箇所があるので、細かいところも忘れないように設定をしておきましょう。
今回の記事は、以下の記事を参考にしています。
【Shopify マスターへの道】#8 トップページ以外を編集しよう
今回の振り返り
- パスワードページを編集できた
- 商品ページを編集できた
- コレクションページを編集できた
- そのほかのページについて理解した
今回は以上になります。
次回は、サイトのフォントを編集します。
次回の記事はこちら
また、デモサイトの構築の際に使えるアプリはこちらです。
- シンプルお知らせ一覧｜お手軽ブログ一覧挿入アプリ
「シンプルお知らせ一覧｜お手軽ブログ一覧挿入アプリ」は、ストアにノーコードでお知らせセクションを挿入できるアプリです。
Shopify ストアにお知らせセクションを挿入してブログ・ニュース一覧を表示できるアプリについて徹底解説｜ご利用ガイド
- シンプル Wishlist ｜お手軽お気に入り
「シンプル Wishlist ｜お手軽お気に入り」は、Shopify ストアに簡単にお気に入り機能を導入することができるアプリです。
.png&w=1920&q=75)
.png&w=1920&q=75)
.png&w=1920&q=75)
