Raptor オンラインマニュアル | 多角的な導線を美しく魅せるBASEテーマ

フォント / カラー

1-1【フォント / カラー】フォントサイズ

ショップ全体のフォントサイズを『小（標準）』『中』『大』『極小』『極大』から選択することができます。
（一部のフォントサイズはテーマデザインで固定されているため変更できない部分があります。）
初期状態では『小（標準）』になっています。

明朝体フォント ON/OFF

フォントを『ゴシック体』と『明朝体』から選択することができます。
OFFの状態では『ゴシック体』、ONの状態では『明朝体』で表示されます。
初期状態ではOFF（ゴシック体）になっています。

メインエリア背景色

メインエリアの背景色を変更することができます。
初期値は「 #ffffff 」になっています。

* ショップ全体の背景色について
デザイン画面の「背景」でショップ全体の背景色を設定することができます。
「メインエリア背景色」と同じ色を設定することで統一感のある配色にすることができます。

メインエリアテキストカラー

商品説明等の通常のテキストの色を変更することができます。
（一部のテキスト色はテーマデザインで固定されているため変更できない部分があります。）
初期値は「 #333333 」になっています。

メインエリアサブテキストカラー

注釈等のサブテキストの色を変更することができます。
初期値は「 #999999 」になっています。

フッター背景色

フッターの背景色を変更することができます。
初期値は「 #fafafa 」になっています。

フッターテキストカラー

フッターのテキストカラーを変更することができます。
初期値は「 #333333 」になっています。

リンクカラー

リンクテキスト色を変更することができます。
初期値は「 #01579b 」になっています。

ボタン背景色

ボタンの背景色を変更することができます。
初期値は「 #ffffff 」になっています。

ボタン枠線カラー

ボタンの枠線の色を変更することができます。
初期値は「 #dddddd 」になっています。

ボタンテキストカラー

ボタンのテキストの色を変更することができます。
初期値は「 #333333 」になっています。

購入ボタンカラー

商品ページの「カートに入れる」ボタンの色を変更することができます。
初期値は「 #1E90FF 」になっています。

セール価格 / SOLD OUT カラー

セール価格やSOLD OUTの色を変更することができます。
初期値は「 #E50F0D 」になっています。

アイテム設定

商品一覧や商品（アイテム）の表示に関する設定を行うことができます。

1-2【アイテム設定】トップページに商品一覧を表示 ON/OFF

ONにするとトップページに商品一覧が表示されます。
OFFにするとトップページの商品一覧は非表示になります。
初期状態ではONになっています。

商品に1行の「商品説明」を表示 ON/OFF

ONにすると商品画像の下に1行の「商品説明」が表示されます。
初期状態ではONになっています。

商品一覧の画像を正方形に切り抜く ON/OFF

トップページやカテゴリページの商品一覧の商品画像を正方形に切り抜いて表示することができます。
ONにすると画像サイズが商品ごとに異なる場合でも統一感のある商品一覧にすることができます。
商品一覧の各商品画像の元の縦横比率を維持したい場合にはOFFにしてご利用ください。
初期状態ではOFFになっています。

商品ページの商品画像を正方形にする場合には、「4-1【商品ページ】商品ページの商品画像を正方形に切り抜く」にて設定を行ってください。

在庫表示（残りわずか）

指定した在庫数を下回った場合、トップページと商品ページの商品に在庫僅少のラベルを表示することができます。
「残りわずか」のように在庫が少ないことを示唆するだけでなく、
「残り {x} 点」のように設定することで、具体的な在庫数を表示することもできます。

1-3【在庫表示】「残りわずか」を表示 ON/OFF

ONにすると指定した在庫数を下回った商品に在庫僅少ラベルを表示することができます。初期状態ではOFFになっています。

「残りわずか」と表示される在庫数

ここで設定した数よりも商品の在庫が少ない場合に「残りわずか」が表示されます。
1以上の整数を設定してください。
初期値は「 5 」になっています。

「残りわずか」の表記テキスト

「残りわずか」表示の表記テキストを設定することができます。
{x} というテキストを入れると、自動的にその商品の在庫数に置き換わります。

残り {x} 個

具体的な在庫数を表示したくない場合には「残りわずか」のようなテキストを設定してください。

残りわずか

初期値は「残り {x} 個」になっています。

お気に入り機能

ユーザーが商品を「お気に入り」に登録することができます。
お気に入りアイテムはその端末のみで最大24件保存されます。
上部メニューのをクリックすることでお気に入りリストが表示されます。
トップページ下部にリストを表示することも可能です。

ヘッダーのアイコンからお気に入りリストを表示

商品ページでお気に入り登録可能

1-4【お気に入り機能】ON/OFF

ONにするとユーザーが「お気に入り」を登録したり表示することができます。
初期状態ではONになっています。

タイトル

お気に入りのタイトルを変更することができます。初期値は「お気に入り」になっています。

TIPS （設定のヒント）

（任意）タイトルに設定するテキストの一部を ～ で囲むと、トップページの見出しではその部分がサブタイトルとして小さめのグレー文字で表示されます。（ナビゲーションメニューなど見出し以外の表示箇所では ～ で囲んだテキストは非表示になります。）

タイトル<small>SUBTITLE</small>

商品一覧にハートボタンを表示 ON/OFF

ONにすると、商品ページだけでなく、トップページの商品一覧の各アイテムにもお気に入り登録ボタンが表示されます。
OFFにすると、商品ページだけにお気に入り登録ボタンが表示されます。
商品一覧をすっきりと見せたい場合にはOFFにしてご利用ください。
初期状態ではONになっています。
（ON/OFFどちらの場合も、お気に入りリストを開くための上部メニューののアイコンはすべてのページで表示されます。）

トップページ下部にお気に入りリストを表示 ON/OFF

ONにすると、トップページ下部にお気に入りリストを表示することができます。
初期状態ではOFFになっています。

未登録ハート色

お気に入り未登録時のハートの色を変更することができます。
初期値は「 #c0c0c0 」になっています。

登録済ハート色

お気に入り登録済時のハートの色を変更することができます。
初期値は「 #d32f2f 」になっています。

メニュー設定

1-5【メニュー設定】Homeのタイトル

ナビゲーションのHomeへのリンクテキストを変更することができます。
初期値は「 HOME」になっています。

Categoryのタイトル（カテゴリ管理 Apps）

カテゴリのタイトルを変更することができます。
初期値は「 CATEGORY」になっています。

Informationのタイトル

インフォメーションのタイトルを変更することができます。
初期値は「 SHOP INFO 」になっています。

Linkのタイトル

外部リンクのタイトルを変更することができます。
初期値は「 LINK 」になっています。

Aboutのタイトル

ナビゲーションのAboutへのリンクテキストを変更することができます。
初期値は「 ABOUT 」になっています。

Blogのタイトル

ナビゲーションのBlogへのリンクテキストを変更することができます。
初期値は「 BLOG 」になっています。

Contactのタイトル

ナビゲーションのContactへのリンクテキストを変更することができます。
初期値は「 CONTACT 」になっています。

トップページ商品一覧のタイトル

商品一覧のタイトルを変更することができます。
初期値は「 NEW ARRIVAL 」になっています。

外部リンク 1 テキスト

外部リンク1のタイトルを設定することができます。

URL

外部リンク1のURLを設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください。

外部リンク 2 テキスト

外部リンク2のタイトルを設定することができます。

URL

外部リンク2のURLを設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください。

外部リンク 3 テキスト

外部リンク3のタイトルを設定することができます。

URL

外部リンク3のURLを設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください。

検索ボックスのプレースホルダー

検索ボックスに薄く表示されている初期テキストの内容を「Search」や「アイテム検索」などに変更することができます。
初期値は「キーワードから探す」になっています。

トップページ商品一覧のタイトル

トップページの商品一覧タイトルを変更することができます。
初期値は「 NEW ARRIVAL 」になっています。

商品一覧の「More」ボタンのタイトル

トップページの商品一覧の追加読み込みボタンのテキストを変更することができます。
初期値は「 MORE 」になっています。

PCヘッダーにSNSアイコンを表示 ON/OFF

ONにすると、PC閲覧時のヘッダーにSNSアイコンを表示することができます。
OFFにすると、SNSアイコンはフッターのみに表示されます。
初期状態ではONになっています。
ヘッダーに表示されるSNSアイコンが多いと2段になってしまうため、
アイコンの数が多い場合にはOFF（SNSアイコンをフッターのみに表示）にしてご利用ください。

追加メニュー

【お買い物ガイド】【FAQ】のような自由な内容の「追加メニュー」を2つまで表示することができます。

1-6【追加メニュー】1 テキスト

追加メニュー 1 のタイトルを設定することができます。
タイトルが長く複数行になるとレイアウトが崩れる場合がありますので、1行に収まる短いメニュー名を設定してください。

URL

追加メニュー 1 のURLを設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください。

「追加メニュー 2」も同様の設定方法となっています。

カテゴリーアイコン

カテゴリー名の横に画像アイコンを表示することが可能です。
アイコンは最大20カテゴリーまで表示できます。

1-7【カテゴリーアイコン】カテゴリー名の左にアイコンを表示 ON/OFF

カテゴリー名の横に画像アイコンを表示することが可能です。
アイコンは最大20カテゴリーまで表示できます。
初期状態ではOFFになっています。

アイコンを丸く切り抜く ON/OFF

ONにするとアイコン画像が自動的に丸く切り抜かれて表示されます。
初期状態ではOFFになっています。

アイコン画像

カテゴリーアイコンの画像を設定することができます。

アイコン画像は1枚にまとめる必要があります。
画像の推奨サイズや作成方法については下記「カテゴリーアイコン画像の作成方法」をご確認ください。

⇒ カテゴリーアイコン画像の作成方法

カテゴリーアイコンの仕様

カテゴリーアイコンは1枚の画像をCSSでずらしながら表示させることで、
それぞれのカテゴリーに応じた画像を最大20カテゴリーまで表示させることができます。

カテゴリーアイコンの画像は「必要なカテゴリー数のアイコン画像を1枚にまとめる」必要があります。

カテゴリーアイコン画像の推奨サイズ

カテゴリーアイコン画像の推奨サイズは「横80px * 縦80px のアイコンをカテゴリーの数だけ縦に並べたサイズ」です。

カテゴリー数が5個の場合には「横80px * 縦400px 」となり、カテゴリー数が20個の場合には「横80px * 縦1600px 」となります。

（カテゴリー数が5個の場合に「横80px * 縦1600px 」など大きめの画像を指定していただいても問題ありませんが、
表示されるアイコンはカテゴリー数に応じたものになりますので、下の方に配置されたアイコンは表示されない結果となります。）

【具体例 1】

下記の例では大カテゴリーが8個あるため「横80px * 縦640px 」の画像を設定しています。

（実際に設定している画像はこちら）

【具体例 2】

下記の例ではでは大カテゴリーが13個あるため「横80px * 縦1040px 」の画像を設定しています。

（実際に設定している画像はこちら）

【具体例 3】

下記の例では「横80px * 縦1600px 」の画像を設定していますが、大カテゴリーが6個しかないためアイコンは6個分のみ表示されます。

（実際に設定している画像はこちら）

カテゴリーアイコン画像の作成方法

・各カテゴリー用の画像を作成してから1枚にまとめる方法

1. 各カテゴリー用のアイコン画像を「横80px × 縦80px 」のサイズで作成します。
2. こちらのサイト(IMAGE ONLINE.CO) などのオンラインサービスを利用して1枚の画像にまとめます。
3. 1枚にまとめた画像を「アイコン画像」として設定します。

・Photoshopを利用して作成する方法

テンプレートファイルを無償配布しております。
下記よりダウンロードしてご自由にご利用ください。
PSDファイルをダウンロード

カテゴリーアイコン画像の作成についてはサポート対象外となります。
個別のお問い合わせに対しての作成方法のご案内等は致しかねますことを予めご了承ください。

〇〇から選ぶメニュー

カテゴリーとは別途、【価格から選ぶ】【ブランドから探す】等の自由なメニューを2つ（各6項目）まで設定することが可能です。
多角的な導線を設定することでお客様が商品を探しやすくなり、ショップの回遊性も向上させることができます。
（「検索 App」のインストールが必要です。）

1-8.【〇〇から選ぶメニュー ①】 ON/OFF

「〇〇から選ぶメニュー ①」の表示ON/OFFを切り替えることができます。
初期状態ではOFFになっています。

メニュー① タイトル

「〇〇から選ぶメニュー ①」のタイトルを設定することができます。
例：【価格帯から選ぶ】【ブランドから探す】

メニュー① - 1 テキスト

「〇〇から選ぶメニュー ①」の1つ目の項目のテキストを設定することができます。
リンク先はこのテキストで検索した場合の検索結果ページが自動的に設定されます。
例：【お中元・お歳暮】【1,000～2,999円】

メニュー① - 2 テキスト

「〇〇から選ぶメニュー ①」の2つ目の項目のテキストを設定することができます。

メニュー① - 3 テキスト

「〇〇から選ぶメニュー ①」の3つ目の項目のテキストを設定することができます。

メニュー① - 4 テキスト

「〇〇から選ぶメニュー ①」の4つ目の項目のテキストを設定することができます。

メニュー① - 5 テキスト

「〇〇から選ぶメニュー ①」の5つ目の項目のテキストを設定することができます。

メニュー① - 6 テキスト

「〇〇から選ぶメニュー ①」の6つ目の項目のテキストを設定することができます。

【〇〇から選ぶメニュー ②】 ON/OFF

「〇〇から選ぶメニュー ②」の表示ON/OFFを切り替えることができます。
初期状態ではOFFになっています。

メニュー② タイトル

「〇〇から選ぶメニュー ②」のタイトルを設定することができます。
例：【価格帯から選ぶ】【ブランドから探す】

メニュー② - 1 テキスト

「〇〇から選ぶメニュー ②」の1つ目の項目のテキストを設定することができます。
リンク先はこのテキストで検索した場合の検索結果ページが自動的に設定されます。
例：【お中元・お歳暮】【1,000～2,999円】

メニュー② - 2 テキスト

「〇〇から選ぶメニュー ②」の2つ目の項目のテキストを設定することができます。

メニュー② - 3 テキスト

「〇〇から選ぶメニュー ②」の3つ目の項目のテキストを設定することができます。

メニュー② - 4 テキスト

「〇〇から選ぶメニュー ②」の4つ目の項目のテキストを設定することができます。

メニュー② - 5 テキスト

「〇〇から選ぶメニュー ②」の5つ目の項目のテキストを設定することができます。

メニュー② - 6 テキスト

「〇〇から選ぶメニュー ②」の6つ目の項目のテキストを設定することができます。

【ご注意点】

「〇〇から選ぶメニュー」を利用するためには検索 Appのインストールが必要です。
リンク先は検索結果ページになります。
設定するテキスト（キーワード）を事前に商品のタイトルや説明文章に入れておく必要があります。

例えば『価格帯から選ぶ』というメニューの中に『10,000 ～ 19,999円』という項目を設定した場合にも、
10,000 ～ 19,999円の価格の商品が自動的に表示されるわけではありません。
『10,000 ～ 19,999円』の検索結果としてその商品を表示させるために、
事前に商品の説明文章内に「10,000 ～ 19,999円」というテキストを入れておく必要があります。

具体例として、下記デモショップの商品ページでは「# 10,000 ～ 19,999円」「# リビング」というキーワードを商品説明に入れています。
https://raptor1.base.ec/items/133976662

送料表示

フッター/アバウトページに送料を表示することができます。
送料のテキスト内容やカラーを自由に設定することが可能です。

1-9【送料表示】 ON/OFF

送料表示のON/OFFを切り替えることができます。
初期状態ではOFFになっています。

送料カラー

送料のテキストカラーを変更することができます。
初期値は「 #D50000」になっています。

条件テキスト

条件テキストを設定することができます。
例:「5,000円以上のご購入で」

送料テキスト

送料テキストを設定することができます。
例:「全国送料無料」

補足テキスト

補足テキストを設定することができます。
例:「＊沖縄・離島は除きます」

詳細説明テキスト

送料の下に掲載する詳細説明テキストを設定することができます。
「詳細説明テキスト」はABOUTページの「送料について」ブロックにのみ表示されます。
例:「通常商品は宅配便にてお届けいたします。送料は一律800円(北海道・沖縄を除く／北海道:1,500円、沖縄・離島:2,000円)です。」

お支払い方法の表示設定

フッターやアバウトページにお支払い方法（利用可能な決済方法）を表示できます。
表示する決済方法のON/OFFを手動で切り替えてください。
（BASEかんたん決済の設定内容は自動的に反映されません。）

フッター

アバウトページ

1-10【お支払い方法の表示】表示 ON/OFF

お支払い方法の表示ON/OFFを切り替えることができます。
初期状態ではONになっています。

Pay ID 翌月あと払い

利用可能な決済方法として「Pay ID 翌月あと払い」を表示する場合にはONにしてください。
（BASEかんたん決済の設定内容は自動的に反映されません。）

Pay ID 3回あと払い

利用可能な決済方法として「Pay ID 3回あと払い」を表示する場合にはONにしてください。
（BASEかんたん決済の設定内容は自動的に反映されません。）

クレジットカード

利用可能な決済方法として「クレジットカード」を表示する場合にはONにしてください。
（BASEかんたん決済の設定内容は自動的に反映されません。）

キャリア決済

利用可能な決済方法として「キャリア決済」を表示する場合にはONにしてください。
（BASEかんたん決済の設定内容は自動的に反映されません。）

銀行振込

利用可能な決済方法として「銀行振込」を表示する場合にはONにしてください。
（BASEかんたん決済の設定内容は自動的に反映されません。）

コンビニ決済

利用可能な決済方法として「コンビニ決済」を表示する場合にはONにしてください。
（BASEかんたん決済の設定内容は自動的に反映されません。）

Amazon Pay

利用可能な決済方法として「Amazon Pay」を表示する場合にはONにしてください。
（BASEかんたん決済の設定内容は自動的に反映されません。）

PayPal

利用可能な決済方法として「PayPal」を表示する場合にはONにしてください。
（BASEかんたん決済の設定内容は自動的に反映されません。）

PayPay

利用可能な決済方法として「PayPay」を表示する場合にはONにしてください。
（BASEかんたん決済の設定内容は自動的に反映されません。）

メインビジュアル

ドラッグ操作/スワイプ操作対応の機能的なレスポンシブスライダーです。
画像はPC用とスマホ用を各6枚まで設定可能で、商品ページ / カテゴリページ / 検索結果 / 外部サイトなど自由なリンク先を設定することができます。左右のスライドをチラ見せして画面幅いっぱいに広がるワイド表示にすることも可能です。
（スライダー機能を利用せず画像1枚のみをメインビジュアルとして設定することもできます。）

2-1【メインビジュアル】 ON/OFF

メインビジュアルの表示ON/OFFを切り替えることができます。
初期状態ではONになっています。

ワイド表示 ON/OFF

ONにすると、左右のスライドをチラ見せして画面幅いっぱいに広がる状態になります。
OFFにすると、メインビジュアルはメインコンテンツと同じ横幅に配置されます。
（ワイド表示をONにする場合は4枚以上の画像を設定することを推奨します。また、すべての画像は同じサイズにすることを推奨します。）
初期状態ではOFFになっています。

メインビジュアル 1 画像（PC）

メインビジュアルの1枚目の画像（PC用）をアップロードする事ができます。

画像（スマホ）

メインビジュアルの1枚目の画像（スマホ用）をアップロードする事ができます。
（PC用の画像と同じ画像を指定しても問題ありません。）

URL

メインビジュアルの1枚目のリンク先を設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください。

メインビジュアル 2 画像（PC）

メインビジュアルの2枚目の画像（PC用）をアップロードする事ができます。
（2枚目以降の画像がアップロードされていない場合にはスライダー機能がOFFとなり1枚目の画像のみがメインビジュアルとして表示されます。）

画像（スマホ）

メインビジュアルの2枚目の画像（スマホ用）をアップロードする事ができます。
（PC用の画像と同じ画像を指定しても問題ありません。）

URL

メインビジュアルの2枚目のリンク先を設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください。

「メインビジュアル 3」～「メインビジュアル 6」も同様の設定方法となっています。

【画像の推奨サイズ】

メインビジュアルをワイド表示にする場合（ワイド表示ON）

「PC用」の推奨サイズは「 横 800px 」です。
縦の高さはお好みのサイズで構いません。
ご参考までに、デモショップでは「横1600px / 縦1000px 」の画像を使用しています。

「スマホ用」の推奨サイズは「 横 800px 」です。
縦の高さはお好みのサイズで構いません。
ご参考までに、デモショップでは「横 800px / 縦 500px 」の画像を使用しています。

メインビジュアルを通常の表示形式する場合（ワイド表示OFF）

「PC用」のスライド画像の推奨サイズは「 横1200px 」です。
縦の高さはお好みのサイズで構いません。

「スマホ用」のスライド画像の推奨サイズは「 横800px 」です。
縦の高さはお好みのサイズで構いません。

イメージスライダー

ドラッグ操作/スワイプ操作対応の機能的なレスポンシブスライダーです。
ループ表示型のスライダーを設置することができます。
画像は6枚まで設定可能で、自由なリンク先を設定することができます。

2-2【イメージスライダー】 ON/OFF

イメージスライダーの表示ON/OFFを切り替えることができます。
初期状態ではOFFになっています。
（イメージスライダーをONにする場合は「スライド 1 画像」～「スライド 6 画像」の6枚すべての画像を設定することを推奨します。
また、すべての画像は同じサイズにすることを推奨します。）

スライド 1 画像

【イメージスライダー】の1枚目の画像をアップロードする事ができます。

URL

【イメージスライダー】の1枚目のリンク先を設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください。

スライド 2 画像

【イメージスライダー】の2枚目の画像をアップロードする事ができます。

URL

【イメージスライダー】の2枚目のリンク先を設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください。

「スライド 3」～「スライド 6」も同様の設定方法となっています。

【画像の推奨サイズ】

「イメージスライダー」の画像の推奨サイズは「 横 800px 」です。
ご参考までに、デモショップでは「横1280px / 縦720px 」の画像を使用しています。

カウントダウンタイマー

日時を指定してカウントダウンタイマーを表示することができます。

2-3【カウントダウンタイマー】 ON/OFF

カウントダウンタイマーのON/OFFを切り替えることができます。
初期状態ではOFFになっています。

テキストカラー

カウントダウンタイマーのテキスト色を選択することができます。
初期値は「 #333333 」になっています。

背景色

カウントダウンタイマーの背景色を選択することができます。
初期値は「 #f5f5f5 」になっています。

カウント日時

カウントダウンの完了日時を設定することができます。
yyyy/mm/dd/hh:mm の形式で記述してください。

2026/01/01/00:00

カウントダウン中テキスト

カウントダウン中に表示する内容をテキストで入力することができます。
例1:「セール終了まで」
例2:「新商品の発売まで」

カウントダウン後テキスト

カウントダウン終了後に表示する内容をテキストで入力することができます。
例1:「セールは終了いたしました」
例2:「新商品発売開始!!」

リンクテキスト

リンクテキストを入力することができます。

URL

リンク先URLを設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください

トップページカテゴリー

トップページのコンテンツとしてカテゴリーの一覧を表示することができます。
*「カテゴリ管理 App」のインストールが必要です。

2-4【トップページカテゴリー】 ON/OFF

トップページカテゴリーのON/OFFを切り替えることができます。
初期状態ではOFFになっています。

重要なお知らせ

トップページに重要なお知らせを表示することができます。

2-5【重要なお知らせ】 ON/OFF

重要なお知らせ表示のON/OFFを切り替えることができます。
初期状態ではOFFになっています。

テキストカラー

お知らせのテキスト色を選択することができます。
初期値は「 #FFFFFF 」になっています。

背景色

お知らせの背景色を選択することができます。
初期値は「 #111111 」になっています。

テキスト

お知らせの内容をテキストで入力することができます。

URL

（任意）お知らせのリンク先URLを設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください

トップページバナー

トップページにバナーを2枚まで表示することができます。
自由なリンク先を設定可能で、リンクを設定せずに告知エリアとしても利用することも可能です。
トップページバナーを2枚設定した場合、PCでは横に並び、スマホでは縦に並びます。

2-6【トップページバナー】 ① 画像

トップページバナー ① の画像をアップロードする事ができます。
トップページバナーの画像の推奨サイズは「 横1440px 」です。縦の高さはお好みのサイズで構いません。
ご参考までに、デモショップでは「横1440px / 縦648px 」の画像を使用しています。

URL

（任意）トップページバナー ① のリンク先を設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください。

【トップページバナー】 ② 画像

トップページバナー ② の画像をアップロードする事ができます。
トップページバナーの画像の推奨サイズは「 横1440px 」です。縦の高さはお好みのサイズで構いません。
ご参考までに、デモショップでは「横1440px / 縦648px 」の画像を使用しています。

URL

（任意）トップページバナー ① のリンク先を設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください。

ピックアップ

ピックアップアイテムを6件まで表示することができます。
画像/テキスト/リンクを自由に設定可能で、リンクを設定せずに告知エリアとしても利用可能です。
レイアウトはピックアップの件数に応じて自動的に調整されます。

2-7【ピックアップ】 ON/OFF

「ピックアップ」の表示のON/OFFを切り替えることができます。
初期状態ではOFFになっています。

ピックアップタイトル

任意のタイトルに変更することが可能です。

TIPS （設定のヒント）

（任意）タイトルに設定するテキストの一部を ～ で囲むと、トップページの見出しではその部分がサブタイトルとして小さめのグレー文字で表示されます。（ナビゲーションメニューなど見出し以外の表示箇所では ～ で囲んだテキストは非表示になります。）

タイトル<small>SUBTITLE</small>

ピックアップ 1 画像

1件目のピックアップアイテムの画像をアップロードすることができます。
画像の表示サイズは画面サイズに応じて自動的に調整されます。
推奨サイズは「 横800px 」です。縦の高さはお好みのサイズで構いません。
デザインの仕様上、全ての画像サイズを合わせることをお勧めします。
ご参考までに、デモショップでは「横800px / 縦400px 」の画像を使用しています。

テキスト

（任意）1件目のピックアップアイテムの内容をテキストで入力することができます。

URL

（任意）1件目のピックアップアイテムのURLを設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください。

「ピックアップ2」～「ピックアップ6」も同様の設定方法となっています。

コンセプトの表示のON/OFFを切り替えることができます。
初期状態ではOFFになっています。

タイトル

任意のタイトルに変更することが可能です。

テキストカラー

「おすすめアイテム」のテキスト色を選択することができます。
初期値は「 #333333 」になっています。

背景色

「おすすめアイテム」の背景色を選択することができます。
初期値は「 #fafafa 」になっています。

背景画像

コンセプトの背景画像をアップロードする事ができます。
コンセプトの背景画像の推奨サイズは「 横2200px / 縦1000px 」です。
背景画像は画面サイズに応じて切り抜かれて表示されますので、見切れて欲しくない要素は中央寄りに配置してください。
ご参考までに、デモショップでは「横2200px / 縦1000px 」の画像を使用しています。

テキスト

コンセプトのテキストを設定することができます。

URL

コンセプトのリンク先を設定することができます。
URLが設定されている場合、自動的にリンクボタンが表示されます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください。

ボタンテキスト

コンセプトのボタンテキストを設定することができます。
初期値は「 VIEW 」になっています。

ピックアップカテゴリー

トップページに任意のカテゴリー（5カテゴリーまで）をスライダー形式で表示することができます。
タブでカテゴリーを切り替えることが可能で、1カテゴリーにつき最大24アイテムが表示されます。
各カテゴリページへのリンクボタンも表示されます。

2-10【ピックアップカテゴリー】 ON/OFF

ピックアップカテゴリーのON/OFFを切り替えることができます。
初期状態ではOFFになっています。

ボタンテキスト

カテゴリーページ（一覧）へのボタンのテキストを変更することが可能です。
初期値は「 VIEW ALL 」になっています。

ピックアップカテゴリー ① カテゴリID

表示するカテゴリーを設定することができます。
下記の例のようにカテゴリIDを数字のみで入力してください。
カテゴリIDの確認方法はこちら

タイトル

任意のタイトルに変更することが可能です。

TIPS （設定のヒント）

（任意）タイトルに設定するテキストの一部を ～ で囲むと、トップページの見出しではその部分がサブタイトルとして小さめのグレー文字で表示されます。（ナビゲーションメニューなど見出し以外の表示箇所では ～ で囲んだテキストは非表示になります。）

タイトル<small>SUBTITLE</small>

「ピックアップカテゴリー ②」～「ピックアップカテゴリー ⑤ 」も同様の設定方法となっています。

キーワードリスト

「検索結果ページへのリンク付きのキーワード」を50件まで表示可能です。
ハッシュタグのようにキーワードやカテゴリー等を表示することができます。

2-11【キーワードリスト】 ON/OFF

キーワードリストのON/OFFを切り替えることができます。
初期状態ではOFFになっています。

タイトル

キーワードリストのタイトルを変更することが可能です。
初期値は「人気のキーワード」になっています。

TIPS （設定のヒント）

（任意）タイトルに設定するテキストの一部を ～ で囲むと、トップページの見出しではその部分がサブタイトルとして小さめのグレー文字で表示されます。（ナビゲーションメニューなど見出し以外の表示箇所では ～ で囲んだテキストは非表示になります。）

タイトル<small>SUBTITLE</small>

キーワード

表示するキーワードを50件まで設定することができます。
全てのキーワードをカンマ区切りで1行にしてください。
カンマ「 , 」は半角です。
半角ドット「 . 」や全角句読点「、」などにならないようご注意ください。

【具体例】

下記のようなキーワードリストを表示したい場合

「キーワード（カンマ区切り）」には下記のような文字列を設定してください。

セール,新作,ソファ,ベッド,ラグ,クッション,ホワイト家具,モノトーン,シンプル,おしゃれ

テキスト入力欄は下記のような形になります。

最近チェックした商品

トップページと商品ページに「最近チェックした商品（閲覧履歴）」を表示することができます。
閲覧履歴はトップページではPCで4件、スマホで3件が表示されます。
商品ページではPC/スマホ共に3件が自動的に取得されて表示されます。

2-12【最近チェックした商品】 ON/OFF

「最近チェックした商品」のON/OFFを切り替えることができます。
初期状態ではONになっています。

タイトル

「Recently Viewed」や「閲覧履歴」などの任意のタイトルに変更することができます。
初期値は「最近チェックした商品」になっています。

TIPS （設定のヒント）

（任意）タイトルに設定するテキストの一部を ～ で囲むと、トップページの見出しではその部分がサブタイトルとして小さめのグレー文字で表示されます。（ナビゲーションメニューなど見出し以外の表示箇所では ～ で囲んだテキストは非表示になります。）

タイトル<small>SUBTITLE</small>

2-14【ブログ最新記事】 ON/OFF

トップページのブログ最新記事の表示ON/OFFを切り替えることができます。
初期状態ではOFFになっています。

ブログAppsについてはサポート対象外となります。
Appsのインストール方法や設定方法についてはBASEへ直接お問い合わせください。

トップページフリースペース

自由な内容のタイトル、テキスト、画像、リンク先を設定することができます。
通常のテキストの他にも、Instagramを埋め込む “SnapWidget” のような外部サービスのコードや、
Googleカレンダーの埋め込みコードも設定可能です。

2-15【トップページフリースペース】 ON/OFF

フリースペースのON/OFFを切り替えることができます。
初期状態ではOFFになっています。

タイトル

フリースペースのタイトルを設定することができます。

TIPS （設定のヒント）

（任意）タイトルに設定するテキストの一部を ～ で囲むと、トップページの見出しではその部分がサブタイトルとして小さめのグレー文字で表示されます。（ナビゲーションメニューなど見出し以外の表示箇所では ～ で囲んだテキストは非表示になります。）

タイトル<small>SUBTITLE</small>

フリースペーステキスト/コード 1

フリースペースの文章やHTMLコード（埋め込みコード）を設定することができます。
1つのテキストエリアは最大1000文字までの制限があるため、埋め込みコードが長い場合には分割して入力してください。

フリースペーステキスト/コード 2

フリースペースの文章やHTMLコード（埋め込みコード）を設定することができます。
1つのテキストエリアは最大1000文字までの制限があるため、埋め込みコードが長い場合には分割して入力してください。

フリースペース画像

フリースペースに表示する画像を設定することができます。
推奨サイズは「 横1200px 」です。縦の高さはお好みのサイズで構いません。
ご参考までに、デモショップでは「横2400px / 縦750px 」の画像を使用しています

フリースペース画像リンク先

フリースペース画像のリンク先を設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください。

「フリースペーステキスト/コード」にはHTMLコード（埋め込みコード）を記述していただくことが可能です。
但し、HTMLについてはサポート対象外となっておりますので、
HTMLの記述方法や記述内容のご案内等は致しかねますことを予めご了承ください。
また、閉じタグの漏れや記述内容の誤りによってショップ全体の表示に影響が出る場合がありますので、
HTMLコードを記述される場合には十分に注意して設定を行ってください。

YouTube

トップページにYouTubeの動画を埋め込み表示することができます。

2-16【 YouTube 】 ON/OFF

YouTube埋め込み動画の表示ON/OFFを切り替えることができます。
初期状態ではOFFになっています。

タイトル

（任意）YouTubeのタイトルを設定することができます。

埋め込みコード

YouTube動画の埋め込みコードを入力することで、自動的に動画が埋め込み表示されます。

⇒ YouTube動画埋め込みコードの取得方法はこちら

1. 埋め込みたいYouTube動画のページを表示します。
2. 動画の右下にある『共有』をクリックします。
3. 「埋め込む」をクリックします。
4. 「コピー」をクリックして埋め込みコードをコピーします。
5. BASEのデザイン画面の「YouTube 埋め込みコード」のテキストエリアにペーストします。

フローティングバナー

トップページの固定位置に追従するフローティングバナーを設置することができます。
フローティングバナーは「毎回表示」と「閉じられた後は10分後に再度表示」が選択可能です。

2-17【フローティングバナー】 ON/OFF

フローティングバナーの表示ON/OFFを切り替えることができます。
初期状態ではOFFになっています。

バナーが閉じられた後は10分間再表示しない ON/OFF

商品ページなどからトップページに戻る度に毎回バナーが表示されると煩雑に感じる場合があります。
ONにすることで一度フローティングバナーが閉じられた後は10分間再表示されなくなります。
10分間再表示されないのは「その端末から再度アクセスした場合のみ」となります。
別の端末やお客様がショップにアクセスした場合には通常通り表示されますのでご安心ください。
初期状態ではOFF（トップページを開くたびに毎回表示）になっています。

バナー画像

フローティングバナーの画像をアップロードする事ができます。

URL

フローティングバナーのリンク先を設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください。

【画像の推奨サイズ】

フローティングバナーは最大で横280pxで表示されますが、Retinaディスプレイを考慮して大きめの画像をご利用いただくことを推奨します。

『フローティングバナー』の推奨サイズは「 横560px 」です。縦の高さはお好みのサイズで構いません。
ご参考までに、デモショップでは「横790px / 縦340px 」の画像を使用しています。

トップページレイアウト

トップページ各パーツの並び順を変更することができます。
表示しない機能は並び順を設定しなくても問題ありません。
「 1 」の値を設定した項目が一番上に表示され、「 14 」の値を設定した項目が一番下に表示されます。
（「メインビジュアル」と「お気に入りリスト」の位置は固定となっています。）

2-18【トップページレイアウト】パーツを並び替える ON/OFF

ONにすることで変更したパーツの並び順を有効にすることができます。
初期状態ではOFFになっています。

表示順: イメージスライダー

「 1 」～「 14 」の値を設定してください。
「 1 にすると最上部に表示され、「 14 」にすると最下部に表示されます。
初期値は「 3 」になっています。

表示順: 重要なお知らせ

「 1 」～「 14 」の値を設定してください。
「 1 にすると最上部に表示され、「 14 」にすると最下部に表示されます。
初期値は「 4 」になっています。

「表示順: カウントダウンタイマー」～「表示順: フリースペース」も同様の設定方法となっています。

ABOUT設定

アバウトページ画像、カスタムショップ情報、送料、お支払い方法を表示できる他、
『FAQ』や『お買い物ガイド』等の自由な内容を掲載できる「フリースペース」機能を搭載しています。

3-1【アバウトページ】アバウトページ画像

アバウトページに掲載する画像をアップロードすることができます。
画像は縦長/横長に関わらずお好みのサイズで構いません。
ご参考までに、デモショップでは「横2490px / 縦1350px 」の画像を使用しています。

住所

ショップの所在地を表示することができます。

TEL

ショップの電話番号を表示することができます。

FAX

ショップのFAX番号を表示することができます。

営業時間

ショップの営業時間を表示することができます。

定休日

ショップの定休日を表示することができます。

E-Mail

ショップのメールアドレスを表示することができます。

アバウトフリースペース

「FAQ」や「お買い物ガイド」などの自由な内容を2つまで掲載することができます。
⇒具体例：デモショップアバウトページ「FAQ」

3-2【アバウトページフリースペース】① ON/OFF

アバウトページフリースペース ① の表示ON/OFFを切り替えることができます。
初期状態ではOFFになっています。

タイトル

アバウトページフリースペース ① のタイトルを設定することができます。

画像

アバウトページフリースペース ① の画像をアップロードすることができます。

テキスト1

アバウトページフリースペース ① のテキストを設定することができます。
1つのテキストエリアは1,000文字までの文字数制限があるため、文章量が多い場合には「アバウトフリースペース ① テキスト2」に続きを記載してください。

テキスト2

（任意）アバウトページフリースペース ① のテキストを設定することができます。

「アバウトページフリースペース ②」も同様の設定方法となっています。

TIPS （設定のヒント）

トップページのバナー等から「アバウトページフリースペース」で設定したコンテンツにリンクを貼りたい場合には、

[ショップURL]/about#[フリースペースタイトル]

というURLでリンクすることができます。
例えば、デモショップの場合であれば

・ショップURLが「 https://raptor1.base.ec/ 」
・フリースペースのタイトルが「 お買い物ガイド 」

であるため、

https://raptor1.base.ec/about#お買い物ガイド

というURLになります。
同様に、デモショップのもうひとつのフリースペースのURLは

https://raptor1.base.ec/about#FAQ

となっています。
上記をご参考にして、ショップURLやフリースペースタイトルを変更してご利用ください。

TIPS （設定のヒント）

「アバウトページフリースペース」等のテキストエリアではHTMLが利用可能です。
「 」と入力すると改行され、「 ～ 」で囲むと段落になり、「 ～ 」で囲むと太字になります。


<p>
<b>【営業時間】</b>
<br>
11:30-15:00（L.O. 14:30）
<br>
18:00-23:00（L.O. 22:00）
</p>

<p>
<b>【定休日】</b>
<br>
日曜日・祝日
<br>
神戸市中央区山本通1-1
</p>

以下のように表示されます。

上記以外の自由なHTMLを記述することも可能です。
但し、HTMLについてはサポート対象外となっておりますので、
HTMLの記述方法や記述内容のご案内等は致しかねますことを予めご了承ください。
また、閉じタグの漏れや記述内容の誤りによってショップ全体の表示に影響が出る場合がありますので、
HTMLを記述される場合には十分に注意して設定を行ってください。

Google マップ

アバウトページにGooleマップを埋め込んで表示することが可能です。
最寄り駅や経路などの補足情報を記載することもできます。

3-3【Google マップ】表示 ON/OFF

Googleマップの表示ON/OFFを切り替えることができます。
初期状態ではOFFになっています。

案内テキスト

最寄り駅、経路、住所、電話番号等の補足情報をテキストで入力することができます。

埋め込みコード

Googleマップの埋め込みコードを入力することで、自動的にトップページに地図が表示されます。

⇒ Googleマップ埋め込みコードの取得方法はこちら

1. Google マップで埋め込みたい地図の場所を表示します。
2. 画面の左上にある『≡』をクリックします。
3. 「地図を共有または埋め込む」をクリックします。
4. 「地図を埋め込む」のタブを選択して「HTMLをコピー」をクリックします。
5. BASEのデザイン画面にある「埋め込みコード」のテキストエリアにHTMLをペーストします。

商品ページ設定

4-1【商品ページ】商品ページの商品画像を正方形に切り抜く ON/OFF

ONにすると商品ページの商品一覧の商品画像を正方形に切り抜いて表示することができます。
クリックした際の拡大画像は元の縦横比率の画像が表示されます。
元の縦横比率を維持したい場合にはOFFにしてご利用ください。
初期状態ではOFFになっています。

スマホ商品ページ下部に購入ボタンを固定表示 ON/OFF

スマホ閲覧時の商品ページ下部に購入ボタンを固定表示することができます。
(ページ内のカートボタンよりも下にスクロールした際に自動的に表示されます。)
初期状態ではONになっています。

「この商品をアプリで見る」ボタンを表示 ON/OFF

スマホ閲覧時、BASEアプリとの連携として、商品ページに「この商品をアプリで見る」ボタンを表示することができます。
初期状態ではONになっています。

商品ページバナー

全ての商品ページに共通したバナーを表示することができます。
バナーには自由なリンク先を設定することができ、リンクを設定せずに告知エリアとしても利用することもできます。

4-2【商品ページバナー】画像

商品ページバナーの画像をアップロードする事ができます。
商品ページバナーの画像の推奨サイズは「 横800px 」です。縦の高さはお好みのサイズで構いません。
ご参考までに、デモショップでは「横800px / 縦400px 」の画像を使用しています。

URL

（任意）商品ページバナーのリンク先を設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください。

商品ページ共通テキスト

【サイズガイド】や【注意事項】など、全ての商品ページで共通して表示させたい内容を一元管理することができます。

4-3【商品ページ共通テキスト】 ON/OFF

全ての商品ページで共通のテキストを表示することができます。
初期状態ではOFFになっています。

テキスト1

「商品ページ共通テキスト」のテキストを設定することができます。
1つのテキストエリアは1,000文字までの文字数制限があるため、文章量が多い場合には「テキスト2」に続きを記載してください。

テキスト2

（任意）「商品ページ共通テキスト」のテキストを設定することができます。

TIPS （設定のヒント）

「商品ページ共通テキスト」等のテキストエリアではHTMLが利用可能です。
「 」と入力すると改行され、「 ～ 」で囲むと段落になり、「 ～ 」で囲むと太字になります。


<p>
<b>【営業時間】</b>
<br>
11:30-15:00（L.O. 14:30）
<br>
18:00-23:00（L.O. 22:00）
</p>

<p>
<b>【定休日】</b>
<br>
日曜日・祝日
<br>
神戸市中央区山本通1-1
</p>

以下のように表示されます。

上記以外の自由なHTMLを記述することも可能です。
但し、HTMLについてはサポート対象外となっておりますので、
HTMLの記述方法や記述内容のご案内等は致しかねますことを予めご了承ください。
また、閉じタグの漏れや記述内容の誤りによってショップ全体の表示に影響が出る場合がありますので、
HTMLを記述される場合には十分に注意して設定を行ってください。

Blog App

5-1【 Blog App 】ブログをメニューに表示 ON/OFF

OFFにすると、メニューにブログ一覧へのリンクが表示されなくなります。
「Blog App」を任意の内容のページを追加する目的のみに利用する場合で、一覧ページを見せたくない場合にはOFFにしてご利用ください。
但し、一覧ページを経由した各記事への導線がなくなりますので、ピックアップやバナー等から各記事へリンクを設定する必要があります。
「Blog App」を通常通りブログとして利用する場合にはONにすることを推奨します。
初期状態ではON（ブログをメニューに表示）になっています。

日付を表示 ON/OFF

OFFにすると、ブログ一覧やブログ記事に日付が表示されなくなります。
「Blog App」で『お買い物ガイド』や『はじめにお読みください』などの常設コンテンツのみを作成する場合には、
日付表示をOFFにすることで掲載情報が古く見えないメリットがあります。
「Blog App」をニュースやブログを掲載する目的で利用する場合にはONにすることを推奨します。
初期状態ではON（日付を表示）になっています。

メンバーシップ App

5-2【メンバーシップ App 】メンバーシップページのタイトル

ナビゲーションのメンバーシップページへのリンクテキストを変更することができます。
初期値は「メンバーシップ」になっています。

マイページ / ログインのタイトル

ナビゲーションのマイページ/ログインへのリンクテキストを変更することができます。
初期値は「マイページ」になっています。

コミュニティ App

5-3【コミュニティApp 】コミュニティカラー

コミュニティAppで表示される「会員限定商品」などの色を変更することができます。
初期値は「 #212121 」になっています。

コミュニティページヘッダー画像

コミュニティページに表示するヘッダー画像をアップロードする事ができます。

コミュニティページタイトル

ナビゲーションのコミュニティページへのリンクテキストを変更することができます。
初期値は「 Community 」になっています。

販売期間設定 App

5-4【販売期間設定 App 】販売期間設定カラー

販売期間設定Appで表示される「COMING SOON」などの色を変更することができます。
初期値は「 #00C7B6 」になっています。

予約販売 App

5-5【予約販売 App 】予約販売カラー

予約販売Appで表示される「予約商品」などの色を変更することができます。
初期値は「 #1e88e5 」になっています。

テイクアウト App

5-6【テイクアウト App 】テイクアウトカラー

テイクアウトAppで表示される「テイクアウト」などの色を変更することができます。
初期値は「 #ff9800 」になっています。

抽選販売 App

5-7【抽選販売 App 】抽選販売カラー

抽選販売Appで表示される「抽選商品」などの色を変更することができます。
初期値は「 #5e35b1 」になっています。

メールマガジン App

5-8【メールマガジン App 】登録フォームタイトル

メールマガジン登録フォームのタイトルを設定することができます。
初期値は「 NEWSLETTER 」になっています。

登録フォームテキスト

(任意)メールマガジン登録フォームのテキストを設定することができます。
例：「ショップからのお得な情報やクーポンなどをお送りします。」

フッターカスタマイズ

フッターを自由にカスタマイズすることができます。
ONにしたパーツが自動的に最適化されたレイアウトで表示されます。

6-1【フッターカスタマイズ】フッターフリースペース ON/OFF

フッターフリースペースの表示ON/OFFを切り替えることができます。
初期状態ではOFFになっています。

タイトル

（任意）フッターフリースペースのタイトルを設定することができます。

テキスト

（任意）フッターフリースペースのテキストを設定することができます。

画像

（任意）フッターフリースペースの画像をアップロードする事ができます。

リンクテキスト

（任意）フッターフリースペースの右下にリンクを設定することができます。

URL

リンクのURLを設定することができます。「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください。

フッターに「ショップ情報」を表示 ON/OFF

フッターの「ショップ情報」の表示ON/OFFを切り替えることができます。
初期状態ではONになっています。

フッターに「カテゴリー」を表示 ON/OFF

フッターの「カテゴリー」の表示ON/OFFを切り替えることができます。
初期状態ではOFFになっています。

フッターに「お支払い方法」を表示 ON/OFF

フッターの「お支払い方法」の表示ON/OFFを切り替えることができます。
初期状態ではONになっています。
表示内容は『 1-10【お支払い方法の表示】』で設定することができます。

フッターに「送料」を表示 ON/OFF

フッターの「送料」の表示ON/OFFを切り替えることができます。
初期状態ではONになっています。
表示内容は『 1-9【送料表示】』で設定することができます。

上級者向けの設定

Ex.【上級者向けの設定】独自CSS

オリジナルのスタイルシートを記述することができます。

p { font-size:14px !important;}

独自スタイルシート(CSS)は知識のある上級者向けの設定です。
CSSについてはサポート対象外となっておりますので、
CSSの記述方法やclass名のご案内等は致しかねますことを予めご了承ください。

独自OGP画像

商品ページ以外のOGP画像をアップロードすることができます。
通常、BASEでは商品ページ以外では「ショップのロゴ画像」が自動的にOGP画像として使用されますが、さらに独自のOGP画像を指定できます。
（商品ページでは従来どおり、商品画像がOGP画像として使用されます。）

OGPの扱われ方はSNS側の仕様よって異なります。
設定した画像はOGP候補となりますが、必ずその画像がOGP画像として反映されることを保障するものではありません。
OGP画像についてはサポート対象外となっておりますことを予めご了承ください。

推奨画像サイズ

Raptorをご利用いただく際の登録する画像の推奨サイズは以下の通りです。
推奨サイズ以外のサイズの画像をご利用いただいても基本的には問題ありませんが、目安としてご参考になさってください。

【ロゴ画像】

お好みのサイズで構いません。
正方形や縦長のロゴの場合、スマホサイトでは表示が小さくなる場合がありますので横長の画像をお勧めします。
ご参考までに、デモショップでは「横240px / 縦120px 」の画像を使用しています。

【カテゴリーアイコン】

推奨サイズは「 横80px * 縦80px のアイコンをカテゴリーの数だけ縦に並べたサイズ 」です。
カテゴリーアイコン画像の作成方法はこちらをご覧ください。

【メインビジュアル】

・メインビジュアルをワイド表示にする場合（ワイド表示ON）

「PC用」の推奨サイズは「 横 800px 」です。
縦の高さはお好みのサイズで構いません。
ご参考までに、デモショップでは「横1600px / 縦1000px 」の画像を使用しています。

「スマホ用」の推奨サイズは「 横 800px 」です。
縦の高さはお好みのサイズで構いません。
ご参考までに、デモショップでは「横 800px / 縦 500px 」の画像を使用しています。

・メインビジュアルを通常の表示形式する場合（ワイド表示OFF）

「PC用」のスライド画像の推奨サイズは「 横1200px 」です。
縦の高さはお好みのサイズで構いません。

「スマホ用」のスライド画像の推奨サイズは「 横800px 」です。
縦の高さはお好みのサイズで構いません。

【イメージスライダー】

推奨サイズは「 横800px 」です。縦の高さはお好みのサイズで構いません。
ご参考までに、デモショップでは「横1280px / 縦720px 」の画像を使用しています。
デザインの仕様上、「スライド 1 画像」～「スライド 6 画像」の6枚すべての画像を設定することを推奨します。
また、すべての画像は同じサイズにすることを推奨します。

【フローティングバナー】

推奨サイズは「 横560px 」です。縦の高さはお好みのサイズで構いません。
ご参考までに、デモショップでは「横790px / 縦340px 」の画像を使用しています。

【ピックアップ】

推奨サイズは「 横800px 」です。縦の高さはお好みのサイズで構いません。
デザインの仕様上、全ての画像サイズを合わせることをお勧めします。
ご参考までに、デモショップでは「横800px / 縦400px 」の画像を使用しています。

【ランキング】

推奨サイズは「 横600px 」です。縦の高さはお好みのサイズで構いません。
ご参考までに、デモショップでは「横1200px / 縦900px 」の画像を使用しています。

【コンセプト背景画像】

推奨サイズは「 横220px / 縦1000px 」です。縦の高さはお好みのサイズで構いません。
背景画像は画面サイズに応じて切り抜かれて表示されますので、見切れて欲しくない要素は中央寄りに配置してください。
ご参考までに、デモショップでは「横2200px / 縦1000px 」の画像を使用しています。

【トップページバナー】

推奨サイズは「 横1440px 」です。縦の高さはお好みのサイズで構いません。
ご参考までに、デモショップでは「横1440px / 縦648px 」の画像を使用しています。

【トップページフリースペース】

推奨サイズは「 横1200px 」です。縦の高さはお好みのサイズで構いません。
ご参考までに、デモショップでは「横2400px / 縦750px 」の画像を使用しています。

【商品ページバナー】

推奨サイズは「 横800px 」です。縦の高さはお好みのサイズで構いません。
ご参考までに、デモショップでは「横800px / 縦400px 」の画像を使用しています。

【フッターフリースペース画像】

推奨サイズは「 横800px 」です。縦の高さはお好みのサイズで構いません。
ご参考までに、デモショップでは「横1000px / 縦450px 」の画像を使用しています。

【アバウトページ画像】

縦長/横長に関わらずお好みのサイズで構いません。
ご参考までに、デモショップでは「横2400px / 縦1350px 」の画像を使用しています。

【アバウトフリースペース画像】

縦長/横長に関わらずお好みのサイズで構いません。

【商品画像】

推奨サイズは「 横1200px 」です。縦の高さはお好みのサイズで構いません。
ご参考までに、デモショップでは「横1200px / 縦900px 」の画像を使用しています。

TIPS （設定のヒント）

テキストエリアで改行や段落を入れる方法
テーマ設定のテキストエリアではHTMLが利用可能です。
「 」と入力すると改行され、「 ～ 」で囲むと段落になり、「 ～ 」で囲むと太字になります。
```

【営業時間】
 
11:30-15:00（L.O. 14:30）
 
18:00-23:00（L.O. 22:00）



【定休日】
 
日曜日・祝日
 
神戸市中央区山本通1-1

```
以下のように表示されます。

上記以外の自由なHTMLを記述することも可能です。
但し、HTMLについてはサポート対象外となっておりますので、HTMLの記述方法や記述内容のご案内等は致しかねますことを予めご了承ください。
また、閉じタグの漏れや記述内容の誤りによってショップ全体の表示に影響が出る場合がありますので、
HTMLを記述される場合には十分に注意して設定を行ってください。
「FAQ」「お買い物ガイド」「はじめにお読みください」など任意のコンテンツを作る方法

BASEには自由な内容のページを作成するための「ページ追加 App」がありますが、
「ページ追加 App」は無料テーマのみが対象のAppsとなっているため、有料テーマではご利用いただくことができません。

そこで、任意のコンテンツを追加するための代替案として下記2つの方法をご提案いたします。

①「Blog App」を利用する方法

▼ Blog App
https://apps.thebase.in/detail/43

「Blog App」を利用することでブログ記事として自由な内容を記載したページを作成することが可能です。

具体例として、デモショップではブログ記事として「はじめにお読みください」のページを作成しています。
⇒ デモショップ「はじめにお読みください」
（トップページの「バナー」「ピックアップ」「外部リンク」等からその記事ページへリンクさせるイメージとなります。）

テーマ設定の『5-1【 Blog App 】』で、ブログをメニューから非表示にしたり、ブログの日付を非表示にすることで、常設コンテンツのように見せることもできます。

※「Blog App」をはじめとしたBASE Appsのインストール方法や設定方法についてはBASEへ直接お問い合わせください。

② Raptorのテーマ機能【アバウトページフリースペース】を利用する方法

Raptorのテーマ機能を利用して、アバウトページに「FAQ」や「お買い物ガイド」などの自由な内容を2つまで掲載することが可能です。詳しい設定方法は、オンラインマニュアル「 3-2 アバウトページフリースペース」をご覧ください。

具体例として、デモショップではアバウトページに「 FAQ 」を掲載しています。
⇒ デモショップアバウトページ「 FAQ 」

トップページのバナー等から「アバウトページフリースペース」で設定したコンテンツにリンクを貼りたい場合には、

[ショップURL]/about#[フリースペースタイトル]

というURLでリンクすることができます。
例えば、デモショップの場合であれば

・ショップURLが「 https://raptor1.base.ec/ 」
・フリースペースのタイトルが「 お買い物ガイド 」

であるため、

https://raptor1.base.ec/about#お買い物ガイド

というURLになります。
同様に、デモショップのもうひとつのフリースペースのURLは

https://raptor1.base.ec/about#FAQ

となっています。
上記をご参考にして、ショップURLやフリースペースタイトルを変更してご利用ください。
ショップを公開する前に商品ページを確認する方法

ショップの準備を進める際、BASE管理画面の「ショップ公開状況」を「公開」にすると商品が購入できる状態になってしまい、「非公開」にするとショップオーナーも商品ページを見ることができなくなります。
デザイン画面の「プレビュー」でもある程度実際の画面を確認することができますが、バナーやピックアップで設定するために商品ページURLを取得したいような場合、プレビュー画面では確認することができません。

そこで、ショップの準備中は「公開」した状態で「シークレットEC」でパスワードをかけることをお勧めします。

▼ シークレットEC App
https://apps.thebase.com/detail/12

実際にショップを公開する際には、「シークレットEC Apps」を無効にすることで、誰でもショップを閲覧できる状態になります。

設定方法についてはよくある質問も併せてご覧ください。

『 Raptor 』オンラインマニュアル（テーマの設定方法）

全体設定ショップ全体（全てのページ）で共通する設定項目です。

フォント / カラー

1-1【 フォント / カラー 】 フォントサイズ

明朝体フォント ON/OFF

メインエリア 背景色

メインエリア テキストカラー

メインエリア サブテキストカラー

フッター 背景色

フッター テキストカラー

リンクカラー

ボタン 背景色

ボタン 枠線カラー

ボタン テキストカラー

購入ボタン カラー

セール価格 / SOLD OUT カラー

アイテム設定

1-2【 アイテム設定 】トップページに商品一覧を表示 ON/OFF

商品に1行の「商品説明」を表示 ON/OFF

商品一覧の画像を正方形に切り抜く ON/OFF

在庫表示（残りわずか）

1-3【 在庫表示 】「残りわずか」を表示 ON/OFF

「残りわずか」と表示される在庫数

「残りわずか」の表記テキスト

お気に入り機能

1-4【 お気に入り機能 】ON/OFF

タイトル

TIPS （設定のヒント）

商品一覧にハートボタンを表示 ON/OFF

トップページ下部にお気に入りリストを表示 ON/OFF

未登録 ハート色

登録済 ハート色

メニュー設定

1-5【 メニュー設定 】Homeのタイトル

Categoryのタイトル（カテゴリ管理 Apps）

Informationのタイトル

Linkのタイトル

Aboutのタイトル

Blogのタイトル

Contactのタイトル

トップページ商品一覧のタイトル

関連商品のタイトル

TIPS （設定のヒント）

外部リンク 1 テキスト

URL

外部リンク 2 テキスト

URL

外部リンク 3 テキスト

URL

検索ボックスのプレースホルダー

トップページ商品一覧のタイトル

商品一覧の「More」ボタンのタイトル

PCヘッダーにSNSアイコンを表示 ON/OFF

追加メニュー

1-6【追加メニュー】1 テキスト

URL

「追加メニュー 2」も同様の設定方法となっています。

カテゴリーアイコン

1-7【カテゴリーアイコン】カテゴリー名の左にアイコンを表示 ON/OFF

アイコンを丸く切り抜く ON/OFF

アイコン 画像

カテゴリーアイコンの仕様

カテゴリーアイコン画像の推奨サイズ

【具体例 1】

【具体例 2】

【具体例 3】

カテゴリーアイコン画像の作成方法

・各カテゴリー用の画像を作成してから1枚にまとめる方法

・Photoshopを利用して作成する方法

〇〇から選ぶメニュー

1-8.【〇〇から選ぶメニュー ①】 ON/OFF

メニュー① タイトル

メニュー① - 1 テキスト

メニュー① - 2 テキスト

メニュー① - 3 テキスト

メニュー① - 4 テキスト

メニュー① - 5 テキスト

メニュー① - 6 テキスト

【〇〇から選ぶメニュー ②】 ON/OFF

メニュー② タイトル

1-1【フォント / カラー】フォントサイズ

メインエリア背景色

メインエリアテキストカラー

メインエリアサブテキストカラー

フッター背景色

フッターテキストカラー

ボタン背景色

ボタン枠線カラー

ボタンテキストカラー

購入ボタンカラー

1-2【アイテム設定】トップページに商品一覧を表示 ON/OFF

1-3【在庫表示】「残りわずか」を表示 ON/OFF

1-4【お気に入り機能】ON/OFF

未登録ハート色

登録済ハート色

1-5【メニュー設定】Homeのタイトル

アイコン画像

詳細説明テキスト

1-10【お支払い方法の表示】表示 ON/OFF

2-1【メインビジュアル】 ON/OFF

2-2【イメージスライダー】 ON/OFF

2-3【カウントダウンタイマー】 ON/OFF

2-4【トップページカテゴリー】 ON/OFF

2-6【トップページバナー】 ① 画像

【トップページバナー】 ② 画像