BASEデザインテーマ

room.

ルームドット

8,600円

テーマの購入はこちらデモサイトはこちら

8@2x

特徴

BASEデザインテーマ「room.〈ルームドット〉」は、シンプルながらも豊富なカスタマイズが可能です。売りたい商品の種類や点数に合わせて多様なレイアウトが実現できるテーマです。

商品・ブログ一覧を1カラム〜5カラムまで任意設定可能（スマホでは1〜2カラム）
PCサイドメニューの左右位置調整可能
PCサイドメニューの表示・非表示可能
ヘッダー追従の有無調整可能
Instagram埋め込み表示可能（Sauce by SNPT）
ページ上部にクーポンコード表示用のバナー設置可能（コードコピーボタン付）
バナーの掲載箇所を豊富に用意
特集スライド、ランキング、FAQなどを設置可能
TOPページのメインコンテンツの並び順を任意変更可能

▼こんなショップにおすすめ

ショップのイベント時にバナーやリンクをいろんな箇所に配置したい
Instagramの埋め込み機能が欲しい
ランキング表示機能が欲しい
商品点数が多い
商品点数が少ない
取扱い商品が1点しかない

→ 商品一覧のレイアウトを変更できるので見せ方を工夫でき、商品点数によって見栄えが左右されません。

デモサイト

room.を実際に適用したデモサイトです。
https://roomdot.base.ec/

ページ構成

テーマが適用されるのは下記のページになります。
カートページはカスタマイズできません。

基本ページ

デフォルトで用意されているページです。非表示にはできません。

TOP
ABOUT
商品詳細
CONTACT
プライバシーポリシー
特定商取引法に基づく表記

Appsページ

該当するAppを利用すると表示されるページです。

商品検索結果（商品検索App）
カテゴリ（カテゴリ管理App）
ブログ一覧（Blog App）
ブログ記事（Blog App）
コミュニティ（コミュニティApp）
ショップコイン（ショップコインApp）

各Appsの内容については、BASE Appsのページからご確認ください。

※有料テーマは「ページ追加App」を使った任意ページの追加はできませんのでご注意ください。「ページ追加App」は無料の公式テーマのみで使うことが可能です。

カートページ

商品詳細ページで購入アクションを起こすとカートページに遷移します。カートページから購入情報入力〜購入完了までのページはBASEのサービス内で共通のためカスタマイズできません。

使い方

はじめに

無料でかんたんにネットショップを開設できるサービス「BASE」にまずはご登録ください。

登録後、「BASEデザインマーケット」から「room.」のデザインテンプレートを購入することで使えるようになります。

デザインテンプレートを購入すると、BASE管理画面の「デザイン編集」→「テーマ」から購入したテーマを選択できるようになります。テーマを選択すると、デザインが適用されます。「テーマ設定」に移ると備わっている機能が表示され各項目を設定できます。

基本設定 - ロゴ

画像を使用する

ONでロゴ画像、OFFでテキストロゴになります。

ロゴ画像のサイズは、横300pxの横長サイズ推奨（デモサイトは横300x縦60）。
縦長のロゴや大きいサイズのロゴを設置したい場合は、「【ロゴ】ヘッダー下に配置」の項目をONにしてヘッダーの外にロゴを配置することも可能です。

テキストロゴについては__全角10文字以内、半角12文字以内推奨__です。それ以上を超えるとスマホ表示の時に末尾が省略されます。
こちらもロゴ画像と同様に、もっと長いテキストを設置したい場合は、「【ロゴ】ヘッダー下に配置」の項目をONにしてヘッダーの外にロゴを配置することが可能です。

基本設定 - 背景

カラーから選ぶ

サイト全体の背景色を設定できます。

パターンから選ぶ

背景に画像を設定できます。
「背景画像を繰り返す」にチェックを入れると背景が縦横にリピート表示されます。

カラー設定

カラー変更できる箇所のオプションです。
テーマ設定の最上部にまとめています。ここに項目のない箇所は色の変更はできません。

【共通】テキストカラー

サイト全体の文字色。

【共通】ヘッダー：背景色

【共通】ヘッダー：文字色

ヘッダー部分の背景色・文字色。

【共通】開閉メニュー：背景色

【共通】開閉メニュー：文字色

サイト左上の三本線ボタンを押すと開くメニューの背景色・文字色。

【共通】スマホ：検索モーダル：背景色

【共通】スマホ：検索モーダル：文字色

商品検索App利用時に、スマホ表示の際にヘッダーのアイコンを押すと表示される検索モーダルの背景色・文字色

【共通】クーポンバナー：背景色

【共通】クーポンバナー：文字色

クーポンAppにて発行されるクーポンコードを常時表示できる「クーポンバナー」の背景色・文字色。

【TOPページ】HOT WORDS：背景色

【TOPページ】HOT WORDS：文字色

商品検索App利用時に、ヘッダーの下におすすめの検索キーワードを表示できる「HOT WORDS」の背景色・文字色。

【TOPページ】メイン画像：背景色

【TOPページ】メイン画像：文字色

TOPページ上部のメイン画像表示エリアの背景色・文字色。
背景色は画像がない場合や透過画像を設置した場合に表示されます。

【TOPページ】ブログ固定表示：背景色

【TOPページ】ブログ固定表示：文字色

BLOG App利用時に、「この記事を固定する」にチェックを入れるとTOPページの上部に記事のリンクが表示されるようになります。
その部分の背景色・文字色。

【TOPページ】ランキング：アイコン背景色

【TOPページ】ランキング：アイコン文字色

TOPページのランキングの順位アイコンの背景色・文字色。

【共通】セール価格：文字色

セールApp利用時の、セール価格の文字色。

【商品ページ】購入ボタン：背景色

【商品ページ】購入ボタン：文字色

商品詳細ページの「カートに入れる」などの購入ボタンの背景色・文字色。

【共通】CTA：背景色

【共通】CTA：文字色

ページ下部、フッターの少し上に配置できる「背景画像」「テキスト」「リンクボタン」が設置できるCTAエリアの背景色・文字色。
背景色は画像がない場合や透過画像を設置した場合に表示されます。

【共通】フッター：背景色

【共通】フッター：文字色

フッターの背景色・文字色。

【共通】フッター（下）：背景色

【共通】フッター（下）：文字色

フッターの下部分の背景色・文字色。

一括設定

カラー設定以外で、サイト全体で一括で変更できる箇所のオプションです。

【一括設定】フォント

明朝体・ゴシック体のどちらかを設定できます。

【一括設定】PC：商品・ブログ一覧の列数

PC表示時の商品一覧・ブログ一覧の表示列数（カラム）を1〜5カラムで変更できます。

※「ランキング」「商品一覧」「ブログ」は個別に設定できます。

【一括設定】スマホ：商品・ブログ一覧の列数

スマホ表示時に商品一覧・ブログ一覧の表示列数（カラム）を1〜2カラムで変更できます。

※「ランキング」「商品一覧」「ブログ」は個別にも設定できます。

【一括設定】PC：商品・ブログ一覧を行表示にする

【一括設定】スマホ：商品・ブログ一覧を行表示にする

ONにすると商品一覧・ブログ一覧の各アイテムの表示を横１行のレイアウト表示に変更します。

PC表示時・スマホ表示時それぞれで個別に設定可能です。 ※「ランキング」「商品一覧」「ブログ」「関連商品」は個別にも設定できます。

row-style-all

【一括設定】商品・ブログ一覧のサムネイル画像比率

商品一覧・ブログ一覧の各アイテムの商品画像の比率を一括で指定した比率に合わせて画像をトリミングして表示します。
選択できる比率は下記です。

指定なし
（正方形）1:1
（横長）3:2
（横長）4:3
（横長）16:9
（縦長）2:3
（縦長）3:4
（縦長）9:16

リスト表示される商品画像の大きさが統一された方がサイトの見栄えが良くなります。
もちろん、商品登録の段階で毎回同じサイズの商品画像を用意することで対応可能です。あくまでもオプションとしてお使いください。

【一括設定】商品一覧：SOLD OUT表示を画像に重ねる

商品一覧のSOLD OUT表示を切り替えられます。ONにすると画像に重ねてわかりやすく表示するデザイン。OFFにすると商品価格の下に小さいタグで表示するデザイン。

ヘッダー

サイト上部のヘッダー周りの設定です。

【ヘッダー】スマホ：画面上部に固定する

ヘッダーバーを画面最上部に固定します。
固定するとスクロールした時に画面の上部に追従します。

【ヘッダー】アイコンに白背景を付ける

ヘッダー右上にあるBASEアイコン・カートアイコンに白背景を付けます。
商品検索Appを利用している場合は、スマホ表示時に同じ場所に表示される検索アイコンにも白背景が適用されます。

【ロゴ】ヘッダー下に配置

ONにするとロゴをヘッダーの下に移動します。
ヘッダーはデザイン上サイズが固定なので、どうしてもロゴのサイズが合わせられない場合は、ヘッダーから外に出してページの最上部に配置させることが可能です。

【ロゴ】（ヘッダー下に配置がONの場合）中央寄せ

一つ上の「【ロゴ】ヘッダー下に配置」をONにしてロゴの配置を変更した場合のみ、ONにするとロゴ位置を左右中央寄せにします。「【ロゴ】ヘッダー下に配置」がOFFの場合は無視されます。

【ロゴ】スマホ：ロゴ画像サイズ

【ロゴ】PC：ロゴ画像サイズ

ロゴ画像のサイズを3段階で調整できます。
特に調整が必要ない場合はデフォルトを選択してください。
PC表示時・スマホ表示時でそれぞれ調整可能です。

おすすめの設定は、横300x縦60のロゴ画像を用意してPC・スマホで「2」です。（デモサイトと同じサイズになります）

クーポンバナー

クーポンAppにて発行されるクーポンコードを常時表示できる「クーポンバナー」の設定です。

coupon

【クーポンバナー】テキスト

表示したいテキストを入力します。

【クーポンバナー】クーポンコード

表示したいクーポンコードを入力します。

【クーポンバナー】コードコピーボタンを表示

ONにすると、クリックするとクーポンコードをコピーできる「CODE COPY」ボタンを表示します。
OFFにすると非表示にします。

メニュー（開閉メニュー／サイドメニュー）

開閉メニューは、サイト左上の三本線ボタンを押すと開くメニューのことです。
サイドメニューは、PC表示時にメインコンテンツの横に表示できるメニューのことです。
それぞれ見た目はほとんど同じで表示できるものもほとんど共通のものですが、設定できる項目が少し違うのでご注意ください。

開閉メニュー

PCサイドメニュー

【開閉メニュー】PC表示時にも開閉メニューを表示

ONにすると開閉メニューをPCでも表示します。
OFFにすると開閉メニューはPCでは非表示にします。
スマホは常に表示します。非表示にはできません。

【開閉メニュー】SNSリンクを表示

ONにすると、開閉メニュー内に表示されるSNSのテキストリンクをまとめて表示します。
OFFにすると非表示にします。

【PCサイドメニュー】PC表示時にサイドメニューを表示する

ONにすると、PC表示時にサイドメニューを表示します。
OFFにすると非表示にします。

※サイドメニューはスマホ表示時にはバナー（上部・下部）のみが表示されます。表示位置はABOUTの上になります。

【PCサイドメニュー】PC表示時のサイドメニューの位置

PC表示時のサイドメニューを左配置するか右配置するか選択できます。

【PCサイドメニュー】SNSリンクを表示

ONにすると、【PCサイドメニュー内に表示されるSNSのテキストリンクをまとめて表示します。
OFFにすると非表示にします。

【開閉メニュー・PCサイドメニュー共通】任意リンク①〜③：テキスト

テキストリンクを3つまで配置できます。
そのリンクとなるテキストをここに設定します。
開閉メニュー・PCサイドメニュー共通の内容になるので、どちらか一方だけ表示することや一方だけテキストを変更することはできません。

【開閉メニュー・PCサイドメニュー共通】任意リンク①〜③：URL

一つ上の項目で設置したテキストに付けるリンクURLをここに設定します。

【PCサイドメニュー】上部バナー：画像

【PCサイドメニュー】上部バナー：リンクURL

【PCサイドメニュー】下部バナー：画像

【PCサイドメニュー】下部バナー：リンクURL

PCサイドメニューの上部／下部にそれぞれバナー画像を設置できます。
画像とリンクURLを設置できます。
画像が空欄の場合は表示されません。

【PCサイドメニュー】下部バナー：PC表示時にスクロールに追従させる

PC表示時に、PCサイドメニューの下部に設置したバナーの位置までスクロールすると、コンテンツの途切れ目まで追従するようにできます。

※サイドメニューがメインコンテンツより長い場合は追従しません。

TOPページ

TOPページで設定できるオプションについて。

TOPのデモページ

【TOPページ】HOT WORDS

商品検索App利用時に、TOPページのヘッダーの下におすすめの検索キーワードを5つ表示できる「HOT WORDS」の設定。

hotwords

スマホ表示の際は、商品検索モーダルにも表示されます。

【TOPページ】HOT WORDSを表示（商品検索App）

ONにすると表示、OFFにすると非表示にします。

【HOT WORDS】タイトル

「HOT WORDS」となっているテキスト部分を変更できます。
日本語サイトの場合は「注目キーワード」などにした方がわかりやすくなります。

※あくまでも見出しなので、あまり長文になるとダサくなります。最長10文字程度で設定をおすすめします。

【HOT WORDS ①〜⑤】キーワード

商品検索キーワードを設定します。

【TOPページ】メイン画像

TOPページ上部のメイン画像の設定です。

【TOPページ】メイン画像を表示

ONにすると表示、 OFFにすると非表示になります。

【TOPページ】メイン画像（PC）

PC表示時の画像を設定します。
推奨サイズは、横2880x縦1200px。

※メイン画像を表示する際には.PC画像が必須項目になります。
スマホ画像しか設定していない場合は表示されませんのでご注意ください。

【TOPページ】メイン画像（スマホ）

スマホ表示時の画像を設定します。
推奨サイズは、横750x縦750px。

※メイン画像を表示する際には.PC画像が必須項目になります。
スマホ画像しか設定していない場合は表示されませんのでご注意ください。

【TOPページ】メイン画像：見出し

メイン画像にテキストで見出しを付けることができます。
あまり長文になるよりは、デモサイトのようなキャッチコピー1行ぐらいのスタイリッシュな感じの方がおしゃれになります。

【TOPページ】メイン画像：見出しのフォント

見出しのフォントを「明朝体」「ゴシック体」の２パターンから選べます。

【TOPページ】メイン画像：リンクボタンテキスト

見出しの下にリンクボタンを表示できます。
その際のボタンの中のテキストを変更できます。

【TOPページ】メイン画像：リンクボタンURL

見出しの下に設置できるリンクボタンのリンク先URLを設定します。
空欄の場合はボタンは非表示になります。

【TOPページ】INFORMATION

INORMATIONとしてお知らせを3件表示することができます。

information

【TOPページ】INFORMATIONを表示

ONにするとINFORMATIONエリアを表示、
OFFのすると非表示になります。

【TOPページ】INFORMATION①〜③：日時

お知らせの日時を設定します。

【TOPページ】INFORMATION①〜③：詳細

お知らせの詳細内容を設定します。

【TOPページ】INFORMATION①〜③：リンクURL

お知らせにリンクを付けたい場合にURLを入力します。

【TOPページ】パネルバナー

TOPページにパネルバナーとして、バナー画像を3枚まで設置できます。

【TOPページ】パネルバナーを表示

ONにするとパネルバナーエリアを表示、
OFFにすると非表示になります。

【TOPページ】パネルバナー：列数（PC）

PC表示時のバナーの列数を1~3列で変更できます。
デモサイトは3列表示にしています。

【TOPページ】パネルバナー：列数（スマホ）

スマホ表示時のバナーの列数を1~2列で変更できます。
デモサイトは1列表示にしています。

【TOPページ】パネルバナー①〜③：画像

バナー画像を設定します。
空欄の場合は表示されません。
推奨サイズは横900px以上（デモサイトは横900x縦506px）

【TOPページ】パネルバナー①〜③：リンクURL

バナーに付けるリンクURLを設定します。

【TOPページ】特集スライド

TOPページに「画像」・「タイトル」・「金額」・「説明」を1セットにしたスライドを3スライドまで設定できます。

feature

【TOPページ】特集スライドを表示

ONにすると特集スライドエリアを表示、
OFFにすると非表示になります。

【TOPページ】特集スライド①〜③：画像

画像を設定します。
空欄の場合はこの番号のスライドが表示されません。スライドには画像が必須項目となります。
推奨サイズは横960px以上（デモサイトは横960x縦960px）

【TOPページ】特集スライド①〜③：タイトル

スライドのタイトルを設定します。
空欄の場合は画像のみのスライドになります。「タグ」「価格」「説明」は入力があっても表示されません。

【TOPページ】特集スライド①〜③：タグ

スライドにタグを付けることができます。
「おすすめ」「10%OFF」「SALE」などちょっとした文言を入れるのに使えます。
あまり長文を入れるとデザイン的におかしくなるので、最長10文字程度がおすすめです。
空欄の場合は表示されません。

【TOPページ】特集スライド①〜③：価格

スライドに商品を入れることを想定して価格が設定できるようにしています。
価格以外のテキストを入力することも可能です。
空欄の場合は表示されません。

【TOPページ】特集スライド①〜③：説明

スライドの説明文を設定できます。
あまり長くなるとスマホ表示の際にスライドが縦長になってしまうので100〜150文字程度の簡潔な説明文がおすすめです。

【TOPページ】特集スライド①〜③：リンクURL

スライドにリンクを設定できます。
リンクを設定すると、スライド画像にリンクが付きます。
また、説明文の下に「VIEW DETAIL」　リンクボタンが表示されます。

【TOPページ】ランキング

ランキングを5つまで表示できるエリアです。
各アイテムに1〜5の連番のアイコンが表示されます。

rank

【TOPページ】ランキング：見出し

見出しを任意のものに変更できます。
「BEST SELLER」や「RECOMMEND」などお好きな表現に変更可能です。

【TOPページ】ランキング：順位表示を消す

ONにするとランキングの順位表示アイコンを非表示にします。
OFFにすると表示します。
ランキング以外の用途で使いたい時にご利用ください。

【TOPページ】ランキングを表示

ONにするとランキングエリアを表示、
OFFにすると非表示にします。

【TOPページ】ランキング：スマホは横スクロール表示にする

ONにするとスマホ表示時にリストを横スクロールで見れるようにします。
OFFにすると通常のリスト表示になります。

※「【一括設定】スマホ：商品・ブログ一覧を行表示にする」「【TOPページ】スマホ：ランキング：リストを行表示にする」のどちらかがONになっている場合は横スクロールになりません。

【TOPページ】PC：ランキング：リストの列数

PC表示時のリストの表示列数（カラム）を1〜5カラムで変更できます。
一括設定よりもこちらの個別設定が優先されます。
一括設定を優先する場合は「一括設定に合わせる」に設定してください。

【TOPページ】スマホ：ランキング：リストの列数

スマホ表示時にリストの表示列数（カラム）を1〜2カラムで変更できます。
一括設定よりもこちらの個別設定が優先されます。
一括設定を優先する場合は「一括設定に合わせる」に設定してください。

【TOPページ】PC：ランキング：リストを行表示にする

ONにするとPC表示時のランキング各アイテムの表示を横１行のレイアウト表示に変更します。
一括設定よりもこちらの個別設定が優先されます。
一括設定を優先する場合は「一括設定に合わせる」に設定してください。

【TOPページ】スマホ：ランキング：リストを行表示にする

ONにするとスマホ表示時のランキング各アイテムの表示を横１行のレイアウト表示に変更します。
一括設定よりもこちらの個別設定が優先されます。
一括設定を優先する場合は「一括設定に合わせる」に設定してください。

※「【TOPページ】ランキング：スマホは横スクロール表示にする」を設定したい場合はこちらの設定はOFFにしてください。行表示の場合は横スクロール表示の設定は無視されます。

【TOPページ】ランキング：画像比率

各アイテムの商品画像の比率を一括で指定した比率に合わせて画像をトリミングして表示します。
選択できる比率は下記です。

（正方形）1:1
（横長）3:2
（横長）4:3
（横長）16:9
（縦長）2:3
（縦長）3:4
（縦長）9:16

一括設定よりもこちらの個別設定が優先されます。
一括設定を優先する場合は「一括設定に合わせる」に設定してください。

リスト表示される画像の大きさが統一された方がサイトの見栄えが良くなります。
もちろん、同じサイズの画像を用意することで対応可能です。あくまでもオプションとしてお使いください。

【TOPページ】ランキング①〜⑤：画像

ランキング各アイテムに表示される画像を設定できます。
推奨サイズは横300px以上（デモサイトは横720x縦960px）
※リストの列数によって表示領域が変わるので、1列や2列表示の際は大きめの画像を用意する必要があります。
※空欄の場合はこの番号のランキングが表示されません。ランキングには画像が必須項目となります。

【TOPページ】ランキング①〜⑤：タイトル

ランキング各アイテムにテキストタイトル設定できます。
空欄の場合は表示されません。

【TOPページ】ランキング①〜⑤：価格

ランキング各アイテムに価格を表示できます。
空欄の場合は表示されません。

【TOPページ】ランキング①〜⑤：リンクURL

ランキング各アイテムにリンクを設定できます。
空欄の場合はリンクが付きません。

任意のカテゴリー商品一覧

TOPページに任意のカテゴリーの商品一覧を表示します。 2カテゴリーまで表示できます。商品の表示件数は1カテゴリーにつき最大24件、並び順は新着順になります。一覧の下にVIEW MOREボタンでカテゴリ一覧ページにリンクします。

top-category-item-list

【TOPページ】カテゴリー商品一覧を表示にする

ONにするとTOPページのカテゴリー商品一覧を表示、
OFFにすると非表示にします。

【TOPページ】表示するカテゴリのID①〜②

表示したいカテゴリのIDを入力します。

カテゴリIDの確認方法

BASE管理画面の「Apps」から「カテゴリ管理」へ進みます。
左側メニューの「一括カテゴリ登録」へ進みます。
「カテゴリID確認表」の「カテゴリID」から確認することができます。

【TOPページ】表示するカテゴリのタイトル①〜②

表示するカテゴリ一覧の上に見出しを付けられます。
空欄にすると非表示になります。

【TOPページ】カテゴリー商品一覧：（スマホ）横スクロール表示にする

ONにするとスマホ表示時にリストを横スクロールで見れるようにします。
OFFにすると通常のリスト表示になります。

【TOPページ】カテゴリー商品一覧：（PC）横スクロール表示にする

ONにするとPC表示時にリストを横スクロールで見れるようにします。
OFFにすると通常のリスト表示になります。

【TOPページ】PC：カテゴリー商品一覧：リストの列数

【TOPページ】スマホ：カテゴリー商品一覧：リストの列数

スマホ表示時にリストの表示列数（カラム）を1〜3カラムで変更できます。
一括設定よりもこちらの個別設定が優先されます。
一括設定を優先する場合は「一括設定に合わせる」に設定してください。

【TOPページ】PC：カテゴリー商品一覧：リストを行表示にする

ONにするとPC表示時のカテゴリー商品一覧各アイテムの表示を横１行のレイアウト表示に変更します。
一括設定よりもこちらの個別設定が優先されます。
一括設定を優先する場合は「一括設定に合わせる」に設定してください。

※「【TOPページ】カテゴリー商品一覧：（PC）横スクロール表示にする」を設定したい場合はこちらの設定はOFFにしてください。行表示の場合は横スクロール表示の設定は無視されます。

【TOPページ】スマホ：カテゴリー商品一覧：リストを行表示にする

ONにするとスマホ表示時のカテゴリー商品一覧各アイテムの表示を横１行のレイアウト表示に変更します。
一括設定よりもこちらの個別設定が優先されます。
一括設定を優先する場合は「一括設定に合わせる」に設定してください。

※「【TOPページ】カテゴリー商品一覧：（スマホ）横スクロール表示にする」を設定したい場合はこちらの設定はOFFにしてください。行表示の場合は横スクロール表示の設定は無視されます。

【TOPページ】カテゴリー商品一覧：画像比率

各アイテムの商品画像の比率を一括で指定した比率に合わせて画像をトリミングして表示します。
選択できる比率は下記です。

（正方形）1:1
（横長）3:2
（横長）4:3
（横長）16:9
（縦長）2:3
（縦長）3:4
（縦長）9:16

一括設定よりもこちらの個別設定が優先されます。
一括設定を優先する場合は「一括設定に合わせる」に設定してください。

商品一覧

TOPページの新着商品一覧や、カテゴリ一覧ページ、検索結果一覧ページなどの商品一覧の設定について。

new-arrivals

【TOPページ】商品一覧を表示にする

ONにするとTOPページの新着商品一覧を表示、
OFFにすると非表示にします。

例えば商品点数が1点しかない場合に、新着商品一覧のところにぽつんと1点だけ商品が置いてあるのが何か微妙…というときに、思い切ってTOPページの商品一覧は非表示にしてしまって、特集スライドや各種バナーなどの別のエリアをうまく活用して見せ方を工夫してみる、といったことも可能です。

【TOPページ】商品一覧：見出し

TOPページの新着商品一覧の見出しを任意で変更できます。

PC：商品一覧：リストの列数

PC表示時にTOPページの新着商品一覧、カテゴリ一覧、検索結果一覧のリストの表示列数（カラム）を1〜5カラムで変更できます。
一括設定よりもこちらの個別設定が優先されます。
一括設定を優先する場合は「一括設定に合わせる」に設定してください。

スマホ：商品一覧：リストの列数

スマホ表示時にTOPページの新着商品一覧、カテゴリ一覧、検索結果一覧のリストの表示列数（カラム）を1〜2カラムで変更できます。
一括設定よりもこちらの個別設定が優先されます。
一括設定を優先する場合は「一括設定に合わせる」に設定してください。

PC：商品一覧：リストを行表示にする

ONにするとPC表示時のTOPページの新着商品一覧、カテゴリ一覧、検索結果一覧の各アイテムの表示を横１行のレイアウト表示に変更します。
一括設定よりもこちらの個別設定が優先されます。
一括設定を優先する場合は「一括設定に合わせる」に設定してください。

スマホ：商品一覧：リストを行表示にする

ONにするとスマホ表示時のTOPページの新着商品一覧、カテゴリ一覧、検索結果一覧の各アイテムの表示を横１行のレイアウト表示に変更します。
一括設定よりもこちらの個別設定が優先されます。
一括設定を優先する場合は「一括設定に合わせる」に設定してください。

商品一覧：画像比率

TOPページの新着商品一覧、カテゴリ一覧、検索結果一覧の各アイテムの商品画像の比率を一括で指定した比率に合わせて画像をトリミングして表示します。
選択できる比率は下記です。

（正方形）1:1
（横長）3:2
（横長）4:3
（横長）16:9
（縦長）2:3
（縦長）3:4
（縦長）9:16

一括設定よりもこちらの個別設定が優先されます。
一括設定を優先する場合は「一括設定に合わせる」に設定してください。

リスト表示される画像の大きさが統一された方がサイトの見栄えが良くなります。
もちろん、そもそも商品登録時にすべて同じサイズの画像を用意することで対応可能です。あくまでもオプションとしてお使いください。

【TOPページ】カテゴリ表示

カテゴリ管理App利用時に、TOPページに大カテゴリのリンク一覧を表示できます。

top-category

【TOPページ】大カテゴリ一覧を表示（カテゴリ管理App）

ONにすると表示、
OFFにすると非表示になります。

【TOPページ】ブログ一覧

BLOG App利用時にTOPページにブログ一覧を3〜10件表示できます。
記事は新着順になります。任意で変更はできません。

top-blog

【TOPページ】ブログ一覧を表示（BLOG App）

ONにするとTOPページにブログ一覧を表示、
OFFにすると非表示になります。

【TOPページ】ブログ一覧：最大記事数

表示する記事数を3〜10件で調整できます。
下の項目のリストの列数に合わせて調整すると見やすくなると思います。

PC：ブログ一覧：リストの列数

PC表示時にTOPページのTOPページのブログ一覧の各アイテム、ブログ一覧ページの各アイテムの表示列数（カラム）を1〜5カラムで変更できます。
一括設定よりもこちらの個別設定が優先されます。
一括設定を優先する場合は「一括設定に合わせる」に設定してください。

スマホ：ブログ一覧：リストの列数

スマホ表示時にTOPページのブログ一覧の各アイテム、ブログ一覧ページの各アイテムの表示列数（カラム）を1〜2カラムで変更できます。
一括設定よりもこちらの個別設定が優先されます。
一括設定を優先する場合は「一括設定に合わせる」に設定してください。

PC：ブログ一覧：リストを行表示にする

スマホ：ブログ一覧：リストを行表示にする

ONにするとTOPページのブログ一覧の各アイテム、ブログ一覧ページの各アイテムの表示を横１行のレイアウト表示に変更します。
PC・スマホそれぞれで設定できます。一括設定よりもこちらの個別設定が優先されます。
一括設定を優先する場合は「一括設定に合わせる」に設定してください。

ブログ一覧：画像比率

TOPページのブログ一覧の各アイテム、ブログ一覧ページの各アイテムの商品画像の比率を一括で指定した比率に合わせて画像をトリミングして表示します。
選択できる比率は下記です。

（正方形）1:1
（横長）3:2
（横長）4:3
（横長）16:9
（縦長）2:3
（縦長）3:4
（縦長）9:16

一括設定よりもこちらの個別設定が優先されます。
一括設定を優先する場合は「一括設定に合わせる」に設定してください。

【TOPページ】FAQ

TOPページによくある質問を最大6件まで掲載できます。
メニューのリンクにも追加されます。
TOPページ以外ではメニューのリンクを押すとポップアップ表示されます。

TOPページのFAQデモ

top-faq

【TOPページ】FAQを表示

ONにするとFAQを表示、
OFFにすると非表示になります。

【TOPページ】FAQ①〜⑥：質問

質問内容を設定できます。
質問内容がなく、答えしかない場合はその番号の質問欄は表示されません。

【TOPページ】FAQ①〜⑥：答え

質問内容に対する回答を設定できます。

【TOPページ】並び順

TOPページのメインコンテンツ部分の並び順を変更変更できます。
変更できるのは下記です。

INFORMATION
パネルバナー
特集スライド
ランキング
商品一覧
ブログ一覧
FAQ
大カテゴリ一覧

上記がデフォルトの並び順となっています。
各項目に0〜9の番号を当てることで並び順を変更することが可能です。
0が1番上、9が1番下になります。
表示させたい順に入力エリアに「１」「2」という感じで1文字数字を入力すれば、その通りの順番になります。 ※0〜9の番号入力は必ず半角数字にしてください。全角や半角数字以外は無視されます。

【TOPページ】ABOUT

TOPページメインコンテンツ下にABOUTページへの導線を設置できます。
画像は「【ABOUTページ】メイン画像」に設定したものが入ります。

top-about

【TOPページ】ABOUTを表示

ONにすると表示、OFFにすると非表示になります。

【TOPページ】ABOUT：テキスト

TOPページABOUTエリアのテキストを設定します。

Instagram表示（Sauce by SNPT）

Sauce by SNPTを使ってInstagramのタイムライン表示ができます。
CONTACT以外の全ページに表示されます。

top-instagram

【Instagram】ギャラリーを表示（Sauce by SNPT）

ONにするとInstagramエリアを表示、
OFFにすると非表示になります。

【Instagram】Sauce by SNPTのコード

Sauce by SNPTのコードを入力します。
Sauce by SNPTをおすすめしていますが、SnapWidgetなどその他の埋め込みも対応可能です。

【ご注意】

※Sauce by SNPTをはじめとする外部サービスについては、サポート対象外となっております。
本オンラインマニュアルに記載の内容を超えるご案内や、個別のお問い合わせへの対応は行っておりませんので、あらかじめご了承ください。
なお、本サービスはInstagram公式の提供ではないため、予告なくご利用いただけなくなる場合がございます。その際の保証やサポートはいたしかねます。

※本マニュアルでは、外部サービスを利用したInstagramタイムラインの埋め込み方法をご紹介していますが、あくまで埋め込みコードを表示できる機能を提供しているものであり、外部サービス自体の提供・保証は行っておりません。ご紹介しているサービスの一部は無料プランがありますが、各サービスの料金体系や機能制限は予告なく変更される可能性があります。また、表示の可否や仕様変更については外部サービス側に依存するため、本機能を利用しての埋め込み表示が必ずしも可能であることを保証するものではありません。

◆Sauce by SNPT埋め込みコードの取得方法

【ご注意】

Sauce by SNPTは外部サービスのため、予告なく仕様やサービスの内容が変更される可能性があります。
あらかじめご了承ください。
アカウントの取得・設定がうまくいかない場合は、恐れ入りますがSauce by SNPTのヘルプページをご覧いただくか、Sauce by SNPTに直接お問い合わせをお願いいたします。

事前準備

Sauce by SNPTを使うと、Instagramアカウントと連携してフィードを埋め込むことが可能になります。アカウント登録以外で、連携するInstagramやFacebookアカウントでいくつか設定が必要です。

Facebookページ（Instagramと連携するためのページ）
Instagramのプロアカウント切り替え（ビジネス or クリエイター）
FacebookページとInstagramのプロアカウントの連携

少し前は個人のInstagramのアカウントだけ持っていればそれだけで連携可能でしたが、現在はFacebookページと連携しているプロアカウントでないと使えません。そのため先にこちらの手順をすませておく必要があります。

Instagramのプロアカウント切り替え方法

【Instagramアプリからの設定方法です。】

Instagramのプロフィール画面 → 「プロフィールを編集」
「プロアカウントに切り替える」に進む
「次へ」からカテゴリを選択 → 「完了」
クリエイターかビジネスを選択して「次へ」
画面に従って進むと完了

FacebookページとInstagramのプロアカウントの連携

【Instagramアプリからの設定方法です。】

Instagramのプロフィール画面 → 「プロフィールを編集」
プロフィール情報の「ページ」に進む
「Facebookページをリンクまたは作成」画面が出るので「次へ」
Facebookにログインし、連携したいページを選択して完了

ここまでで事前準備は完了です。その他、FacebookやInstagramに関する設定についてはご自身でお調べください。

コード取得フロー

ここからはコード取得するために実際にSauce by SNPTに登録・連携操作をしていきます。
※頻繁にデザインが変わるためスクリーンショットの画像と実際のサイトに違いがあるかもしれませんが、概ね連携方法は同じです。

Sauce by SNPTの公式ページへアクセスし、「Start free trial」のボタンをクリックします。

フォームの必要事項を入力しアカウントを作成します。

タイムラインを表示したいInstagramアカウントと連携します。

認証が必要なので許可します。

Instagram連携する際に、Facebookからのログイン認証を求められますので、この時にInstagramと連携したFacebookアカウントでログインしてください。

ログインするFacebookアカウントで、複数のFacebookページとInstagramアカウントを管理している場合は、ログインボタンの上の「アクセスを許可」から今回フィードとして使用したいFacebookページとInstagramアカウントだけアクセスを許可してください。

許可すると連携完了のメッセージ画面が出てきます。

「Next」で進むとアンケートが出てくるのでいくつか答えると、最後にInstagramに登録しているメールアドレス宛に下記の本人確認メールが来ます。

「CONFIRM EMAIL」ボタンを押すと本人確認が完了。

次にコードを取得します。
Sauce by SNPTページへログインして、「Visual Shopping」にマウスを当てると出てくるメニューの中で「Live Feed Galleries」をクリックします。

Live Feed Galleriesのページで「Live Instagram feed embed code」に表示されているコードが必要なコードです。「Copy embed code」でコピーすると取得完了です。

Live Feed Galleriesのページで「Live Instagram feed embed code」の下にレイアウト変更などちょっとしたカスタマイズができるオプションが付いているのでそちらもお試しください。

CTA

ページ下部、フッターの少し上に配置できる「背景画像」「テキスト」「リンクボタン」が設置できるCTAエリアを表示します。
CONTACT以外の全ページに表示されます。

CTAとは「Call To Action」の略で、日本語で言えば「行動喚起」という意味になります。
このエリアはユーザーを目的とする行動やページへの誘導・導線としてお使いいただけます。
デモサイトでは公式サイトに誘導する導線として使っています。

top-cta

CTAエリアを表示（フッター上）

ONにするとCTAエリアを表示、
OFFにすると非表示になります。

【CTAエリア】背景画像

PC表示時のCTAエリアの背景画像を設置できます。
推奨サイズは、横2880以上、縦480px以上（デモサイトは横2880x縦1800px）
空欄の場合は表示されません。

※テキストコンテンツ（見出し・説明・ボタンテキスト）の長さによってエリアの大きさが可変するため、推奨サイズ通りの表示にならない場合があります。あくまで背景画像としてお使いください。

【CTAエリア】見出し

CTAエリアの見出しです。
ユーザーを誘導したいページや行動へのキャッチコピーとしてお使いください。
デモサイトの場合は公式サイトに誘導したいので「OFFICIAL WEBSITE」としています。

【CTAエリア】説明

見出しに補足説明を付ける場合にご利用ください。

【CTAエリア】リンクURL

誘導したいページのURLを設定することでボタンが表示されます。
空欄の場合はボタンが表示されません。

【CTAエリア】ボタンテキスト

リンクを付ける場合にボタンの文字内容を設定できます。

メルマガ登録フォーム表示

メールマガジンApp利用時にフッターすぐ上にメルマガ登録フォームを表示します。

top-newsletter

【メールマガジンApp】説明文

メルマガ登録フォームの説明文を変更できます。
空欄の場合は表示されません。

ABOUTページ

ABOUTページで設定できるオプションについて。

ABOUTのデモページ

【ABOUTページ】メイン画像

ABOUTページ上部にメイン画像を設置できます。
推奨サイズは横960px以上（デモサイトは横1920x縦1080px）
空欄の場合は表示されません。

【ABOUTページ】ショップの説明を表示

BASE管理画面でショップ設定→ショップ情報→ショップの説明に設定した内容が反映されます。
メイン画像すぐ下に表示されます。
ONにすると表示、OFFにすると非表示になります。

about-shop-description

【ABOUTページ】CONCEPTを表示

ショップのコンセプトを掲載できるエリアです。
ONにすると表示、OFFにすると非表示になります。

【ABOUTページ】CONCEPT：説明

コンセプトの説明テキストを設定します。

【ABOUTページ】ACCESSを表示

実店舗の営業情報などを2件まで掲載できるエリアです。
ONにすると表示、OFFにすると非表示になります。

【ABOUTページ】ACCESS①〜②：店舗名

店舗名を入力します。
ACCESSに店舗名は必須となります。空欄にした場合は以降の「住所」「電話番号／メールアドレス／営業時間等」「任意リンク」「Googleマップ埋め込みコード」に入力があっても表示されません。

【ABOUTページ】ACCESS①〜②：住所

住所情報を入力します。
空欄の場合は表示されません。

【ABOUTページ】ACCESS①〜②：電話番号／メールアドレス／営業時間等

電話番号・メールアドレス・営業時間など店舗の詳細情報を入力します。
空欄の場合は表示されません。

【ABOUTページ】ACCESS①〜②：任意リンク

掲載したいリンクURLがある場合に掲載できます。
空欄の場合は表示されません。

【ABOUTページ】ACCESS①〜②：Googleマップ埋め込みコード

GoogleMapで発行される埋め込みコードを入力するとマップを掲載することができます。
該当のGoogleマップ→共有→地図を埋め込むで表示されるHTMLコードをコピーして貼り付けます。

【ABOUTページ】SHOPGUIDEを表示

ショップガイドとして見出しとテキストの組み合わせを1件として最大4件表示できます。
ショップの注意事項や送料、お支払いについて、返品・交換についてなどの情報を掲載するのに役立ちます。

【ABOUTページ】SHOPGUIDE①〜④：見出し

ショップガイドの見出しを設定します。
空欄の場合は表示されません。

【ABOUTページ】SHOPGUIDE①〜④：内容

ショップガイドの内容を設定します。
ショップガイドを表示したい場合、内容は必須項目となります。
空欄の場合はこの番号のショップガイドが見出しを含めて表示されません。

商品ページ

商品詳細ページで設定できるオプションについて。

商品詳細のデモページ

【商品ページ】フリーテキスト

商品説明の上にフリーテキストとして設定できます。
商品ごとに個別にではなく一括ですべての商品ページに設定できるので、注意事項や今だけ使えるクーポンコード、キャンペーンについてなどすべての商品で購入の際に伝えておきたい内容を掲載することができます。

item-free-text

【商品ページ】最近見た商品を表示

ONにすると商品ページ下部に最近見た商品を一覧表示します。
OFFにすると非表示になります。

※プレビュー画面の閲覧履歴は残りません。公開ページのみで確認できます。

【商品ページ】PC：最近見た商品：リストを行表示にする

ONにするとPC表示時に最近見た商品の各アイテムの表示を横１行のレイアウト表示に変更します。一括設定よりもこちらの個別設定が優先されます。一括設定を優先する場合は「一括設定に合わせる」に設定してください。

【商品ページ】スマホ：最近見た商品：リストを行表示にする

ONにするとスマホ表示時に最近見た商品の各アイテムの表示を横１行のレイアウト表示に変更します。一括設定よりもこちらの個別設定が優先されます。一括設定を優先する場合は「一括設定に合わせる」に設定してください。

【商品ページ】最近見た商品：見出し

最近見た商品の見出しを任意で変更できます。
空欄の場合は、デフォルトの「RECENTLY VIEWED ITEMS」が表示されます。

CONTACTページ

お問い合わせフォームのページです。
CONTACTのデモページ

※フォームの項目はカスタマイズできません。

プライバシーポリシーページ

プライバシーポリシーが掲載されるページです。
プライバシーポリシーのデモページ

※プライバシーポリシーの内容はBASEの仕様上、変更できません。詳しくは下記のヘルプページをご確認ください。プライバシーポリシーは編集できますか？｜BASEヘルプページ

特定商取引法に基づく表記ページ

特定商取引法に基づく表記が掲載されるページです
特定商取引法に基づく表記のデモページ

BASE管理画面ホーム→ショップ設定→運営に関する情報の各項目から編集が可能です。

商品検索結果ページ（商品検索App）

商品検索App利用時に、検索結果が表示されるページです。

商品検索結果のデモページ

カテゴリページ（カテゴリ管理App）

カテゴリ管理App利用時に、商品管理画面で商品にカテゴリを付けられるようになります。カテゴリページは各カテゴリごとの商品一覧をまとめて閲覧できるページです。

カテゴリのデモページ

ブログ一覧／ブログ記事ページ（BLOG App）

BLOG App利用時に、記事一覧ページと記事詳細ページが生成されます。

ブログ一覧ページ

投稿記事が1ページに15件まで表示されます。
16件以上になると一覧の下にページ送りが表示され一覧が次のページに分割されます。

ブログ一覧のデモページ

ブログ記事ページ

投稿記事の詳細ページです。

ブログ記事のデモページ

コミュニティページ（コミュニティApp）

コミュニティApp利用時に、コミュニティ会員限定の商品を販売したり、会員限定に公開したいページのURLを掲載できるようになります。インストールして利用を始めると自動的にページが生成されます。

コミュニティのデモページ

メンバーシップページ（メンバーシップApp）

メンバーシップApp利用時に、お客様とのつながりを深めるのに有効なメンバーシップを開設できるページが追加されます。インストールして利用を始めると自動的にページが生成されます。

メンバーシップのデモページ

アニメーション

TOPページメインビジュアルと、スクロールに合わせて要素を表示するアニメーションのON・OFFが可能です。

【アニメーション】スクロール演出

ONにするとスクロールに合わせて要素を表示するアニメーション演出を加えます。
OFFにするとアニメーションを無効にします。

【アニメーション】TOPメインビジュアル表示演出

ONにするとTOPページに遷移する際にメインビジュアルにアニメーション演出を加えます。
OFFにするとアニメーションを無効にします。

上級者向け設定

ある程度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 エンジニアとして制作会社に勤務しておりますので、返信が遅くなる可能性がございます。ご理解のほどよろしくお願いいたします。

更新情報

2025.2 カートバッジ表示機能に対応
2024.11 Pay ID あと払いウィジェット対応
2024.2 SNSアイコン各種を変更
2023.11 メニューのカテゴリ表示のフォントサイズを変更
2023.09 商品ページに「残り1点」表示機能追加
2023.09 TOPページにYouTube動画の埋め込み機能追加
2023.05 メンバーシップAppに対応しました。
2023.01 商品一覧「SOLD OUT」表示を画像の上に配置するかタグとして商品価格の下に配置するか切替機能を追加
2022.12 商品ページ「セール商品」の表示機能追加
2022.11 各所フォントサイズの微調整
2022.11 商品ページ「最近見た商品」の表示機能追加
2022.11 TOPページ任意のカテゴリー商品一覧の表示機能追加
2022.11 メインビジュアルにアニメーション演出追加（ON／OFF可能）
2022.11 スクロール時に要素のアニメーション演出追加（ON／OFF可能）

新規開設のショップ様限定！
フォーム申請で特典を提供いたします！

FROMOはBASEオフィシャルパートナーです。
当サイトを通して新規BASEショップを開設すると、
購入者様が利用できるクーポン1万円分、
BASEロゴ非表示Appの無償化（月額500円）
の特典が受けられます！

申請はこちらから▼

ショップ開設支援特典申請フォーム

room.の購入はこちら

GET THEME

BASEテーマの購入はBASEデザインマーケットからお願いいたします。

OTHER THEMES

その他のBASEデザインテーマ

NEW

tennis.

テニスドット

シンプルなデザインと機能性を両立させたテーマ。
直感的な商品探索、高い回遊性、そして充実した導線設計を提供。
商品を探しやすく・見やすく。
買い物をよりスムーズに、より楽しくするデザインです。

tennis.の説明を見る tennis.のデモサイトを見る tennis.を購入する

Sunny.

サニードット

ベーシックな1カラムレイアウトのデザイン。
LPのような作りで、スライドやアニメーションなど動きが豊富。
フォントサイズや商品一覧の列数などのカスタマイズが可能。
送料やお支払い方法についての記載エリアも搭載。

Sunny.の説明を見る Sunny.のデモサイトを見る Sunny.を購入する

BOLD.

ボールドドット

太字ゴシック体のフォントを生かしたデザイン。
インパクトのある見た目に、充実のオプション。
初心者でも設定しやすく、安定感のあるECサイトに。

BOLD.の説明を見る BOLD.のデモサイトを見る BOLD.を購入する

fit.

フィットドット

ミニマルな印象で使いやすいデザイン。
シンプルなレイアウトで、どんな商品の販売にもピッタリ。
幅広いECサイトに対応。

fit.の説明を見る fit.のデモサイトを見る fit.を購入する

FAQ

よくある質問

Q フォントサイズを変更する方法はありますか？

テーマにフォントサイズの設定機能がない場合、基本的にそのままでは変更できません。ただし、FROMO のテーマには「CSS追加」機能がありますので、その項目を使ってご自身でCSSを記述すれば変更可能です。 ※CSSコードの具体的な内容についてはサポートしておりませんのでご了承ください。

また、BASE の HTML編集App を使ってカスタマイズすることもできますが、その場合はBASEによる自動アップデート（Appsを含む新機能の追加や不具合修正など）が適用されなくなり、ショップオーナー様ご自身でメンテナンスしていただく必要があります。

Q Instagram 埋め込みエリアで紹介されている外部サービスがうまく連携できず、表示できません。

埋め込みエリアは、あくまで「外部サービスの埋め込みコードを表示するための箇所」を提供する機能です。本マニュアルでは一例として Sauce by SNPT を紹介していますが、このサービス専用というわけではなく、SnapWidget など他の外部サービスでも、埋め込みコードが発行されるものであれば表示できます。

紹介しているのは無料で利用できる方法の一例であり、有料サービスを利用していただいても問題ありません。なお、Instagram の埋め込みサービスは高度な知識を要するため、実用的に使うには有料のサービスが多い傾向にあります。

ただし、Sauce by SNPT をはじめとする外部サービス自体の動作や仕様、サポートは当テーマの対象外です。外部サービスは予告なく仕様変更・提供終了される場合があり、その際の表示可否や不具合については当方で対応いたしかねますので、あらかじめご了承ください。また、紹介しているサービスの料金や機能制限は、提供元の判断で変更される可能性があります。

Q ABOUTページの「ショップの説明」の記載方法がわかりません。

ABOUTページに表示される「ショップの説明」は、テーマの編集画面からではなく、BASEの管理画面から設定します。

以下の手順で、表示したい文章を入力してください。

【設定手順】