特徴
BASEデザインテーマ「Sunny.〈サニードット〉」は、ベーシックな1カラムレイアウトをベースにしたデザイン。
LPのような作りの中に、ECサイトに必要な要素を詰め込みました。
- TOPページにスライドを3枚まで設置可能
- TOPページにInstagram埋め込み表示可能（Sauce by SNPT）
- TOPページのインフォメーションバーでお知らせ表示可能
- TOPページにYouTube動画の埋め込み可能
- TOPページのメインコンテンツの並び順を任意変更可能
- TOPページのOGP画像変更可能
- 商品・ブログ一覧を1カラム〜6カラムまで任意設定可能（スマホでは1〜3カラム）
- ヘッダー追従の有無を調整可能
- 画面下部に追従バナー設置可能
- どのページからでもポップアップ表示可能なFAQを10件まで設置可能
- フッターやABOUTページに送料やお支払い方法を表示可能
- スクロールアニメーションの有無を切り替え可能
- TOP／商品ページにセールAppで割引している商品の一覧を表示可能
- 商品ページに最近見た商品の一覧を表示可能
▼こんなショップにおすすめ
- 小規模〜中規模
- ただ商品を並べるだけでなく、ECサイトを格好良く見せたい
- カチっとしたデザインよりも、柔らかい雰囲気のデザインを求めている
- Instagramの埋め込み機能が欲しい
- ほどほどに機能が充実していて、デザイン知識がなくてもカスタマイズしやすいテーマが良い
デモサイト
Sunny.を実際に適用したデモサイトです。
Sunny.デモサイト
ページ構成
テーマが適用されるのは下記のページになります。
カートページはカスタマイズできません。
基本ページ
デフォルトで用意されているページです。非表示にはできません。
- TOP
- ABOUT
- 商品詳細
- CONTACT
- プライバシーポリシー
- 特定商取引法に基づく表記
Appsページ
該当するAppを利用すると表示されるページです。
- 商品検索結果（商品検索App）
- カテゴリ（カテゴリ管理App）
- ブログ一覧（Blog App）
- ブログ記事（Blog App）
- コミュニティ（コミュニティApp）
- ショップコイン（ショップコインApp）
- メンバーシップページ（メンバーシップApp）
- マイページ（メンバーシップApp）
- ログインページ（メンバーシップApp）
各Appsの内容については、BASE Appsのページからご確認ください。
※有料テーマは「ページ追加App」を使った任意ページの追加はできませんのでご注意ください。「ページ追加App」は無料の公式テーマのみで使うことが可能です。
カートページ
商品詳細ページで購入アクションを起こすとカートページに遷移します。 カートページから購入情報入力〜購入完了までのページはBASEのサービス内で共通のためカスタマイズできません。
使い方
はじめに
無料でかんたんにネットショップを開設できるサービス「BASE」にまずはご登録ください。
登録後、「BASEデザインマーケット」から「room.」のデザインテンプレートを購入することで使えるようになります。
デザインテンプレートを購入すると、BASE管理画面の「デザイン編集」→「テーマ」から購入したテーマを選択できるようになります。テーマを選択すると、デザインが適用されます。「テーマ設定」に移ると備わっている機能が表示され各項目を設定できます。
基本設定 - ロゴ
画像を使用する
ONでロゴ画像、OFFでテキストロゴになります。
ロゴ画像のサイズは、横150〜200pxの横長サイズ推奨（デモサイトは横128x縦40）。
テキストロゴについては__全角8文字以内、半角14文字以内推奨__です。それ以上を超えるとスマホ表示の時に末尾が省略されます。
このテーマでテキストロゴはあまり推奨しておりませんので、ロゴ画像を用意できない場合でも簡単にロゴ作成できるBASE Appsの「ショップロゴ作成」などをご利用ください。
基本設定 - 背景
カラーから選ぶ
サイト全体の背景色を設定できます。
パターンから選ぶ
背景に画像を設定できます。
「背景画像を繰り返す」にチェックを入れると背景が縦横にリピート表示されます。
一括設定
サイト全体で一括で変更できる箇所の設定です。
【一括設定】テキストカラー
サイト全体の文字色。
【一括設定】セール価格：文字色
セールApp利用時の、セール価格の文字色。
【一括設定】ポイントカラー
サイトのポイントになる要素の色。
具体的には下記の要素。
- メニュー開閉ボタンの背景色
- TOPページ インフォメーションバーの背景色
- 見出しの装飾に使っているボーダーの色
- 各ボタンの背景色
- フッターお支払い方法の各決済ごとの枠線
【一括設定】ポイントカラー上の文字
ポイントカラーが設定された要素の上の文字色。
背景色を変更して視認性が悪い場合に使います。
【一括設定】ポイントカラーにパターンカラーを使う
ポイントカラーに、テーマに備わっているパターンカラーを使います。
BASEのカラーピッカーでは1色の表現しかできないですが、パターンカラーはこちらで用意した9種類のグラデーションカラーを設定することができます。ボタンを目立たせることができ、サイトのアクセントにもなります。
【一括設定】パターンカラーを選択
パターン1〜9のほかに下記のパターンも選択できます。
- デフォルト → デフォルトでテーマに設定されている色を使います。
- カスタムパターン → カスタムパターンカラーを自分で2色選んでグラデーションさせて使います。
- 透明 → ポイントカラーを透明にします。
【一括設定】カスタムパターン：カラー1
パターンカラーで「カスタムパターン」を選択した場合に適用されます。
「カスタムパターン：カラー2」とグラデーションされたパターンカラーとなります。
【一括設定】カスタムパターン：カラー2
パターンカラーで「カスタムパターン」を選択した場合に適用されます。
「カスタムパターン：カラー1」とグラデーションされたパターンカラーとなります。
【一括設定】ボタンのボーダー（枠線）を消す
デフォルトではボタンは文字色と同じ枠線が付くようになっています。
ONにすると枠線を消すことができます。
【一括設定】フォントを明朝体にする
フォントはデフォルトはゴシック体ですが、ONにすると明朝体に変更することができます。
【一括設定】フォントサイズ（PC）
PC表示時のフォントサイズを1〜6段階で微調整できます。
※デザインが崩れない程度の調整しかできませんのであくまでも微調整です。大きく変化させたい場合は「独自のスタイルシートを追加する」機能などでCSSで調整が必要となります。
【一括設定】フォントサイズ（スマホ）
スマホ表示時のフォントサイズを1〜6段階で微調整できます。
※デザインが崩れない程度の調整しかできませんのであくまでも微調整です。大きく変化させたい場合は「独自のスタイルシートを追加する」機能などでCSSで調整が必要となります。
【一括設定】PC：商品・ブログ一覧の列数
PC表示時の商品一覧・ブログ一覧の列数を1〜6列で設定できます。
【一括設定】スマホ：商品・ブログ一覧の列数
スマホ表示時の商品一覧・ブログ一覧の列数を1〜3列で設定できます。
【一括設定】商品・ブログ一覧のサムネイル画像比率
商品一覧・ブログ一覧の画像の比率を、指定した比率に合わせてトリミング表示します。
選択できる比率は下記です。
- 指定なし
- （正方形）1:1
- （横長）3:2
- （横長）4:3
- （横長）16:9
- （縦長）2:3
- （縦長）3:4
- （縦長）9:16
リスト表示される商品画像の大きさが統一された方がサイトの見栄えが良くなります。
もちろん、商品登録の段階で毎回同じサイズの商品画像を用意することで対応可能です。あくまでもオプションとしてお使いください。
【一括設定】商品・ブログ一覧のフォントサイズ（PC）
PC表示時の商品・ブログ一覧のフォントサイズを1〜6段階で微調整できます。
全体設定のものよりこちらが優先されます。
※デザインが崩れない程度の調整しかできませんのであくまでも微調整です。大きく変化させたい場合は「独自のスタイルシートを追加する」機能などでCSSで調整が必要となります。
【一括設定】商品・ブログ一覧のフォントサイズ（スマホ）
スマホ表示時の商品・ブログ一覧のフォントサイズを1〜6段階で微調整できます。
全体設定のものよりこちらが優先されます。
※デザインが崩れない程度の調整しかできませんのであくまでも微調整です。大きく変化させたい場合は「独自のスタイルシートを追加する」機能などでCSSで調整が必要となります。
【一括設定】見出し：日本語と英語を逆転する
ONにすると各見出しの英語表記と日本語表記を逆にします。
デフォルトでは英語を大きく表示して、その下にサブタイトルとして日本語を小さく表示するようになっていますが、それを日本語を大きく、英語を小さく表示するようにします。
【一括設定】見出し：サブタイトルを消す
見出しのサブタイトルを非表示にします。
ヘッダー
サイト上部のヘッダー周りの設定です。
【ヘッダー】文字色
ヘッダー部分の文字色。
【ヘッダー】背景色
ヘッダー部分の背景色。
【ヘッダー】スマホ：画面上部に固定する
ONにするとスマホ表示時にヘッダーを画面上部に画面固定表示にします。
OFFにすると画面固定表示にしません。
【ヘッダー】PC：画面上部に固定する
ONにするとPC表示時にヘッダーを画面上部に画面固定表示にします。
OFFにすると画面固定表示にしません。
【ヘッダー】PC：ナビゲーションを表示する
PC表示時に、ヘッダーにナビゲーションを表示します。
ナビゲーションに表示されるリンクは下記になります。
- NEW ARRIVALS
- CATEGORY（カテゴリ管理App）
- ABOUT
- BLOG（BLOG App）
- SHOP GUIDE
- FAQ
- CONTACT
※すべてのリンクを表示することはできないので、一部のリンクは省略しています。右上のメニュー、もしくはフッターにはすべてのリンクが表示されます。
【ヘッダー】メニューボタン：アイコンの色
右上メニューボタンのアイコンの色を変更できます。
「【一括設定】ポイントカラー上の文字」よりもこちらの設定が優先されます。
【ヘッダー】メニューボタン：背景色
右上メニューボタンの背景色を変更できます。
「【一括設定】ポイントカラー」よりもこちらの設定が優先されます。
【ヘッダー】メニューボタン背景色にパターンカラーを使う
メニューボタン背景色に、テーマに備わっているパターンカラーを使います。
BASEのカラーピッカーでは1色の表現しかできないですが、パターンカラーはこちらで用意した9種類のグラデーションカラーを設定することができます。ボタンを目立たせることができ、サイトのアクセントにもなります。
【メニューボタン】パターンカラーを選択
パターン1〜9のほかに下記のパターンも選択できます。
- デフォルト → デフォルトでテーマに設定されている色を使います。
- カスタムパターン → カスタムパターンカラーを自分で2色選んでグラデーションさせて使います。
- 透明 → ポイントカラーを透明にします。
※ カスタムパターンは「【一括設定】カスタムパターン：カラー1」「【一括設定】カスタムパターン：カラー2」が使われます。
【ヘッダー／フッター／開閉メニュー】NEW ARRIVALS（商品一覧）リンクを表示する
ONにすると、NEW ARRIVALS（TOPページの商品一覧）へのリンクを表示します。
OFFにすると非表示になります。
開閉メニュー
ヘッダー右上のボタンを押すと表示されるメニュー周りの設定。
【開閉メニュー】背景色
開閉メニューの背景色を変更できます。
開閉メニュー】文字色
開閉メニューの文字色を変更できます。
【開閉メニュー】SNSリンクを表示
開閉メニュー内にある各SNSへのリンクの表示／非表示を切り替えられます。ONにすると表示、OFFにすると非表示になります。
※各SNSの表示については、テーマではなくBASEの管理画面から設定を行います。
BASE管理画面→ショップ設定→SNS設定 の各入力エリアにそれぞれ設定することでリンクアイコンが追加されます。必要ないものは空欄にすると表示されません。
【開閉メニュー／フッター共通】任意リンク①〜③：テキスト
開閉メニュー内の「プライバシーポリシー」「特定商取引法に基づく表記 」のリンクの並びの下に、任意のテキストリンクを3つまで置くことができます。そのリンクに使うテキストを設定できます。「任意リンク①〜③：URL」とセットで設定します。空欄の場合は表示されません。
【開閉メニュー／フッター共通】任意リンク①〜③：URL
任意リンク①〜③のURLを設定します。
TOPページ
TOPページで設定できるオプションについて。
【TOPページ】メイン画像
TOPページにメイン画像を設定できます。
メイン画像はスライド式で最大3枚まで設定できます。
【TOPページ】メイン画像を表示
メイン画像エリアの表示／非表示を切り替えられます。
ONにすると表示、OFFにすると非表示になります。
【TOPページ】メイン画像をヘッダーと重ねる
ONにすると、メイン画像の上にヘッダーが重なるデザインになります。
ヘッダー背景色がない場合はON、ヘッダーに背景色がある場合はOFFがおすすめです。
▼ONの場合
▼OFFの場合
【メイン画像①〜③】画像（PC表示）【推奨サイズ横2880×縦1620】
PC表示時のメイン画像を設定できます。
※スライドを表示したい場合の必須項目です。この項目が空欄（画像が設定されていない）の場合は、他の項目が入力されていてもその番号のスライドは表示されません。
【メイン画像①〜③】画像（スマホ表示）【推奨サイズ横750×縦1000】
スマホ表示時のメイン画像を設定できます。
空欄の場合は、スマホでもPC用の画像が表示されます。
※スマホ用の画像だけではスライドは表示されません。スマホ用しか必要がない場合でも、必ずPC用の画像にも設定してください。
【メイン画像①〜③】画像上にテキストを配置する
ONにすると、画像の上に任意のテキストを重ねて表示できます。
OFFにすると非表示になり、シンプルに画像のみの表示になります。
【メイン画像①〜③】タイトル
「画像上にテキストを配置する」がONの場合に画像の上にタイトルを表示します。
あまり長くなると見栄えが悪くなるので、30文字程度に収めるのがおすすめです。
【メイン画像①〜③】説明
「画像上にテキストを配置する」がONの場合に、小さめの文字で説明を追加できます。
こちらもあまり長くなると見栄えが悪くなるので、サブタイトルとして30~40文字以内の短めの文章を設定するのがおすすめです。タイトルとのバランスを見て文字だらけにならないようにすると良いと思います。
【メイン画像①〜③】リンクURL
スライドにリンクを付けたい場合に設定します。
【メイン画像①〜③】ボタンテキスト
「画像上にテキストを配置する」がONで、リンクURLに入力がある場合にボタンが表示されます。
デフォルトは「VIEW MORE」となっていますが、任意のテキストに変更できます。
空欄の場合はボタンが非表示になります。
※ボタンの有無に関わらず、リンクURLが設定されている場合はスライド全体がリンクになります。
【メイン画像①〜③】文字色
「画像上にテキストを配置する」がON の場合の、テキストの文字色を変更できます。
【メイン画像①〜③】背景色
スライドに透過画像などを設定した場合に背景色を設定しておけます。
全体の背景色と合わせておきたい場合は空欄にすればOKです。
【TOPページ】インフォメーションバー
メイン画像下に「インフォメーションバー」としてお知らせを表示できます。
【TOPページ】インフォメーションバーを任意入力にする（※OFFの場合はBlogAppのブログ固定記事が入ります）
ONの場合は、任意入力のお知らせエリアとしてお使いいただけます。
デフォルトはOFFになっており、OFFの場合は「BLOG App」の投稿時に「この記事を固定にする」にチェックを入れた投稿が表示されるエリアになります。
【TOPページ】インフォメーションバー：タイトル
お知らせに「NEWS」のようなタイトルを付けられます。
主に目立たせるためのデザイン用途のパーツのため、あまり長いタイトルを付けると見栄えが悪くなるので、「NEWS」や「BLOG」のような短い単語を設定するのがおすすめです。
必要なければ空欄にすると非表示になります。
【TOPページ】インフォメーションバー：詳細
お知らせの詳細内容を設定します。
【TOPページ】インフォメーションバー：リンクURL
お知らせの詳細内容にリンクを設定できます。
【TOPページ】ABOUT US
TOPページにABOUTページへの導線エリアを設置できます。
【TOPページ】ABOUT USを表示
ONにすると表示、
OFFにすると非表示になります。
【TOPページ：ABOUT US】テキストアニメーションを表示
「ABOUT US」の文字が右から左に流れるテキストを表示します。
【TOPページ：ABOUT US】テキストアニメーションを停止
「ABOUT US」の文字が右から左に流れるアニメーションを停止します。
【TOPページ：ABOUT US】テキストアニメーションの文字
アニメーションさせるテキストを変更できます。
文字の長さは5文字〜10文字程度推奨です。
【TOPページ：ABOUT US】タイトル
ABOUT USエリアのタイトルを設定できます。
空欄の場合は非表示になります。
【TOPページ：ABOUT US】テキスト
ABOUT USエリアの詳細テキストを設定できます。
空欄の場合は非表示になります。
【TOPページ：ABOUT US】画像【推奨サイズ横1200×縦900】
ABOUT USエリアの画像を設定できます。
空欄の場合は非表示になります。
【TOPページ】YouTube動画埋め込み
TOPページにYouTube動画を埋め込むことができます。
【TOPページ】YouTube動画 埋め込みコード
TOPページにYouTube動画を埋め込むことができます。
該当のYouTube動画から、「共有」→「埋め込む」で表示される埋め込みコードをコピーして貼り付けることで表示できます。空欄の場合は非表示になります。
【TOPページ】PICK UP
TOPページにPICK UPエリアとして任意の商品情報を2つ掲載できます。
【TOPページ】PICK UPを表示
ONにすると表示、
OFFにすると非表示になります。
【TOPページ：PICK UP】テキストアニメーションを表示
「PICK UP」の文字が左から右に流れるテキストを表示します。
【TOPページ：PICK UP】テキストアニメーションを停止
「PICK UP」の文字が左から右に流れるアニメーションを停止します。
【TOPページ：PICK UP】テキストアニメーションの文字
アニメーションさせるテキストを変更できます。
文字の長さは5文字〜10文字程度推奨です。
【TOPページ：PICK UP①〜②】表示
各PICK UPの表示／非表示を切り替えられます。
【TOPページ：PICK UP①〜②】タイトル
PICK UP商品の商品名を設定できます。
【TOPページ：PICK UP①〜②】価格
PICK UP商品の価格を設定できます。
【TOPページ：PICK UP①〜②】テキスト
PICK UP商品の詳細説明を設定できます。
【TOPページ：PICK UP①〜②】画像
PICK UP商品の画像を設定できます。
【TOPページ：PICK UP①〜②】リンクURL
PICK UP商品へのリンクを設定できます。
リンクは商品ページの場合は下記の形式になります。
https://[ショップドメイン]/items/[商品ID]
※商品IDはBASE管理画面「商品登録」の該当ページに進み、アドレスバーに表示されているURLの末尾の数字になります。
例） https://admin.thebase.com/shop_admin/items/edit/30982893の場合
→商品IDは「30982893」
【TOPページ】FEATURE（特集）
画像リンクを最大4つ設置できる特集エリアです。
【TOPページ】FEATURE（特集）を表示
ONにすると表示、
OFFにすると非表示にします。
特集エリアには、画像リンクを最大4つまで設置可能です。
【TOPページ：FEATURE】PC：列数
PC表示時の特集エリアの列数を1〜4列で設定できます。
【TOPページ：FEATURE】スマホ：列数
スマホ表示時の特集エリアの列数を1〜2列で設定できます。
【TOPページ：FEATURE】タイトルを中央寄せにする
ONにすると、画像上にタイトルを設置する場合に中央寄せにします。
OFFにするとデフォルトの左上になります。
【TOPページ：FEATURE】画像比率
特集エリアの画像の比率を、指定した比率に合わせてトリミング表示します。
選択できる比率は下記です。
- 指定なし
- （正方形）1:1
- （横長）3:2
- （横長）4:3
- （横長）16:9
- （縦長）2:3
- （縦長）3:4
- （縦長）9:16
リスト表示される画像の大きさが統一された方がサイトの見栄えが良くなります。
もちろん、すべて同じサイズの画像を用意することで対応可能です。あくまでもオプションとしてお使いください。
【TOPページ：FEATURE①〜④】画像
各特集の画像を設定できます。
画像がない場合は背景色が表示されます。
【TOPページ：FEATURE①〜④】タイトル
各特集のタイトルを設定できます。
画像の上に重ねて表示されます。
必要ない場合は空欄にすると非表示になります。
【TOPページ：FEATURE①〜④】リンクURL
各特集のリンク先を設定できます。
【TOPページ：FEATURE①〜④】文字色
各特集のタイトルの文字色を設定できます。
【TOPページ：FEATURE①〜④】背景色
各特集のタイトルの背景色を設定できます。
【TOPページ】セール商品一覧
セールApp利用時に、TOPページに割引商品の一覧を最大6件表示します。
【TOPページ】セール商品一覧を表示（セールApp）
ONにすると表示、OFFにすると非表示になります。
【TOPページ】商品一覧：タイトル変更
TOPページ商品一覧のタイトルを下記の選択肢の中のいずれかに変更できます。
- NEW ARRIVALS
- PRODUCTS
- NEW ITEMS
- ITEMS
- PRODUCT
- ITEM
- ALL ITEMS
【TOPページ】商品一覧：サブタイトル変更
TOPページ商品一覧のサブタイトルを下記の選択肢の中のいずれかに変更できます。
- 商品一覧
- 新着一覧
- 新着商品一覧
- 商品
- すべての商品
【TOPページ／商品ページ】大カテゴリ一覧
カテゴリ管理App利用時に、TOPページと商品ページに大カテゴリのリンク一覧を表示できます。
【TOPページ／商品ページ】大カテゴリ一覧を表示（カテゴリ管理App）
ONにすると表示、OFFにすると非表示になります。
【TOPページ／商品ページ】大カテゴリ一覧：文字色
大カテゴリ一覧のタイトル部分の文字色を変更できます。
【TOPページ／商品ページ】大カテゴリ一覧：背景色
大カテゴリ一覧の背景色を変更できます。
【TOPページ／商品ページ】大カテゴリ一覧：ボタン文字色
大カテゴリ一覧の各カテゴリのリンクボタンの文字色を変更できます。
【TOPページ／商品ページ】大カテゴリ一覧：ボタン背景色
大カテゴリ一覧の各カテゴリのリンクボタンの背景色を変更できます。
【TOPページ】ブログ一覧
BLOG App利用時にTOPページにブログ一覧を3〜12件表示できます。
記事は新着順になります。任意で変更はできません。
【TOPページ】ブログ一覧を表示（BLOG App）
ONにすると表示、
OFFにすると非表示になります。
【TOPページ】ブログ一覧：最大記事数
表示する記事数を3〜12件で調整できます。
リストの列数に合わせて調整すると見やすくなります。
【TOPページ】メインコンテンツの並び順の変更
TOPページのメインコンテンツ部分の並び順を変更できます。
【TOPページ】並び順
変更できるのは下記です。
- ABOUT US
- YouTube動画埋め込み
- PICK UP
- FEATURE（特集）
- SALE ITEMS（セール商品）
- 商品一覧
- CATEGORIES（カテゴリー）
- BLOG（ブログ）
上記がデフォルトの並び順となっています。
各項目に0〜9の番号を当てることで並び順を変更することが可能です。
優先順位は、0が1番上、9が1番下になります。
同じ数字を入れた場合は、デフォルトの並び順で上になっているものが上に配置されます。
表示させたい順に入力エリアに「１」「2」という感じで1文字数字を入力すれば、その通りの順番になります。
※0〜9の番号入力は必ず半角数字にしてください。全角や半角数字以外は無視されます。
【TOPページ】Instagramタイムライン表示
TOPページにSauce by SNPTを使ってInstagramのタイムライン表示ができます。
【Instagram】ギャラリーを表示（Sauce by SNPT）
ONにすると表示、OFFにすると非表示になります。
【Instagram】Sauce by SNPTのコード
Sauce by SNPTのコードを入力します。
コードの取得方法については、下記のページをご覧ください。
Sauce by SNPTのコード取得方法｜BASEテーマ「room.」
【ご注意】
※Sauce by SNPTをはじめとする外部サービスについては、サポート対象外となっております。
本オンラインマニュアルに記載の内容を超えるご案内や、個別のお問い合わせへの対応は行っておりませんので、あらかじめご了承ください。
なお、本サービスはInstagram公式の提供ではないため、予告なくご利用いただけなくなる場合がございます。その際の保証やサポートはいたしかねます。
※本マニュアルでは、外部サービスを利用したInstagramタイムラインの埋め込み方法をご紹介していますが、あくまで埋め込みコードを表示できる機能を提供しているものであり、外部サービス自体の提供・保証は行っておりません。 ご紹介しているサービスの一部は無料プランがありますが、各サービスの料金体系や機能制限は予告なく変更される可能性があります。 また、表示の可否や仕様変更については外部サービス側に依存するため、本機能を利用しての埋め込み表示が必ずしも可能であることを保証するものではありません。
NEWSLETTER（メールマガジンApp）
メールマガジンApp利用時に、メインコンテンツ下にメルマガ登録フォームエリアが表示されます。
※完全に非表示にしたい場合はメールマガジンAppを無効化してください。テーマから非表示にはできません。
※CONTACTページ、コミュニティページ、メンバーシップページには表示されません。
【NEWSLETTER（メールマガジンApp）】説明文
メルマガ登録フォームの説明文を変更できます。
空欄の場合は表示されません。
【NEWSLETTER】：背景色
NEWSLETTERエリアの背景色を変更できます。
【NEWSLETTER】：背景画像
NEWSLETTERエリアん背景画像を設定できます。
推奨サイズは横1440×縦740px以上です。
フッター
サイト下部のフッター周りの設定です。
【フッター】コンテンツを表示
フッター上部に、画像・タイトル・テキストを1グループとしてコンテンツを3つまで配置できます。
ONにすると表示、OFFにすると非表示になります。
【フッター】コンテンツ①〜③：画像
コンテンツ上部の画像を設定できます。
コンテンツを2つ以上設置する場合は、画像の大きさを合わせることをおすすめします。
空欄の場合は非表示になります。
【フッター】コンテンツ①〜③：タイトル
コンテンツのタイトルを設定できます。
コンテンツを2つ以上設置する場合は、1つは1行、もう1つは3行といった形になるとチグハグな感じになってしまいますので、それぞれのタイトルの文字数もできるだけ近いほうが統一感が出せます。
【フッター】コンテンツ①〜③：テキスト
コンテンツの詳細テキストを設定できます。
【フッター】送料・お支払い方法を表示
ONにすると、フッター真ん中に送料についてと、お支払い方法についての表示ができます。
OFFにすると両方非表示にできます。
後の設定で、送料について、お支払い方法についてのそれぞれで表示／非表示を切り替えることもできます。
【フッター】送料についてを表示
フッターの送料についての表示／非表示を切り替えられます。
【送料】タイトル
フッターの送料についてのタイトルを変更できます。
【送料】テキスト（ABOUTページ共通）
トラックアイコンの右側の送料のテキストを変更できます。
【送料】補足（ABOUTページ共通）
トラックアイコンの右側の送料のテキストに補足説明を追加できます。
【送料】リンクのテキスト
ABOUTページの送料の詳細を記載したセクションに飛ばすリンクのテキストを変更できます。
空欄にするとリンクを非表示にします。
※ABOUTページの「送料について」セクションを非表示にしている場合はリンクが表示されません。
【フッター】お支払い方法についてを表示
フッターのお支払い方法についての表示／非表示を切り替えられます。
【お支払い方法】タイトル
フッターのお支払い方法についてのタイトルを変更できます。
【お支払い方法】各種
BASEで決済可能な各支払い方法についての表示をON・OFFで切り替えられます。
フッター部分と、ABOUTページの表示も切り替わります。
- クレジットカード決済
- あと払い（Pay ID）
- キャリア決済
- 銀行振り込み
- コンビニ支払い・Pay-easy
- Amazon Pay
- PayPal決済
- 後払い決済
【お支払い方法】リンクのテキスト
ABOUTページのお支払い方法の詳細を記載したセクションに飛ばすリンクのテキストを変更できます。
空欄にするとリンクを非表示にします。
※ABOUTページの「お支払い方法について」セクションを非表示にしている場合はリンクが表示されません。
【フッター】ロゴを表示
フッターに配置するロゴの表示／非表示を切り替えられます。
【フッター】SNSリンクを表示
フッターの各SNSリンクエリアの表示／非表示を切り替えられます。
固定バナー
画面左下に固定表示できるバナーを設定できます。
【固定バナー】画面左下にバナー表示
画面左下に固定表示できるバナーの表示／非表示を切り替えられます。
【固定バナー】画像（推奨サイズ：600×600）
バナー画像を設定できます。
【固定バナー】リンクURL
バナーのリンク先を設定できます。
【固定バナー】開閉メニュー内にも設置する
ONにすると、固定バナーをメニューの中にも表示させるようにします。
画面左下に固定するバナーは目立たせるには有効ですが、操作の邪魔になる場合があるので×ボタンがつけており、一度消すと一旦ブラウザを閉じてまた開くまで表示されないようになっています。
そのため、×ボタンで消した場合でもどのページからでもアクセスできるようにメニュー内にも同じバナーを設置できます。
【固定バナー】開閉メニュー内の最上部に設置する
ONにすると固定バナーをメニューの最上部に設置します。
OFFにすると最下部になります。
検索モーダル
商品検索App利用時に、表示される検索フォームのポップアップ機能です。商品検索Appをインストールするとヘッダーに検索アイコンが表示されるので、それをクリックすると表示されます。
【検索モーダル】おすすめキーワードを表示（商品検索App）
検索モーダルのキーワード入力欄の下に、おすすめの商品検索キーワードを表示できます。
クリックするだけで検索できるようになるので、あらかじめ商品に辿り着きやすいキーワードを登録しておくと便利です。
ON／OFFで表示を切り替えられます。
【検索モーダル】おすすめキーワード：タイトル
検索モーダルのおすすめキーワードのタイトルを変更できます。
デフォルトは「RECOMMEND」となっています。
【検索モーダル】おすすめキーワード①〜⑥
商品検索キーワードを設定します。
【検索モーダル】大カテゴリーを表示（カテゴリ管理App）
検索モーダルに大カテゴリー一覧を表示することができます。
ON／OFFで表示を切り替えられます。
FAQモーダル
ポップアップ表示でどのページからもアクセス可能なFAQモーダル機能です。
よくある質問を最大10件まで掲載できます。
メニュー・フッターのリンクに追加されます。
リンクを押すとポップアップ表示されます。
【FAQ】FAQを表示
ON／OFFで表示を切り替えられます。
FAQ①〜⑩：質問
質問内容を設定できます。
質問内容がなく、答えしかない場合はその番号の質問欄は表示されません。
FAQ①〜⑩：答え
質問内容に対する回答を設定できます。
ABOUTページ
ABOUTページの設定について。
【ABOUTページ】メイン画像
ABOUTページタイトル下に画像を設置できます。
推奨サイズは、横2880×縦1620です。
【ABOUTページ】ショップの説明を表示
BASE管理画面でショップ設定→ショップ情報→ショップの説明に設定した内容が反映されます。
メイン画像すぐ下に表示されます。
ON／OFFで表示を切り替えられます。
【ABOUTページ】CONCEPT（コンセプト）を表示
ショップのコンセプトを掲載できるエリアです。
ON／OFFで表示を切り替えられます。
【ABOUTページ】CONCEPT：説明
コンセプトの説明テキストを設定します。
【ABOUTページ】ACCESSを表示
実店舗のアクセスや営業情報などを掲載できるエリアです。
ON／OFFで表示を切り替えられます。
【ABOUTページ】ACCESS：店舗名
店舗名を設定できます。
【ABOUTページ】ACCESS：住所／電話番号／メールアドレス／営業時間等
住所情報・電話番号・メールアドレス・営業時間など店舗の詳細情報を入力します。
空欄の場合は表示されません。
【ABOUTページ】ACCESS：Googleマップ埋め込みコード
GoogleMapで発行される埋め込みコードを入力するとマップを掲載することができます。
該当のGoogleマップ→共有→地図を埋め込むで表示されるHTMLコードをコピーして貼り付けます。
【ABOUTページ】SHOPGUIDE（ショップガイド）を表示
ショップガイドとして見出しとテキストの組み合わせを1件として最大4件表示できます。
ショップの注意事項や送料、お支払いについて、返品・交換についてなどの情報を掲載するのに役立ちます。
ON／OFFで表示を切り替えられます。
【ABOUTページ】SHOPGUIDE①〜④：見出し
ショップガイドの見出しを設定します。
ショップガイドを表示したい場合、見出しは必須項目となります。
空欄の場合はこの番号のショップガイドが見出しを含めて表示されません。
【ABOUTページ】SHOPGUIDE①〜④：内容
ショップガイドの内容を設定します。
【ABOUTページ】SHIPPING FEE（送料について）を表示
「送料について」のセクションです。
ON／OFFで表示を切り替えられます。
【ABOUTページ】SHIPPING FEE：詳細説明
送料についての説明を掲載できます。
【ABOUTページ】PAYMENT METHODS（お支払い方法について）を表示
「お支払い方法について」のセクションです。
ON／OFFで表示を切り替えられます。
【ABOUTページ】PAYMENT METHODS：詳細説明
お支払い方法についての説明を掲載できます。
商品ページ
商品詳細ページの設定について。
【商品ページ】PC表示時に商品画像をスクロールに追従させる
PC表示時に左側に商品画像、右側に商品についての注意事項やバリエーション・オプション設定、購入ボタンなどが表示されるようになっていますが、右側の文章が長い場合に左側の商品画像を画面に追従させることができます。
ON／OFFで切り替えが可能です。
【商品ページ】「残り1点」を表示する
在庫が残り1点の場合に価格表記の下に「残り1点」と表示します。
また、複数のバリエーション（商品の種類）によって在庫数が違う場合、選択した種類の在庫が残り1点の場合に選択ボックスの下にに「残り1点」と表示します。
【商品ページ】商品詳細：文字色
商品詳細の文字色を変更できます。
【商品ページ】商品詳細：背景色
商品詳細の背景色を変更できます。
【商品ページ】フリーテキスト
商品説明の上にフリーテキストとして設定できます。
商品ごとに個別にではなく一括ですべての商品ページに設定できるので、注意事項や今だけ使えるクーポンコード、キャンペーンについてなどすべての商品で購入の際に伝えておきたい内容を掲載することができます。
【フリーテキスト】ボーダー（枠線）を追加する
フリーテキストを強調したい場合に枠線を追加できます。
ONにすると枠線を表示、OFFにすると非表示にします。
【商品ページ】関連商品を表示
ONにすると商品ページの関連商品を表示、
OFFにすると非表示になります。
関連商品は、BASEの機能で商品詳細ページに自動で3つ表示されるようになっています。
商品のアルゴリズムや表示する件数などはテーマでは変更できませんが、表示・非表示ができます。
【商品ページ】最近見た商品を表示
ONにすると商品ページ下部に最近見た商品を最大6件表示します。
OFFにすると非表示になります。
※BASEのプレビュー画面では表示されません。ご注意ください。
【商品ページ】セール商品を表示（セールApp利用時）
ONにすると、セールApp利用時に、割引商品の一覧を最大6件表示します。
CONTACTページ
お問い合わせフォームのページです。
CONTACTのデモページ
※フォームの項目はカスタマイズできません。
プライバシーポリシーページ
プライバシーポリシーが掲載されるページです。
プライバシーポリシーのデモページ
※プライバシーポリシーの内容はBASEの仕様上、変更できません。 詳しくは下記のヘルプページをご確認ください。 プライバシーポリシーは編集できますか？｜BASEヘルプページ
特定商取引法に基づく表記ページ
特定商取引法に基づく表記が掲載されるページです
特定商取引法に基づく表記のデモページ
BASE管理画面ホーム→ショップ設定→運営に関する情報 の各項目から編集が可能です。
商品検索結果ページ（商品検索App）
商品検索App利用時に、検索結果が表示されるページです。
カテゴリページ（カテゴリ管理App）
カテゴリ管理App利用時に、商品管理画面で商品にカテゴリを付けられるようになります。カテゴリページは各カテゴリごとの商品一覧をまとめて閲覧できるページです。
ブログ一覧／ブログ記事ページ（BLOG App）
BLOG App利用時に、記事一覧ページと記事詳細ページが生成されます。
ブログ一覧ページ
投稿記事が1ページに15件まで表示されます。
16件以上になると一覧の下にページ送りが表示され一覧が次のページに分割されます。
ブログ記事ページ
投稿記事の詳細ページです。
コミュニティページ（コミュニティApp）
コミュニティApp利用時に、コミュニティ会員限定の商品を販売したり、会員限定に公開したいページのURLを掲載できるようになります。インストールして利用を始めると自動的にページが生成されます。
メンバーシップページ（メンバーシップApp）
メンバーシップApp利用時に、お客様とのつながりを深めるのに有効なメンバーシップを開設できるページが追加されます。インストールして利用を始めると自動的にページが生成されます。
アニメーション
スクロールに合わせて要素を表示するアニメーションのON・OFFが可能です。
【アニメーション】スクロール演出を有効化
ONにするとスクロールに合わせて要素を表示するアニメーション演出を加えます。
OFFにするとアニメーションを無効にします。
【アニメーション】スクロール演出（テキスト）
スクロール演出を有効化している場合に、見出しなどの一部テキストに適用されているアニメーションの有効・無効を切り替えできます。
【アニメーション】スクロール演出（フェードイン）
スクロール演出を有効化している場合に、一部エリアに適用されている、下からふわっと表示されるアニメーションの有効・無効を切り替えできます。
【アニメーション】スクロール演出（マスク）
スクロール演出を有効化している場合に、一部画像などに適用されているアニメーションの有効・無効を切り替えできます。
【アニメーション】スクロール演出（パララックス）
スクロール演出を有効化している場合に、NEWSLETTER背景とABOUTページメイン画像に適用されているスクロールに応じたアニメーションの有効・無効を切り替えできます。
上級者向け設定
ある程度Web知識のある方向けの設定です。
【上級者向け】OGP画像（推奨サイズ：横1200px×縦630px）
SNSでシェアするときに表示されるOGP画像を変更できます。
※商品ページ以外で適用されます。
【上級者向け】独自のスタイルシートを追加する
CSSの知識がある方はこちらに追記することでデザインのカスタマイズが可能です。
対応するBASE Appsについて
BASE Appsはショップに便利な機能を追加できる機能です。
テーマに影響のあるAppsの中で下記のAppsに対応しています。
必要なものを管理画面からインストールしてお使いください。
※デフォルトで使えるわけではありませんので必ず管理画面からインストールしてください。
- メッセージApp
→ ショップにメッセージ機能を設置できます。ショップ画面の右下にチャット窓が現れお客様と円滑にやりとりをすることが可能になります。 - カテゴリ管理App
→ 商品にカテゴリーを付けられます。大・中カテゴリはメニューに反映されます。小カテゴリはカテゴリーページに入ると見ることができます。 - 送料詳細設定App
→ 地域ごとの送料を商品単位で簡単に設定できるようになります。商品詳細ページの下の方に送料についての説明が表示されます。 - BASEロゴ非表示App
→ ショップ上のBASEロゴを非表示にすることができます。 - デジタルコンテンツApp
→ 音楽データや写真データなどのデジタルコンテンツを販売することができる機能を追加できます。追加するとデジタルコンテンツの商品詳細ページでタイトルの下にファイル名が表示されます。 - 英語・外貨対応App
→ ショップの表記を英語に切り替え、34カ国の外貨表記に対応が可能になります。 - BlogApp
→ ブログを投稿できるようになります。TOPページにも記事リストを追加できます。 - ラベルApp
→ NEW、HOT、SALEのラベルをつけることができます。ラベルは商品管理ページで個別に設定できます。付けたラベルは商品一覧と商品詳細ページに表示されます。 - 商品検索App
→ 商品検索機能を追加できます。検索ボックスがメニューに反映されます。 - 定期便App
→ 指定した販売サイクルと継続回数で商品を定期販売できるようになるAppです。 - レビューApp
→ 商品詳細の下に購入者からのレビュー情報が表示されるようになります。 - セールApp
→ 指定の商品にセール価格の設定ができます。 - ショップコインApp
→ ショップコイン機能が追加され、メニュー内にショップコインへのリンクが設置されます。 - 販売期間設定App
→ 販売開始前に商品をショップページに掲載し、販売予告を行うことが可能になります。販売前は「COMING SOON」と表示されます。 - 予約販売App
→ 入荷前の商品を先行販売し、予約注文を受ける事ができるようになります。予約商品には「予約商品」と表示されます。 - 抽選販売App
→ 抽選で当選者にのみ商品を販売することができます。抽選販売商品には「抽選販売」と表示されます。 - 商品説明カスタムApp
→ 商品詳細ページに「動画」や「スライドショー」など商品説明をリッチに見せられるコンテンツ追加機能を使えるようになります。 - 商品オプションApp
→ 商品にギフトラッピングやオーダーメイドで使えるオプションを設定できるようになります。商品オプションAppを適応させた商品は詳細ページにオプションの選択・入力エリアが追加されます。 - コミュニティApp
→ コミュニティを作成して会員を募ることができます。無料・有料のコミュニティが作れ、会員限定で商品を販売することができます。会員限定商品には「会員限定商品」と表示されます。また、メニューに「COMMUNITY」というページが増え、そこからコミュニティの入会・退会ができたり、会員限定で任意のURLを公開できます。 - テイクアウトApp
→ テイクアウト商品の事前注文／決済ができるようになります。テイクアウト商品には「テイクアウト」と表示されます。 - 年齢制限App
→ 商品を購入するお客様に対して年齢確認を求めることが可能になり、非対象のお客様は、商品を購入することができなくなります。酒類や電子タバコなど、年齢確認が必須な商品を販売する際に便利です。 - お知らせバナーApp
→ ショップページの最上部にお知らせを表示できます。 - メールマガジンApp
→ 過去にショップで購入経験があり、メールマガジンの配信を希望するお客様に、メールマガジンを配信できます。インストールすると、登録フォームをフッターのすぐ上に表示します。 - メンバーシップApp
→メンバーシップを開設できます。入会いただいたお客様の情報は顧客管理で確認でき、会員限定のメールマガジンも配信できるようになるので、特別なお知らせやクーポンなどをいち早くお届けできます。インストールするとメンバーシップ登録ページ、マイページ、ログインページが追加されます。
Appについての注意事項
- 他にも多数のAppがありますが、「顧客管理App」や「納品書ダウンロード」といった、どのデザインテンプレートであっても関係のない管理画面上で扱うAppなどについては省略しています。あくまでもテーマに反映されるAppの中で対応したものを掲載しています。
- 各Appの詳細はBASE Appsのページからご確認ください。
- Appについてはデザインテンプレート上ではできることが限られています。購入前にプレビュー画面で必要なAppの挙動を一度ご確認ください。
- Appについてのご質問やご要望はBASEにご連絡いただきますようお願いいたします。
ご質問・ご要望について
TOPページのお問い合わせフォームよりご連絡をお願いいたします。
- ※ご要望の内容によっては対応できない場合もございます。
- ※個別のカスタマイズ要望については有料・無料に関わらず一律でお断りしております。個人的なカスタマイズ要望でなく、テーマをご利用いただいている皆さま全体に関わるアップデートや修正要望にはできるだけお応えいたします。
- ※HTML 編集 App でのカスタマイズについては自己責任でお願いします。購入したテーマを元に HTMLをカスタマイズしている場合は、元のテーマに不具合があったとしても個別の修正等のご要望をお断りしております。
- ※テーマの使い方を直接レクチャーしたり、テーマのソースコードについて教えるといったサポートサービスは行なっていませんのでご理解のほどよろしくお願いいたします。
- ※不具合の修正についてはなるべく早く対応しますが、修正対応に加え BASE の審査があるため数日〜1 週間以上かかる場合がございます。
- ※テーマの使い方に記載のない機能はこのテーマに備わっておりません。ご質問の前にご確認ください。
- ※テーマの機能やデザインは予告なく変更・除外する場合がございます。
- ※FROMO は法人や組織活動ではなく個人活動となります。平日日中は Web エンジニアとして制作会社に勤務しておりますので、返信が遅くなる可能性がございます。ご理解のほどよろしくお願いいたします。
