BASE DESIGN MARKET BASEテンプレート

tennis-dot

tennis. テニスドット

13,800円

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

BASE Partners

FROMOはBASEオフィシャルパートナーです。
パートナープログラムの一環として、当サイトを通して新規のBASEショップを立ち上げると、
ショップの購入者様が利用できるクーポン1万円分
BASEロゴ非表示Appの無償化(月額500円)の特典が受けられます!

申請はこちらから▼

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

特徴

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

  • フォントの変更可能(3 パターン)
  • 見出しのデザイン変更可能
  • メニューの日本語化可能
  • 商品・ブログ一覧を 2〜6 カラムまで任意設定可能(スマホでは 1〜3 カラム)
  • ヘッダー追従の有無を調整可能
  • フッターや ABOUT ページに送料やお支払い方法を表示可能
  • スクロールアニメーションの有無を切り替え可能
  • 角丸デザインの ON・OFF 切り替え可能
  • TOP ページにスライドや特集・ピックアップなどの任意のコンテンツを多数掲載可能。
  • TOP ページの並び順を変更可能。
  • ABOUT ページに店舗情報やショップガイド、よくある質問を掲載可能
  • 商品ページに最近見た商品一覧・セール商品一覧・その他の商品一覧を表示可能

デモサイト

tennis.を実際に適用したデモサイトです。
tennis.デモサイト

ページ構成

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

基本ページ

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

  • 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 の「ショップロゴ作成」などをご利用ください。

基本設定 - 背景

デザイン編集画面 → 背景

カラーから選ぶ

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

パターンから選ぶ

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

全体設定

デザイン編集画面 → テーマ設定 → 全体設定

サイト全体で一括で変更できる箇所の設定です。

【全体】テキストカラー

サイト全体の文字色。
背景色は基本設定の「背景」から変更できます。

【全体】フォント

下記の 3 つから選択できます。

  • ゴシック体
  • 明朝体
  • 丸ゴシック体

【全体】メニューを日本語にする

HOME や ABOUT といった BASE のデフォルトのリンクテキストを日本語に変更します。

【全体】見出しのデザイン

見出しのデザインを変更します。

デフォルト

上:見出し(メイン)
下:見出し(サブ)
の配置で並べます。
見出し(メイン)の文字を大きく、見出し(サブ)を小さく表示します。

見出し デフォルト

上下を逆にする

上:見出し(サブ)
下:見出し(メイン)
の配置で並べます。
見出し(メイン)の文字を大きく、見出し(サブ)を小さく表示します。

見出し 上下を逆にする

大小を逆にする

上:見出し(メイン)
下:見出し(サブ)
の配置で並べます。
見出し(メイン)の文字を小さく、見出し(サブ)を大きく表示します。

見出し 大小を逆にする

上下と大小を逆にする

上:見出し(サブ)
下:見出し(メイン)
の配置で並べます。
見出し(メイン)の文字を小さく、見出し(サブ)を大きく表示します。

見出し 上下と大小を逆にする

重ねる

見出し(メイン)の背景に見出し(サブ)を大きく重ねて表示します。

見出し 重ねる

見出し(メイン)を非表示

見出し(メイン)を非表示にして、見出し(サブ)のみを表示します。
見出し(サブ)のサイズは大きく表示します。

見出し(メイン)を非表示

見出し(サブ)を非表示

見出し(サブ)を非表示にして、見出し(メイン)のみを表示します。
見出し(メイン)のサイズは大きく表示します。

見出し(サブ)を非表示

【全体】下層ページ:メイン画像のパララックス

下層ページ(ABOUT・BLOG・コミュニティ・メンバーシップ)のメインビジュアルを設置した際の、パララックス効果の ON・OFF を設定できます。

【全体】下層ページ:タイトルのデザイン

下層ページ(ABOUT・BLOG・コミュニティ・メンバーシップ)のページタイトルのデザインを変更します。

※デザインのパターンは 【全体】見出しのデザインと同じです。

デフォルト

上:タイトル(メイン)
下:タイトル(サブ)
の配置で並べます。
タイトル(メイン)の文字を大きく、タイトル(サブ)を小さく表示します。

上下を逆にする

上:タイトル(サブ)
下:タイトル(メイン)
の配置で並べます。
タイトル(メイン)の文字を大きく、タイトル(サブ)を小さく表示します。

大小を逆にする

上:タイトル(メイン)
下:タイトル(サブ)
の配置で並べます。
タイトル(メイン)の文字を小さく、タイトル(サブ)を大きく表示します。

上下と大小を逆にする

上:タイトル(サブ)
下:タイトル(メイン)
の配置で並べます。
タイトル(メイン)の文字を小さく、タイトル(サブ)を大きく表示します。

タイトル(メイン)を非表示

タイトル(メイン)を非表示にして、タイトル(サブ)のみを表示します。
タイトル(サブ)のサイズは大きく表示します。

タイトル(サブ)を非表示

タイトル(サブ)を非表示にして、タイトル(メイン)のみを表示します。
タイトル(メイン)のサイズは大きく表示します。

【商品・ブログ一覧】スマホ:カラム数

スマホ表示時の商品一覧・ブログ一覧の列数を 1〜3 列で設定できます。

【商品・ブログ一覧】PC:カラム数

PC 表示時の商品一覧・ブログ一覧の列数を 2〜6 列で設定できます。

【商品・ブログ一覧】サムネイルの横縦比に合わせて画像をトリミングする

ON にすると、商品一覧・ブログ一覧の画像の比率を、指定した比率に合わせてトリミング表示します。

【商品・ブログ一覧】サムネイルの横縦比

「サムネイルの横縦比に合わせて画像をトリミングする」を ON にした場合に横縦比を設定できます。
選択できる比率は下記です。

  • デフォルト
  • 1:1
  • 3:2
  • 4:3
  • 2:3
  • 3:4

【全体】角丸デザイン

ON にするとボタンや画像を角丸デザインにします。
OFF にすると角丸を無効化します。

ヘッダー設定

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

【ヘッダー】画面上部に固定する

ON にするとヘッダーを画面上部に固定表示します。
OFF にすると固定表示を無効化します。

【ヘッダー】文字色

ヘッダー部分の文字色。
主にアイコン(メニュー・検索・カート)の色になります。

【ヘッダー】背景色

ヘッダー部分の背景色。

【ヘッダー】スマホ:ロゴ画像上限サイズ

スマホ表示時のロゴ画像の上限サイズを 3 段階で設定できます。

【ヘッダー】PC:ロゴ画像上限サイズ

PC 表示時のロゴ画像の上限サイズを 3 段階で設定できます。

▶️ ロゴ画像上限サイズ設定についての補足

主にサイズの大きいロゴを縮小表示するために使う設定です。
上限サイズの設定になるので、例えば 2 と設定していても、2 サイズ未満のロゴ画像を設定している場合はサイズに変化はありません。はじめから小さいサイズのロゴを設定している場合はそれ以上小さくする必要がないため、デザインに対して大きめのロゴ画像を設定したときにデザインに合うバランスに収めるための微調整機能とお考えください。

メニュー設定

メニュー

メニュー周りの設定について。

【メニュー】文字色

ヘッダー左上のボタンを押すと表示されるメニューの文字色

【メニュー】背景色

ヘッダー左上のボタンを押すと表示されるメニューの背景色

【メニュー】任意リンク(1 〜 3):リンクテキスト

メニュー内の「プライバシーポリシー」「特定商取引法に基づく表記 」のリンクの並びの下に、任意のテキストリンクを 3 つまで置くことができます。そのリンクに使うテキストを設定できます。「任意リンク(1 〜 3):URL」とセットで設定します。空欄の場合は表示されません。

【メニュー】任意リンク(1 〜 3):URL

任意リンク(1 〜 3)の URL を設定します。

検索フォーム周辺設定(商品検索 App)

検索メニュー

検索フォーム周りの設定について。

【検索】おすすめキーワードを表示(商品検索 App)

ヘッダー右上の検索アイコンを押すと表示される検索モーダル内、また、ヘッダー左上のボタンを押すと表示されるメニュー内の検索フォームの下にキーワード入力欄の下に、おすすめの商品検索キーワードを表示できます。
クリックするだけで検索できるようになるので、あらかじめ商品に辿り着きやすいキーワードを登録しておくと便利です。
ON/OFF で表示を切り替えられます。

【検索】おすすめキーワード(1 〜 6)

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

【検索モーダル】カテゴリ一覧を表示(カテゴリ管理 App)

ON にするとヘッダー右上の検索アイコンを押すと表示される検索モーダル内に、カテゴリ一覧を表示します。
フリーワード検索よりもカテゴリから絞り込む方が使いやすい場合もあるので、その導線としておすすめキーワードと併せて設置しておくとユーザビリティの向上が期待できます。

フッター設定

フッター

フッター周りの設定について。

【フッター】カテゴリ一覧を表示(カテゴリ管理 App)

ON にすると、フッターにカテゴリ一覧を表示、OFF にすると非表示にします。
カテゴリ一覧は「SHOPPING(日本語メニューの場合は"商品を探す")」の下に追加されます。

【フッター】お支払い方法についてを表示

ON にすると、フッターにお支払い方法についてを表示、OFF にすると非表示にします。

【お支払い方法】各種

BASE で決済可能な各支払い方法についての表示を ON・OFF で切り替えられます。 フッター部分と、ABOUT ページの表示も切り替わります。

  • クレジットカード決済
  • あと払い(Pay ID)
  • キャリア決済
  • 銀行振り込み
  • コンビニ支払い・Pay-easy
  • Amazon Pay
  • PayPal 決済

【フッター】お支払い方法:テキスト

フッターのお支払い方法についての説明を追加できます。

【フッター】送料・配送についてを表示

ON にすると、フッターに送料・配送についてを表示、OFF にすると非表示にします。

【フッター】送料・配送について:テキスト

フッターの送料・配送についての詳細テキストを追加できます。

【フッター】メールマガジン説明文(メールマガジン App)

メールマガジン App 使用時にフッターに表示される、メールマガジン登録フォームに説明文を追記できます。
デフォルトは「最新情報をいち早くメールでお届けいたします。」となっています。
空欄にすると非表示になります。

HOME 設定

デザイン編集画面 → テーマ設定 → HOME 設定

TOP ページの設定について。

トップページ

【TOP ページ】メインビジュアル

TOP ページにメインビジュアルを表示できます。

  • PC 表示時、スマホ表示時でそれぞれ違う画像を設定可能。
  • スライド形式で最大 3 枚まで追加可能。
  • 各スライドごとにリンク設定可能。
  • 各スライドごとに画像の上に任意のテキスト表示可能。

【TOP ページ】メインビジュアルを表示

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

【メインビジュアル】PC 表示時のマウスストーカーの色

リンクを設定しているスライドは、PC 表示時にマウスオーバーすると円形オブジェクトがカーソルに追従するエフェクト(マウスストーカー)が表示されます。
その円形オブジェクトの色を変更できます。
※少し透過して表示されます。

【メインビジュアル(1〜3)】PC 画像(推奨サイズ:横 2880× 縦 1620px)

PC 表示時のメイン画像を設定できます。 ※スライドを表示したい場合の必須項目です。この項目が空欄(画像が設定されていない)の場合は、他の項目が入力されていてもその番号のスライドは表示されません。
※画像の推奨サイズは、スライドに追加されるテキスト(サブタイトル・タイトル・テキスト)があくまでもデモサイトと同じ程度の量の場合に限ります。文章量が画像の高さより」多い場合は画像がその分引き伸ばされて表示されるのでご注意ください。

【メインビジュアル(1〜3)】スマホ画像(推奨サイズ:横 630× 縦 840px)

スマホ表示時のメイン画像を設定できます。
空欄の場合は、スマホでも PC 用の画像が表示されます。
※スマホ用の画像だけではスライドは表示されません。スマホ用しか必要がない場合でも、必ず PC 用の画像にも設定してください。
※画像の推奨サイズは、スライドに追加されるテキスト(サブタイトル・タイトル・テキスト)があくまでもデモサイトと同じ程度の量の場合に限ります。文章量が画像の高さより」多い場合は画像がその分引き伸ばされて表示されるのでご注意ください。

【メインビジュアル(1〜3)】リンク URL

スライドにリンクを付けたい場合に設定します。

【メインビジュアル(1〜3)】テキストを表示

ON にすると、画像の上に任意のテキストを重ねて表示できます。 OFF にすると非表示になり、シンプルに画像のみの表示になります。

【メインビジュアル(1〜3)】文字色

「テキストを表示」が ON の場合の、テキストの文字色を変更できます。

【メインビジュアル(1〜3)】サブタイトル

「テキストを表示」が ON の場合にスライド上にサブタイトルを表示します。
あまり長くなると見栄えが悪くなるので、10 文字程度に収めるのがおすすめです。

【メインビジュアル(1〜3)】タイトル

「テキストを表示」が ON の場合にスライド上にタイトルを表示します。
あまり長くなると見栄えが悪くなるので、30 文字程度に収めるのがおすすめです。

【メインビジュアル(1〜3)】テキスト

「テキストを表示」が ON の場合にスライド上に小さめの文字で説明を追加できます。
こちらもあまり長くなると見栄えが悪くなるので、30~40 文字以内の短めの文章を設定するのがおすすめです。
タイトルとのバランスを見て文字だらけにならないようにすると良いと思います。

【TOP ページ】メッセージエリア

TOPメッセージ

TOP ページ、スライドのすぐ下にメッセージエリアを表示できます。
タイトルと説明を追加できるので、告知や注意事項など TOP ページに文章で追加しておきたいものがある場合にお使いいただけます。
タイトルの上に画像を追加することも可能です。

【TOP ページ】メッセージを表示

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

【メッセージ】画像

メッセージの上部に画像を追加することができます。

【メッセージ】タイトル

メッセージエリアのタイトルを追加できます。
空欄の場合は非表示になります。

【メッセージ】詳細

メッセージエリアに詳細テキストを追加できます。
空欄の場合は非表示になります。

【メッセージ】テキストを中央寄せにする

ON にするとメッセージエリアのテキストを中央寄せにします。
OFF にすると左寄せになります。

【TOP ページ】バナーエリア

バナーエリア

TOP ページに、バナーエリアとしてバナーを 5 枚まで追加できます。
各バナーには中央に見出しを設置することも可能です。

【TOP ページ】バナーエリアを表示

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

【バナーエリア】見出し(メイン)

バナーエリアにメイン見出しを付けることができます。
デフォルトでは注目のカテゴリが入ることを想定して「Featured Categories」になっています。
「【全体】見出しのデザイン」で選択したデザインが反映されます。

【バナーエリア】見出し(サブ)

バナーエリアにサブ見出しを付けることができます。
デフォルトでは「注目のカテゴリ」になっています。
「【全体】見出しのデザイン」で選択したデザインが反映されます。

【バナー(1〜5)】バナー画像(推奨サイズ:横 900× 縦 1200px)

バナー画像を設定できます。
空欄の場合は非表示になります。

【バナー(1〜5)】リンク URL

バナーに設定するリンク URL を入力します。
空欄の場合はリンクなしになります。

【バナー(1〜5)】バナータイトル

バナー画像の中央にタイトルを追加できます。
空欄の場合は表示されません。

【バナー(1〜5)】文字色

バナータイトルの文字色を設定できます。

【TOP ページ】セール商品一覧エリア

セール商品一覧

セール App で割引になったセール商品の一覧を表示できるエリアです。
最大 6 件表示します。

【TOP ページ】セール商品一覧エリアを表示

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

【TOP ページ】カテゴリ商品一覧エリア

カテゴリー商品一覧

カテゴリ管理 App 利用時に、TOP ページに任意のカテゴリーの商品一覧を表示します。
タブ切り替え式で、最大 3 カテゴリーまで表示できます。
商品の表示件数は 1 カテゴリーにつき最大 24 件、並び順は新着順になります。
一覧の下の MORE ボタンでカテゴリページにリンクします。

【TOP ページ】カテゴリ商品一覧エリアを表示

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

【カテゴリ商品一覧エリア】見出し(メイン)

カテゴリ商品一覧エリアにメイン見出しを付けることができます。
デフォルトでは「Collections」になっています。
「【全体】見出しのデザイン」で選択したデザインが反映されます。

【カテゴリ商品一覧エリア】見出し(サブ)

カテゴリ商品一覧エリアにサブ見出しを付けることができます。
デフォルトでは「商品コレクション」になっています。
「【全体】見出しのデザイン」で選択したデザインが反映されます。

【カテゴリ 1〜3】カテゴリ名

カテゴリ名を入力します。

【カテゴリ 1〜3】カテゴリ ID

カテゴリ ID を入力します。

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

【TOP ページ】カテゴリ一覧

カテゴリ一覧

カテゴリ管理 App 利用時に、TOP ページ・カテゴリページ・検索結果ページ・商品ページにカテゴリのリンク一覧を表示できます。

【TOP ページ】カテゴリ一覧を表示(カテゴリ管理 App)

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

【TOP ページ】ピックアップエリア

ピックアップエリア

TOP ページにピックアップエリアとして、画像 3 つとタイトル・詳細テキストを 1 セットとしたコンテンツを 2 セットまで追加できます。
PC 表示時のレイアウトを 3 パターンから選ぶことができ、より注目度を上げられるエリアになるので、商品の訴求効果を高められます。
※スマホ表示時はレイアウトパターンは変更できません

【TOP ページ】ピックアップエリアを表示

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

【ピックアップ】PC 表示時のレイアウト設定

「デフォルト」「パターン 1」「パターン 2」の 3 パターンでレイアウトを変更できます。
※スマホ表示時はレイアウトパターンは変更できません

パターン1

ピックアップ パターン1

パターン2

ピックアップ パターン2

【ピックアップ】PC 表示時にコンテンツを画面に追従する(※レイアウト設定がデフォルトの場合のみ適用)

ON にすると、PC 表示時のレイアウト設定が「デフォルト」の場合に、タイトルと詳細テキストを画面に追従させます。
タイトル+詳細テキストが画面の高さを超えるぐらい長い場合は OFF にすることを推奨します。
掲載する文字の量を調整できる場合は、PC 表示時にテキストに集中させられるため効果的です。

※そもそも追従させるほど 1 セットの高さがない場合(3 枚の画像よりテキストの方が長い場合)は ON にしても追従になりません。

【ピックアップ(1〜2)】コンテンツを表示

各ピックアップのセットごとに表示・非表示を切り替えられます。

【ピックアップ(1〜2)】画像 1〜3(推奨サイズ:横 900 × 縦 1200px)

画像を 3 枚まで掲載できます。
推奨サイズ:横 900 × 縦 1200px

【ピックアップ(1〜2)】タイトル

ピックアップのテキストのタイトルを追加できます。
空欄の場合は非表示になります。

【ピックアップ(1〜2)】詳細

ピックアップの詳細テキストを追加できます。
空欄の場合は非表示になります。

【ピックアップ(1〜2)】VIEW MORE ボタンのリンク先 URL

詳細テキストの下の VIEW MORE ボタンにリンクを設定できます。
空欄の場合はボタンが表示されません。

【TOP ページ】マーキーエリア

マーキーエリア

右から左に無限に文字が流れ続けるマーキーエフェクトのテキストアニメーションを表示できます。
デザインのアクセントとしてご利用ください。

【TOP ページ】マーキー(テキストの自動スクロール)の表示

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

【マーキー】テキスト

流れ続ける文字を設定できます。
空欄の場合は表示されません。
文字の長さは 20 文字〜30 文字程度を推奨しています。

【TOP ページ】特集エリア

特集エリア

TOP ページに特集エリアとして、画像とタイトル・説明・タグを 1 セットとしたコンテンツを 3 セットまで追加できます。
PC 表示時のレイアウトを 3 パターンから選ぶことができ、商品ページへの導線として訴求効果を高められます。
※スマホ表示時はレイアウトパターンは変更できません

【TOP ページ】特集エリアの表示

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

【特集エリア】見出し(メイン)

特集エリアにメイン見出しを付けることができます。
デフォルトでは「Featured Items」になっています。
「【全体】見出しのデザイン」で選択したデザインが反映されます。

【特集エリア】見出し(サブ)

特集エリアにサブ見出しを付けることができます。
デフォルトでは「注目の商品」になっています。
「【全体】見出しのデザイン」で選択したデザインが反映されます。

【特集エリア】回転テキストの表示

特集エリアの一つ目のセットの画像の右上に、円状に回転するテキストを設置できます。
ON にすると表示、OFF にすると非表示になります。

【特集エリア】回転テキストの文字(20 文字以内)

回転テキストの文字を任意で変更できます。
文字制限は 20 文字です。21 文字目以降は切り取られますので、ご注意ください。
デフォルトでは「FEATURED・FEATURED・」と入るようになっています。

【特集エリア】回転テキストの文字色

回転テキストの文字色を変更できます。

【特集エリア】PC 表示時のレイアウト設定

「デフォルト」「1 カラム」「3 カラム」の 3 パターンでレイアウトを変更できます。
※スマホ表示時はレイアウトパターンは変更できません

1カラム

特集エリア 1カラム

3カラム

特集エリア 3カラム

【特集(1〜3)】画像 1(推奨サイズ:横 1500× 縦 1000px)

特集に画像を設定できます。
推奨サイズ:横 1500× 縦 1000px
※デザイン上、画像は必須となります

【特集(1〜3)】タイトル(推奨:10〜20 文字)

特集にタイトル(商品名など)を設定できます。

【特集(1〜3)】説明(推奨:50〜60 文字)

特集に説明(商品詳細など)を設定できます。
空欄の場合は非表示になります。

【特集(1〜3)】タグ(価格など)

特集にタグ(価格など)を設定できます。
空欄の場合は非表示になります。

【特集(1〜3)】リンクURL

特集にリンクを設定できます。
空欄の場合はリンクなしになります。

【TOP ページ】YouTube 背景動画エリア

YouTube動画背景エリア

YouTube 動画を背景に無限ループで再生して目を惹くエリアです。
デモサイトのように YouTube チャンネルへの導線として使うだけでなく、お問い合わせや公式サイト、注目商品はへの導線、ユーザーへの行動喚起を促すエリアとして効果的です。
あまり長すぎる動画は表示するまでに時間がかかるため、5〜20 秒程度のティザー動画を設置するのがおすすめです。 動画は自動再生されます。
動画の音は流れません。
あくまでも背景動画として設置することを前提としてデザインしているエリアです。そのため、手前に設置する見出しや説明が多い場合はそれに合わせて背景が伸びるため、必ずしもすべての画角が表示されるわけではありません。 テロップ付きの動画や商品説明などの音声を聞かせる動画は、こちらに設置してもあまり効果はありません。そのような種類の動画については、ブログ記事(BLOG App)や商品ページ(商品説明カスタム App)に設置することをおすすめします。

【TOP ページ】YouTube 背景動画エリアを表示

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

【YouTube エリア】YouTube 動画 ID

再生したい YouTube 動画の ID (Video ID)を設定します。
PC の場合は、動画画面上でマウス右クリックして「詳細統計情報」を選ぶと Video ID が表示されます。 URL から取得する場合は、 watch?v= の後の部分と同じです。
https://www.youtube.com/watch?v=[ここがVideo ID です]

デモサイトの例で言うと、動画の URL は下記で、
https://www.youtube.com/watch?v=Qt4_KEK0iyY
ID はQt4_KEK0iyYです。

【YouTube エリア】見出し

動画の前面に見出しを設置できます。
デフォルトは「YouTube」となっています。

【YouTube エリア】説明

動画の前面に説明を設置できます。
空欄の場合は非表示になります。

【YouTube エリア】VIEW MORE ボタンのリンク先 URL

動画の前面に「VIEW MORE」リンクボタンを設置できます。
任意の URL を設定すると表示、、空欄の場合は非表示になります。

【TOP ページ】ブログ一覧エリア

TOPページ ブログエリア

TOP ページにブログ記事の一覧を表示できます。
新着順で最大 16 件まで表示できます。

【TOP ページ】ブログ一覧エリアを表示

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

【ブログ一覧】見出し(メイン)

ブログ一覧エリアにメイン見出しを付けることができます。
デフォルトでは「Featured Items」になっています。
「【全体】見出しのデザイン」で選択したデザインが反映されます。

【ブログ一覧】見出し(サブ)

ブログ一覧エリアにサブ見出しを付けることができます。
デフォルトでは「注目の商品」になっています。
「【全体】見出しのデザイン」で選択したデザインが反映されます。

【TOP ページ】並び順

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

  • バナーエリア
  • セール商品一覧
  • カテゴリ商品一覧
  • カテゴリ一覧
  • ピックアップエリア
  • マーキーエリア
  • 特集エリア
  • 商品一覧
  • YouTube 背景動画
  • ブログ一覧

上記がデフォルトの並び順となっています。

【TOP ページ】並び順:各エリア

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

【TOP ページ】Instagram 埋め込みエリア

Instagram埋め込みエリア

TOP ページに Sauce by SNPT を使って Instagram のタイムライン表示ができます。

【TOP ページ】Instagram 埋め込みエリアを表示

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

【Instagram】見出し(メイン)

Instagram 埋め込みエリアにメイン見出しを付けることができます。
デフォルトでは「Instagram」になっています。
「【全体】見出しのデザイン」で選択したデザインが反映されます。

【Instagram】見出し(サブ)

Instagram 埋め込みエリにサブ見出しを付けることができます。
デフォルトでは「インスタグラムギャラリー」になっています。
「【全体】見出しのデザイン」で選択したデザインが反映されます。

【Instagram】埋め込みコード

Sauce by SNPT のコードを入力します。
コードの取得方法については、下記のページをご覧ください。
Sauce by SNPT のコード取得方法| BASE テーマ「room.」

ABOUT ページ

ABOUTページ

デザイン編集画面 → テーマ設定 → ABOUT 設定

ABOUT ページの設定について。

ABOUT ページのデモページ

【ABOUT ページ】メイン画像(推奨サイズ:横 2880px 縦 780px)

ABOUT ページ最上部のメイン画像を設定できます。 推奨サイズは、横 2880px 縦 780px です。

【ABOUT ページ】バナーを表示

ABOUT ページにバナーを 1 枚設置できます。
ON にすると表示、OFF にすると非表示になります。
PC 表示時は左側のページメニュー下部に、
スマホ表示時は ABOUT ページコンテンツの最下部に表示されます。

ABOUTページ バナー

【ABOUT ページ:バナー】画像

バナー画像を設定できます。

【ABOUT ページ:バナー】リンク URL

バナーのリンク先を設定できます。

【ABOUT ページ】アクセス掲載エリア

ABOUT アクセス掲載エリア

ABOUT ページに実店舗へのアクセス情報を 3 件まで掲載できます。
各アクセス情報に掲載できる内容は下記です。

  • 店舗名
  • 詳細テキスト
  • Google マップ埋め込み

【ABOUT ページ】アクセスを表示

ON にするとアクセス掲載エリアを表示、
OFF にすると非表示になります。

【アクセス(1〜3)】コンテンツを表示

各アクセス情報を個別に表示・非表示できます。
ON にすると表示、OFF にすると非表示になります。

【アクセス(1〜3)】店舗名

各アクセス情報ごとに店舗名を設定できます。

【アクセス(1〜3)】詳細

各アクセス情報ごとに詳細テキストを設定できます。
住所や経路、電話番号などをテキストで掲載可能です。

【アクセス(1〜3)】Google マップ埋め込みコード

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

【ABOUT ページ】ショップガイド掲載エリア

ABOUT ショップガイド掲載エリア

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

【ABOUT ページ】ショップガイドを表示

ON にするとショップガイド掲載エリアを表示、OFF にすると非表示になります。

【ショップガイド(1〜5)】タイトル

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

【ショップガイド(1〜5)詳細

ショップガイドの内容を設定します。

【ABOUT ページ】お支払い方法について

お支払い方法について

ABOUT ページにお支払い方法についてを掲載できます。BASE で取り扱いのある各種支払い方法について表示できるエリアです。フッター部分の表示と連動していますが、こちらは各種支払い方法のロゴと合わせて見やすく表示します。

【ABOUT ページ】お支払い方法についてを表示

ON にするとお支払い方法についてエリアを表示、OFF にすると非表示になります。

【ABOUT ページ】お支払い方法:詳細

お支払い方法についての説明テキストを掲載できます。

【ABOUT ページ】FAQ エリア

FAQ掲載エリア

ABOUT ページによくある質問を最大 10 件まで掲載できます。

【ABOUT ページ】FAQ を表示

ON/OFF で FAQ エリアの表示を切り替えられます。

【FAQ(1〜10)】質問

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

【FAQ(1〜10)】答え

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

デザイン編集画面 → テーマ設定 → 商品ページ設定

商品ページ

商品詳細ページの設定について。

商品ページのデモページ

【商品ページ】PC 表示時のコンテンツの追従設定

PC 表示時の商品ページのコンテンツの追従挙動について設定できます。

  • 追従しない
  • 左カラムを追従
  • 右カラムを追従

左カラムを追従させる際は、「商品画像の表示設定」がスライドの場合や、商品画像が 1〜2 枚で高さが画面の高さに収まる場合などで、右カラムの商品説明の高さが画面の高さ以上ある場合に有効です。
右カラムを追従させる際は、左カラムの商品画像の高さがあり、右カラムの高さが画面の高さに収まる場合に有効です。「商品画像の表示設定」がリストやグリッドの場合で、商品写真の数が多くスクロールしないと見れない場合に有効です。
全商品ページに設定されます。商品ごとに設定を変えることはできません。

【商品ページ】PC 表示時の商品画像の表示設定

PC 表示時の商品画像のレイアウトを変更できます。
スマホ表示時は、スライドから変更できません。

  • スライド → スライド形式で表示します。→(デモページ
  • リスト → 1 列で表示します。
  • グリッド → 2 列で表示ます。
リスト

商品画像 リストレイアウト

グリッド

商品画像 グリッドレイアウト

【商品ページ】「残り 1 点」を表示する

在庫が残り 1 点の場合に価格表記の下に「残り 1 点」と表示します。
また、複数のバリエーション(商品の種類)によって在庫数が違う場合、選択した種類の在庫が残り 1 点の場合に選択ボックスの下にに「残り 1 点」と表示します。

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

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

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

【商品ページ】購入ボタン:ボーダー(枠線)の表示

ON にすると枠線を表示、
OFF にすると非表示することができます。

【商品ページ】フリーテキスト(全商品ページの商品説明の上に表示)

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

【商品ページ】関連商品を表示

ON にすると商品ページの関連商品を表示、
OFF にすると非表示になります。

関連商品は、BASE の機能で商品詳細ページに自動で 3 つ表示されるようになっています。
商品のアルゴリズムや表示する件数などはテーマでは変更できませんが、表示・非表示ができます。

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

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

※BASE のプレビュー画面では表示されません。ご注意ください。

【商品ページ】セール商品一覧を表示

ON にすると、セール App 利用時に、割引商品の一覧を最大 6 件表示します。

【商品ページ】その他の商品一覧を表示(※ランダム表示)

ON にすると、その他の商品一覧を最大 6 件表示します。

下層ページ各種メイン画像

デザイン編集画面 → テーマ設定 → その他設定

仮装ページの中の下記のページでメイン画像を設定できます。

  • BLOG ページ(Blog App 利用時)
  • メンバーシップページ(メンバーシップ App 利用時)
  • コミュニティページ(コミュニティ App 利用時)

【BLOG ページ】メイン画像(推奨サイズ:横 2880px 縦 780px)

BLOG ページ最上部のメイン画像を設定できます。 推奨サイズは、横 2880px 縦 780px です。

【メンバーシップページ】メイン画像(推奨サイズ:横 2880px 縦 780px)

メンバーシップページ最上部のメイン画像を設定できます。 推奨サイズは、横 2880px 縦 780px です。

【コミュニティページ】メイン画像(推奨サイズ:横 2880px 縦 780px)

コミュニティページ最上部のメイン画像を設定できます。 推奨サイズは、横 2880px 縦 780px です。

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 にするとアニメーションを無効にします。

上級者向け設定

デザイン編集画面 → テーマ設定 → その他設定

ある程度 Web 知識のある方向けの設定です。

【上級者向け】OGP 画像(推奨サイズ:横 1200px× 縦 630px)

SNS でシェアするときに表示される OGP 画像を変更できます。
※商品ページ以外で適用されます。

【上級者向け】CSS 追加

CSS の知識がある方はこちらに追記することでデザインのカスタマイズが可能です。

【上級者向け】head 内にタグを追加

headタグ内に任意のhtmlタグを追記できます。

対応する 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 での個別のカスタマイズ要望については有料・無料に関わらず一律でお断りしております。個人的なカスタマイズ要望でなく、「新しい Apps に対応して欲しい」「こんな機能があったら嬉しい」などのテーマをご利用いただいている皆さま全体に関わるアップデートや修正要望にはできるだけお応えいたします。
※HTML 編集 App でのカスタマイズについては自己責任でお願いします。購入したテーマを元に HTML 編集 App でカスタマイズしている場合は、元のテーマに不具合があったとしても個別の修正等のご要望をお断りしております。
※テーマの使い方を直接レクチャーしたり、テーマのソースコードについて教えるといったサポートサービスは行なっていませんのでご理解のほどよろしくお願いいたします。
※不具合の修正についてはなるべく早く対応しますが、修正対応に加え BASE の審査があるため数日〜1 週間以上かかる場合がございます。また、BASE の審査が不合格となり再修正・再審査の期間がさらに必要になる場合もございます。手元で修正できてもすべてのお客様のテーマに反映されるまでの期間が流動的になってしまうため具体的にいつまでに修正しますという日程のお約束は控えさせていただいております。ただ基本的には手元での修正は大きなものではない限りは 1 週間以内には対応して申請するようにしております。
※テーマの使い方に記載のない機能はこのテーマに備わっておりません。ご質問の前にご確認ください。
※テーマの機能やデザインは予告なく変更・除外する場合がございます。
※FROMO は法人や組織活動ではなく余暇時間を使った個人活動となります。平日日中は Web エンジニアとして制作会社に勤務しておりますので、返信が遅くなる可能性がございます。ご理解のほどよろしくお願いいたします。

よくあるご質問

テーマの説明に書いてある内容が反映されないのはなぜですか?

まず、HTML 編集 App を使って独自で html を編集しているかどうかをご確認ください。
編集している場合はそれが原因でアップデートが止まっている可能性があります。
アップデートが止まっている場合は、その後の修正や機能追加、新しい Apps の対応などが反映されません。このページに書いてある情報は最新のテーマについての内容になりますので、編集されたテーマをお使いの方は参考にされてもその通りにならない可能性がございます。

「HTML 編集 App」で 1 文字でも変更したテーマは、カスタムテーマとなり、公式テーマとは別テーマ扱いになります。公式テーマは各所の修正やアップデートが自動的に反映されますが、カスタムテーマはカスタムした時点のバージョンのままで固定されます。たまに「テーマの説明に新しい Apps に対応したと書いてあるのに反映されない」といったお声をいただきますが、ほぼほぼのショップ様が「HTML 編集 App」でカスタマイズされているのが原因となっています。
尚、カスタムテーマの個別対応はできません。
不具合についてお問い合わせいただいても公式テーマについては対応しますが、カスタムテーマの対応はお断りいたしますのでご理解のほどよろしくお願いいたします。

BASE負担クーポン1万円分の特典!
開設支援特典申請フォームについて
特徴デモサイトページ構成使い方基本設定 - ロゴ基本設定 - 背景全体設定ヘッダー設定メニュー設定検索フォーム周辺設定フッター設定HOME設定【TOPページ】メインビジュアル【TOPページ】メッセージエリア【TOPページ】バナーエリア【TOPページ】セール商品一覧エリア【TOPページ】カテゴリ商品一覧エリア【TOPページ】カテゴリ一覧【TOPページ】ピックアップエリア【TOPページ】マーキーエリア【TOPページ】特集エリア【TOPページ】YouTube 背景動画エリア【TOPページ】ブログ一覧エリア【TOPページ】並び順【TOPページ】Instagram 埋め込みエリアABOUT設定【ABOUTページ】アクセス掲載エリア【ABOUTページ】ショップガイド掲載エリア【ABOUTページ】お支払い方法について【ABOUTページ】FAQエリア商品ページ設定下層ページ各種メイン画像CONTACTページプライバシーポリシーページ特定商取引法に基づく表記ページ商品検索結果ページ(商品検索App)カテゴリページ(カテゴリ管理App)ブログ一覧/ブログ記事ページ(BLOG App)コミュニティページ(コミュニティApp)メンバーシップページ(メンバーシップApp)アニメーション上級者向け設定対応するBASE Appsについてご質問・ご要望についてよくあるご質問 その他のBASEテンプレート ページトップ