トップページの設定（その他）
特別ニュースバナー
ショップコンセプト
写真+文章でショップのコンセプトを表示できます。商品紹介に移る前にお店の想いを伝えましょう。
『コンセプトセクション ON/OFF』で表示の有無を、写真、
『コンセプトイメージ』にショップを象徴するような写真を、『コンセプト見出し』『コンセプト本文』にお店の魅力を伝えられるようなテキストを入力します。写真は左側に、文章は右側にレイアウトされます。（スマホなどの画面サイズでは自動的に縦横にレイアウトされます。）
『コンセプトからのボタン名』『 ボタンリンク先URL』を設定すると、ボタンが表示されます。Aboutページなどにリンクするのがお勧めです。
コンセプトの表示以外に、ボタンは必要ない場合は『コンセプトからのボタン名』を空欄にすることでボタンは表示されません。
カテゴリーコレクションを設定する（2022年6月のアップデートで追加されました！）
コレクションは「画像 + リンク先URL」を１セットとし、リンク付き画像を６つまで設定することができます。「タイトル」は任意項目で、設定すると画像の上にボタンデザインでリンクされ、空欄にすると画像リンクのみとなります。画像そのものに文字デザインを入れる場合は「タイトルなし」、写真そのままで設定する場合は「タイトルで説明」という使い方がおすすめです。
UNVIERSEでは、カテゴリーはメインナビゲーションに全て表示されます。そのため、このカテゴリーコレクションではカテゴリー全てを網羅しようとするよりは、「その時PRしたいカテゴリーだけを、できるだけ少なく、大きな画像」でデザインすると効果的です。カテゴリーが6つ以上ある場合は6つ以内で、カテゴリーが6つ以内であっても、その時々でよりPRしたいカテゴリーをピックアップしてみてください。
綺麗にレイアウトするポイント
より自由にデザインしていただくため、テーマ側では縦横比率を指定していませんので、縦横比は自由に決めていただけます。ただし必ず全ての画像で縦横比を統一してください。縦横比が統一されることで、折り返した時にうまく整列させることができます。
「画像の並べ方」で列の数を2列〜4列で選択することができます。画像数、奇数具数に応じて、最適な列数を選択してください。例えば3つの場合は「3列並び（スマホでは1列）」が、6つの場合は「3列並び（スマホでは2列）」が適しています。「レイアウトタイプ」では固定幅、白背景の有無、100%幅ぴったり、などから選択できます。100%幅で並べるデザインは大きめの画像を2つ、3つだけで利用する場合におすすめです。
「タイトルボタンカラー」は白地に黒、黒地に白、ワンポイントカラーを反映、から選択できます。「白枠ボックスの有無」もお好みで設定できます。
主にカテゴリーページへの動線を想定していますが、もちろん特定の商品ページへの特集コーナーなど、自由に活用してください！
ピックアップ商品の表示
ピックアップ商品として3点を大きく表示できます。
商品リストの最初の３つの商品がピックアップ対象として表示されます。BASE管理画面では商品順序をドラッグドロップで簡単に選択・並び替えができますので、個別にサムネイル写真やリンク先を手動入力する必要はありません。
ピックアップの見出しは初期設定では「FEATURED PRODUCTS」となっていますが、自由に変更できます。また、このピックアップ表示自体のON/OFFも選択できます。
スマホで小さく３つ横並びにするか、１つづつ大きく並べるかを選べます。
お知らせ機能 1（テキスト入力版）
トップページに表示するお知らせを3件まで設定できます。日付、内容、リンク先を手動で入力します。ブログ機能と連動する訳ではありませんのでご注意ください。
お知らせ機能 2 （ブログApp 連動版）
テキスト入力版のお知らせとは別に、ブログAppに連動した新着お知らせも表示できます。トップページの下の方に、ブログの新着3件がサムネイルとともに表示されます。
この場合、ブログ１つ１つに必ず画像が必要であることにご注意ください。
特集カテゴリーセクション
特集カテゴリーセクションとは、トップページをスクロールしていった下の方に、もう１つの大きなビジュアルを作り、ボリューム感と見ごたえ感を演出するセクションのことです。
画像の表示方法について、商品一覧下のボタンが通常リンクの場合はスクロール視差効果（スクロール速度をずらして表示する表現）に、無限読み込み式の場合は固定表示になります。またモバイル表示では固定表示となります。
メイン画像と同じように、写真、キャッチコピー、ボタンからのリンク先などを設定できます。
この場合、石鹸の写真を大きく取り上げて、石鹸カテゴリーページにリンクさせています。
商品一覧サムネイルのレイアウト（TOPとカテゴリー一覧共通）
商品一覧でのサムネイル列数を３か４から選べます。この設定は、トップページ、カテゴリーページで適用されます。
設定状態はパソコンの広い画面での状態となり、幅の狭くなったタブレット、スマホ画面ではレスポンシブに3列、2列と自動的にレイアウトされます。
商品一覧からの導線ボタン
より効果的な「もっと見る」ボタンへ
BASEのほとんどのテーマでは、トップページで下に行けば行くほど自動的に（または「もっと見る」ボタン）により、商品を読み込んで表示するようになっています。しかし、商品数が多いほど「全商品を、新着順に、無限に読み込む」ということが訪問者にとっては効率的とは言えない表示形式になる場合があります。
そのため、UNVIERSEではあえてトップページでの無限読み込みをせず、固定数（ピックアップ + 上位12件）だけを表示し、その下に特集カテゴリーセクション、購入案内のあるフッターウィジェットを表示して、訪問者とショップにとってより有意義な動線を作れるように設計しています。
商品一覧下ボタン名とボタンリンク先URLを設定する
テーマ設定に『【TOP】 商品一覧下ボタン名』という欄があります。ここにボタンの名称、リンク先URLを指定すると、トップページ商品一覧下にボタンが表示されます。
特定のカテゴリーページのURLを指定することで、トップページからお勧めのカテゴリーなどに誘導できます。
カテゴリー関係なく全商品を表示するページも作りたい場合
カテゴリーの1つに「全商品」用のカテゴリーを作成し、全ての商品をそのカテゴリーの属させます。すると、全商品を表示できるページができますので、そちらにて全商品表示、さらに「追加読込ボタン」にて無限に読み込んで表示させていくことができます。
「全商品」の名称は自由ですが、例としてデモサイトの1つでその事例を作成してあります。ここではナビゲーションの一番左の「FULL RANGE」がすべての商品を表示するものです。
「もっと見る」ボタンによる無限読み込み式にする
BASEの他の多くのテーマのように「もっと見る」ボタンで「トップページ上で商品を下にどんどん読み込むスタイル」で利用したいという場合、このスイッチをONにしてください。
「TOP/カテゴリ商品一覧での読込ボタン名」の設定により「もっと見る」ボタンの表現を変更できます。この設定は従来から無限読み込み式であるカテゴリー一覧用の設定項目として存在していましたが、TOPでの無限読み込み化機能の追加に伴い、双方に反映されるようになりました。
ONにした場合「もっと見る」ボタンが表示され、1つ上の項目で設定する「商品一覧下ボタン（ボタン名、リンク先URL）」は無効化されます。また、「特集カテゴリーセクション」のスクロール視差効果（スクロール速度をずらして表示する表現）も無効化されます。
メールマガジン登録フォームを設定する
2022年1月17日（月）に「メールマガジンApp」がアップデートされ、ショップページにメールマガジン登録フォームを設置してまだ購入したことがないお客様にもメールマガジンを送れるようになりました！
フッターにメルマガ登録フォームを設置する
「メールマガジンApp」をインストールすると、ショップのフッター部分右側に登録フォームが表示されます。
従来まで、この場所には小さな検索フォームが設置されていましたが、メルマガAppを利用している場合は差し替えの形でメルマガ登録フォームとなります。メルマガAppを利用していない場合（かつ検索Appを利用している場合）は検索フォームが表示されます。
メルマガAppを利用していても、登録フォームを表示せず検索フォームのままにしたい場合などのため、デザイン設定の「【フッター】メルマガ/検索の切り替え」で「メルマガフォーム」または「検索フォーム」を選ぶことができます。
メールマガジンのタイトルと説明文を編集する
デザイン設定の最下部あたりにメルマガAppに関する設定があります。メルマガタイトルと説明文を自由に編集できます。
アクセス時のポップアップで表示する
興味を持ってくれている人、まだ迷っていて購入まではしていない人でも、その後のメルマガによる接点があれば再度ショップに訪れて購入してくれる可能性が非常に高くなります。せっかくのメールマガジンを積極的に活用するため、サイトアクセスと同時に画面に登録フォームを表示することができます。
このメルマガ登録を積極的に促す見せ方は、海外のECショップでも必ずと言っていいほど採用されています。しっかりとしたメールマガジン運営をする予定であれば、ぜひ活用してください。
1. ポップアップフォームを有効にする
テーマ設定「【メルマガApp】ポップアップ表示 ON/OFF」を「ON」にし、ショップのトップページにアクセスしてポップアップが表示されることを確認してください。
2. ビジュアル画像を設定する
「ポップアップビジュアル」に画像をアップロードします。画像の縦横比に指定はありませんが、レイアウト上「縦長〜正方形」に近い表示となるためそのような比率をお勧めします。インスタグラム画像をイメージいただくと良いかもしれません。
画像はあってもなくても構いませんが、お客様がこれから受け取とうとするメールがどんなものなのか、文字だけよりもイメージがあった方が登録したくなるかもしれません。
3. タイトルの書体を選ぶ
タイトルの書体はお好みで選んでください。既にお気づきの通り、編集したメールマガジンのタイトルと説明文はこのポップアップにも反映されます。
4. ポップアップ表示頻度を選ぶ
このポップアップは、トップページにアクセスすると画面を覆うように表示されます。何度も表示されてしまわぬよう、「ポップアップ表示頻度」にて前回のアクセスからどのくらいの時間が経過したら再表示するかを設定します。
仕組みとしては
- 初めてのアクセスであればポップアップが表示されます。
- そのブラウザにてアクセスした時間を記録します。
- 設定が「1日」であれば、24時間以内はポップアップは再表示されません。24時間経過後に再度アクセスするとポップアップが表示されます。
- ブラウザを閉じたりしても時間はリセットされないようになっています。
- 設定は「1日、3日、5日」から選択します。「毎回」は表示テストするときのみに使用します。
「一度は必ず見てほしい & 不快感を与えたくない」のバランスがとても大切です。 ショップオーナーは当然何度もショップを確認するため、1日に1回じゃ全然表示されないように感じてしまうかもしれませんが、潜在的なお客様には1度でも目に触れられれば良いという程度で、不快感のないように配慮しましょう。
もちろん、どんな人がどんな頻度でアクセスするかは予測困難ですので、邪魔に思われることもゼロではありませんが、「1日」か「3日」程度の設定であれば問題ないでしょう。「毎回」にしたままにしないようご注意ください！
アクセス時のポップアップバナーを表示する
サイトへのアクセス時、画面上に強制的に画像バナーを表示できます。この機能はメルマガのポップアップ機能と同等ですので、メルマガポップアップと同時に利用することはできません。必ずどちらかのみONにしてご利用ください。
1. ポップアップフォームを有効にする
テーマ設定「【ポップアップバナー】表示 ON/OFF」を「ON」にします。ONにするときは必ずその上の「【メルマガApp】ポップアップ表示 ON/OFF」を「OFF」に。
2. ビジュアル画像を設定する
「バナー画像」に画像をアップロードします。画像の縦横比に指定はありませんが、レイアウト上「縦長〜正方形」に近い表示となるためそのような比率をお勧めします。インスタグラム画像をイメージいただくと良いかもしれません。
3. デザインタイプを選ぶ
「画像バナーのみ」とは、そのバナーがすでに文字を入れるなどしてデザインされた画像の場合、画像のみを表示するものです。「画像+テキスト+ボタン」では、画像の下にテキストとボタンを設定できます。バナーを用意しておらず単なる写真を利用したい場合などに利用します。
4. リンク先URLを設定する
バナーからのリンク先URLを設定します。。デザインタイプ「画像」の場合は画像に対してリンクが貼られます。デザインタイプ「画像+テキスト+ボタン」を選ぶ場合はボタンにリンクが設定されます。
→「画像+テキスト+ボタン」を利用する場合
リンク先URLに続いて「説明文テキスト」「ボタンテキスト」を設定します。
バナーはスマホ画面でも共通して表示されます。「見出しテキスト」「説明文テキスト」の分量によっては画面から見切れます。ここに長文を入れようとせず、短いテキストでご利用ください。
4. バナー表示頻度を選ぶ
このポップアップは、トップページにアクセスすると画面を覆うように表示されます。何度も表示されてしまわぬよう、「ポップアップ表示頻度」にて前回のアクセスからどのくらいの時間が経過したら再表示するかを設定します。
仕組みとしては
- 初めてのアクセスであればポップアップが表示されます。
- そのブラウザにてアクセスした時間を記録します。
- 設定が「1日」であれば、24時間以内はポップアップは再表示されません。24時間経過後に再度アクセスするとポップアップが表示されます。
- ブラウザを閉じたりしても時間はリセットされないようになっています。
- 設定は「1日、3日、5日」から選択します。「毎回」は表示テストするときのみに使用します。
「一度は必ず見てほしい & 不快感を与えたくない」のバランスがとても大切です。 ショップオーナーは当然何度もショップを確認するため、1日に1回じゃ全然表示されないように感じてしまうかもしれませんが、潜在的なお客様には1度でも目に触れられれば良いという程度で、不快感のないように配慮しましょう。
もちろん、どんな人がどんな頻度でアクセスするかは予測困難ですので、邪魔に思われることもゼロではありませんが、「1日」か「3日」程度の設定であれば問題ないでしょう。「毎回」にしたままにしないようご注意ください！