テーマ / OMOTASE / マニュアル

OMOTASE マニュアル

対象のバージョン 1.0.0 最終更新 2026-10-11

OMOTASE を使い始めるときと、設定で迷ったときに読むページです。設定の名前は、BASE の「デザイン編集」の画面に出る名前をそのまま使っています。画面と見比べながら読んでください。

目次

はじめに

このテーマでできること

  • 商品説明が表になる: 商品説明の最後に決まった書き方で書くと、原材料・アレルゲン・日持ちなどが商品ページで表になります(3章)。
  • のし・包装の案内: 商品ページに「贈り物として」の段取り、トップページに「贈る場面から選ぶ」を置けます。
  • 季節の案内: 受付期間つきの季節のご案内と、営業日カレンダーを設定だけで出せます。

設定画面の見方

BASE の管理画面の「デザイン」から、OMOTASE の「デザイン編集」を開きます。設定は2か所にあります。

場所入っているもの
基本設定ロゴ(画像か文字)、背景
テーマ別設定このテーマ独自の設定。「全体設定」「HOME設定」「ABOUT設定」「商品ページ設定」「App設定」「その他設定」の6つに分かれています

このマニュアルの1章から7章は、テーマ別設定の6つの区分と同じ順番です。

最初にやること

この順に進めると、30分ほどでお店の形になります。

  1. ロゴ: 基本設定でロゴの画像を入れるか、ショップ名の文字のままにします。
  2. 大きな画像(ページの顔): HOME設定の「大きな画像(パソコン用・1枚目)」に写真を1枚入れ、見出しを書きます(2-2)。
  3. 商品説明の表: 商品を1つ開き、商品説明の最後に [商品情報] から始まる数行を書きます(3章)。
  4. ギフトの案内: HOME設定の「ギフト案内の本文」と、商品ページ設定の「ギフトの段取り1〜3」を、お店の実際の内容に直します。初期値は「無料で承ります」になっているので、有料の場合は必ず書き換えてください。
  5. 季節のご案内: 使う場合は本文と受付期間を入れます。使わない場合は本文を空にします(2-4)。
  6. 営業日カレンダーと発送日の目安: 定休日の曜日を選び、商品ページ設定の「ご注文から発送までの日数」を合わせます(2-14、8章)。

設定を保存できないとき

設定項目が多いため、一度にたくさん変えると保存に失敗することがあります。何回かに分けて保存してください。画像は 1枚 2MB 以内に縮めてから入れると安定します。

1. 全体設定

すべてのページに効く設定です。

書体と角の丸み

設定の名前初期値説明
文字の書体見出しは明朝・本文はゴシック(おすすめ)ほかに「すべて明朝」「すべてゴシック」を選べます。明朝は落ち着いた印象、ゴシックは読みやすく親しみのある印象です
写真や入力欄の角の丸み角ばった形「少し丸める」「大きく丸める」も選べます。写真を主役にするなら、角ばった形か少し丸める、がなじみます

色

色は、背景の色と、その上に乗る文字の色を必ず組で変えてください。片方だけ変えると、文字が読めなくなることがあります(例: ボタンを薄い黄色にしたのに、ボタンの文字が白のまま)。

設定の名前初期値使われる場所
ボタン・強調の色#22412F(深い緑)ボタン、強調の線、印
ボタンの文字の色#FFFFFF(白)ボタンの中の文字
囲み枠の背景の色#ECF1EC(薄い緑)季節のご案内、見本の表など、色を敷いた枠
囲み枠の文字の色#151515囲み枠の中の文字
ページ下部の背景の色#FFFFFFページの一番下
ページ下部の文字の色#151515ページの一番下の文字

季節の配色

「季節の配色(選ぶと、ボタンと囲み枠の色が切り替わる)」で、春(桜と若草)・夏(海と白)・秋(栗と紅葉)・冬(常緑と雪)・和(墨と朱)を選べます。選ぶと、上の「ボタン・強調の色」と「囲み枠」の色が季節のものに切り替わります(背景と文字の組ごと切り替わるので、読めなくなることはありません)。自分で選んだ色に戻すときは「使わない(上で選んだ色のまま)」を選びます。

季節の配色ごとの商品ページ。カートに入れるボタン、価格、贈り物の番号の色が切り替わる
季節の配色ごとの商品ページ。カートに入れるボタン、価格、贈り物の番号の色が切り替わる

動きとメニュー

設定の名前初期値説明
スクロールしてもメニューを画面の上に残すオン下に読み進めても、メニューとカートが画面の上に残ります
スクロールに合わせて写真や文字をゆっくり見せるオンオフにすると、最初からすべて表示されます。お客様の端末で「視差効果を減らす」(動きを減らす)を選んでいる場合は、オンでも動きません
下までスクロールしたとき、右下に「上へ戻る」ボタンを出すオン8章

商品一覧の並び順と価格帯

設定の名前初期値説明
商品一覧に「並び順」と「価格帯」の切り替えを出すオン8章
価格帯の区切り(円。カンマで区切る)1000,3000,5000区切りの金額を半角数字とカンマで書きます。初期値なら「〜999円/1,000〜2,999円/3,000〜4,999円/5,000円〜」になります
並べ替えるときに読み込む商品の上限(ページ数。1ページ約24件)20商品がとても多いお店で、並べ替えに時間がかかるときに小さくします

お気に入りと最近見た商品

設定の名前初期値
お気に入り(商品のハートと一覧)を使うオン
最近見た商品を記録して見せるオン

動きは 8章 にあります。

2. HOME設定(トップページ)

2-1. パーツの表示と順番

トップページは、上から順に「パーツ」が並んでできています。パーツごとに「〇〇 を表示する」と「〇〇 の順番(数字が小さいほど上)」の2つの設定があります。

パーツ順番の初期値出るための条件
大きな画像10「大きな画像(パソコン用・1枚目)」に画像がある
横に流れるご案内の帯20「帯に流す文」がある
季節のご案内・お知らせ30「季節のご案内の本文」がある
贈る場面から選ぶ40「贈る場面1 の画像」がある
おすすめ特集50「おすすめ特集1 の画像」がある
カテゴリ一覧60カテゴリ管理 App を入れている
商品一覧70いつも出ます(表示・非表示の設定はありません)
原材料・日持ちの見本80「見本の表」がある
ギフト・のしのご案内90「ギフト案内の本文」がある
つくり手の想い100「つくり手の想いの本文」がある
選ばれる理由110「理由1 の本文」がある
送料・配送のご案内120「送料案内の本文」がある
営業日・発送カレンダー130「営業日カレンダーの見出し」がある
お客様の声140「お客様の声1 本文」がある
ブログの新着150Blog App を入れている
Instagramの写真160「Instagramに載せる画像1」がある
メールマガジンの登録欄170メールマガジン App を入れている
自由記入エリア180「自由記入エリアの本文」がある
  • 「表示する」をオンにしていても、条件の中身が空なら、そのパーツは見出しごと出ません。使わないパーツは、オフにするか中身を空にしておけば大丈夫です。
  • 順番を入れ替えるときは、数字を書き換えます。例: 「選ばれる理由」を商品一覧のすぐ上に出したいなら、65 にします。初期値が10ずつ空いているのは、間に入れやすくするためです。
  • 2つのパーツに同じ数字を入れないでください。並びが思ったとおりにならないことがあります。
トップページのパーツの並び(順番は初期値)。写真の部分は見本用の仮の画像
トップページのパーツの並び(順番は初期値)。写真の部分は見本用の仮の画像

2-2. 大きな画像(ページの顔)

トップページのいちばん上に、写真を大きく出します。

設定の名前説明
大きな画像の見せ方「1枚だけ表示」か「3枚を順番に切り替える」
大きな画像の高さ「画面いっぱい」か「ふつうの高さ」
大きな画像(パソコン用・1枚目)これが無いと、このパーツは出ません
大きな画像(スマホ用・1枚目)入れないと、パソコン用の画像の中央を切り抜いてスマホに出します
大きな画像(2枚目・切り替える場合)、(3枚目・切り替える場合)「3枚を順番に切り替える」のときに使います
大きな画像に重ねる見出し(「/」で改行)2行までが目安です。「焼き上がりの香りごと、/贈る。」のように「/」で改行できます
大きな画像に重ねる説明文見出しの下の短い文
大きな画像のボタン1の文字、ボタン1の行き先例: 「冬の詰め合わせを見る」と、そのカテゴリのページのアドレス
大きな画像のボタン2の文字、ボタン2の行き先2つ目のボタン(任意)
  • 文字は写真に焼き込まず、設定に入れてください。スマホとパソコンで文字の位置が変わっても読めます。
  • 「1枚だけ表示」のときは、写真がゆっくり寄る動きをします。止めたいときは、全体設定の「スクロールに合わせて写真や文字をゆっくり見せる」をオフにします。
  • 「3枚を順番に切り替える」は、約6秒ごとに写真が入れ替わります。
  • お知らせバナー App の帯を出しているときは、帯の高さの分だけ画像が短くなり、ボタンまで最初の画面に収まります。
大きな画像に見出し・説明文・ボタン2つを入れたところ(左がパソコン、右がスマホ)
大きな画像に見出し・説明文・ボタン2つを入れたところ(左がパソコン、右がスマホ)

2-3. 横に流れるご案内の帯

「帯に流す文(「/」で区切ると、いくつでも並ぶ)」に、短い文を「/」で区切って書きます。

例: のし・包装・メッセージカードは無料/冷蔵便でお届け/お歳暮の受付は12月20日まで

4〜5個までにすると読みやすくなります。

2-4. 季節のご案内・お知らせ

設定の名前説明
季節のご案内の見出し初期値「季節のご案内」
季節のご案内の本文これが空だと、このパーツは出ません
季節のご案内の画像任意
受付の開始日、受付の終了日2026-11-01 の形で書きます(2026/11/01 でも読めます)。2つとも入っていると、受付期間の進み具合が線で出ます
季節のご案内の行き先特集やカテゴリのページのアドレス
  • 日付の書き方が読めないときは、線だけが出ず、ほかの部分はそのまま表示されます。
  • 季節が終わったら、本文を空にするか「季節のご案内・お知らせ を表示する」をオフにしてください。
  • 画面の一番上に出る細い帯は「お知らせバナー App」の機能で、このパーツとは別のものです。

2-5. 贈る場面から選ぶ

4枠まで、写真と場面の名前を並べます。

設定の名前例
贈る場面の見出し、説明文「贈る場面から」
贈る場面1〜4 の画像場面に合う写真(縦長 4:5)
贈る場面1〜4 の名前お歳暮、内祝い、手土産、自分へ
贈る場面1〜4 のひとこと表書き「御歳暮」・外のし
贈る場面1〜4 の行き先その場面に合う商品を集めたカテゴリのページ

画像を入れた枠だけが並びます。2枠だけ使うこともできます。

行き先のアドレスの見つけ方: カテゴリ管理 App でカテゴリを作り、ショップでそのカテゴリを開いたときのアドレスをコピーして貼ります。

2-6. おすすめ特集

画像・見出し・行き先を3枠まで並べます。「おすすめ特集1 の画像」が無いと出ません。

2-7. カテゴリ一覧

カテゴリ管理 App が必要です。

  • 何も入れなければ、カテゴリ管理 App のカテゴリが文字のボタンで並びます。
  • 「カテゴリの写真1〜6」に写真・名前・行き先を入れると、写真の上に名前を重ねた並びに切り替わります(スマホ2列、パソコン3列)。
  • 行き先が空の枠は出ません。
  • 写真は縦長(4:5)に切り抜いて表示します。主役を写真の中央に置くと切れにくくなります。

2-8. 商品一覧

設定の名前初期値
商品一覧の見出し商品一覧
商品一覧の説明文(見出しの下)空

商品一覧はいつも表示されます。順番(初期値 70)だけ変えられます。

2-9. 原材料・日持ちの見本

トップページで「商品ページで原材料や日持ちが分かる」ことを伝える区画です。

設定の名前説明
原材料・日持ちの見本の見出し、説明文初期値が入っています
見本の表(項目は「|」で、項目名と内容は「 / 」で区切る)例: 原材料 / バター、小麦粉|アレルゲン / 小麦・卵・乳|賞味期限 / 製造日から14日
トップページの「原材料・日持ちの見本」
トップページの「原材料・日持ちの見本」

2-10. ギフト・のしのご案内

見出し・本文・画像・行き先。本文が空だと出ません。初期値の「無料で承ります」は、お店の実際の内容に必ず直してください。

2-11. つくり手の想い

設定の名前説明
つくり手の想いの画像(1枚目)、(2枚目・小さく重なる)2枚目は1枚目に小さく重ねて出ます
つくり手の想いの見出し(「/」で改行)
つくり手の想いの本文これが空だと出ません
つくり手の想いの署名例: 店主 山田
つくり手の想いの行き先ABOUT ページなど

2-12. 選ばれる理由

3つまで。それぞれ「小さな画像」「見出し」「本文」を入れます。「理由1 の本文」が無いと出ません。小さな画像は線の細い単色のアイコンが合います(160×160)。

2-13. 送料・配送のご案内

見出し・本文・行き先。本文が空だと出ません。ここに入れた本文は、すべてのページの下部と、ABOUT ページの「お買い物の案内」にも使われます(7章、5章)。

2-14. 営業日・発送カレンダー

設定の名前説明
営業日カレンダーの見出しこれが空だと出ません
営業日カレンダーの補足文初期値「定休日は発送をお休みします。」
定休日:日曜 〜 定休日:土曜お休みの曜日をオンにします(いくつでも)
臨時でお休みする日2026-12-31,2027-01-01 のように、日付を半角のカンマで区切ります
  • 書き方を間違えた日付は無視され、カレンダーは崩れません。
  • ここで決めたお休みは、商品ページの「発送日の目安」の計算にも使われます。
営業日・発送カレンダー。発送をお休みする日に色が付く
営業日・発送カレンダー。発送をお休みする日に色が付く

2-15. お客様の声

3件まで、お名前と本文を入れます。「お客様の声1 本文」が無いと出ません。レビュー App の内容とは別に、自分で選んだ声を載せる欄です。

2-16. ブログの新着

Blog App が必要です。

  • ブログの新しい記事を、カードで並べます。「ブログ欄に出す記事の数(1〜12)」の初期値は 6 です。
  • 記事に写真があると写真つきのカード、写真が無いと題名と書き出しを大きめの文字で組んだカードになります。混ざっても、同じ行の高さはそろいます。
  • 記事の最初の写真がカードの写真になります。
  • Blog App で「固定」にした記事は、ブログ一覧の先頭に出ます。トップページのカードは日付の新しい順です。
  • 記事が1件も無いときは、「記事をすべて見る」のボタンだけが出ます。

2-17. Instagramの写真

Instagram の投稿を自動で読み込む仕組みではありません。載せたい写真を「Instagramに載せる画像1〜6」に自分で入れ、「Instagramのページの行き先」にアカウントのアドレスを入れます。画像1が無いと出ません。

2-18. メールマガジンの登録欄

メールマガジン App が必要です。見出しと説明文には初期値が入っています。空にすると登録欄だと分かりにくくなるので、残しておくことをおすすめします。

2-19. 自由記入エリア

見出し・本文・画像を自由に使える区画です。本文が空だと出ません。

3. 商品説明の書き方(原材料などの表)

このテーマでいちばん大事な章です。BASE には商品ごとに項目を足す仕組みがありません。そこで、商品説明の最後に決まった書き方で書くと、商品ページで表に整える仕組みにしました。

3-1. 書き方

商品の編集画面の「商品説明」に、ふだんの説明を書いたあと、1行空けて次のように書きます。

発酵バターのフィナンシェ6つと、月の名を持つショコラ6つの詰め合わせです。

[商品情報]
原材料 / バター、小麦粉、砂糖、卵、アーモンド
アレルゲン / 小麦・卵・乳・アーモンド
内容量 / 12個
賞味期限 / 製造日から14日
保存方法 / 要冷蔵(10℃以下)
配送温度帯 / 冷蔵

商品ページでは、こう表示されます。

上の例が商品ページで表になったところ
上の例が商品ページで表になったところ
動画(20秒・音なし): 商品ページの「商品の表記」。アレルゲンの印と、冷蔵の印

3-2. 決まりごと

  1. [商品情報] の行(目印)の下だけが表になります。目印の行には、ほかの文字を書かないでください。
  2. 1行に1項目です。
  3. 項目名と内容のあいだは「半角スペース・半角の / ・半角スペース」です( / )。全角の「/」では表になりません。
  4. 行の順番が、そのまま表の順番になります。
  5. 空の行で表が終わります。 表のあとに1行空けて書いた文は、表の下に、ふだんの説明として出ます。
  6. 「 / 」の無い行は、すぐ上の項目の続きとして扱います(長い原材料を2行に分けたいとき)。

項目名は自由です。販売期間、のし・包装、製造者、サイズなど、いくつでも足せます。表にしたくない商品は、目印を書かなければそのままの説明になります。

3-3. 印になる項目

項目名表示
アレルゲン「・」「、」で区切った語が、1つずつの印になります。かっこの中は区切りません(例: 小麦・卵・乳(同じ工房でそばを含む製品を製造しています))
配送温度帯内容に「冷蔵」が入ると青の印、「冷凍」が入ると濃い青の印になります。「常温」などは色の無い印です
  • 1つの語が長すぎる(12文字を超える)ときは、印に分けずに文のまま出します。語が欠けて伝わるのを防ぐためです。
  • 印にする項目名や、色を変える語は設定で変えられます(3-5)。

3-4. コピーして使える例

焼き菓子(常温)

[商品情報]
原材料 / 小麦粉、バター、砂糖、卵、アーモンドパウダー、塩
アレルゲン / 小麦・卵・乳・アーモンド
内容量 / 8個
賞味期限 / 製造日から30日
保存方法 / 直射日光・高温多湿を避けて保存
配送温度帯 / 常温

生菓子(冷蔵)

[商品情報]
原材料 / 生クリーム、砂糖、卵、小麦粉、いちご
アレルゲン / 小麦・卵・乳
内容量 / 直径12cm 1台
消費期限 / お届け日を含めて2日
保存方法 / 要冷蔵(10℃以下)
配送温度帯 / 冷蔵

冷凍のケーキ

[商品情報]
原材料 / クリームチーズ、砂糖、卵、生クリーム、小麦粉
アレルゲン / 小麦・卵・乳
内容量 / 長さ15cm 1本
賞味期限 / 冷凍で30日。解凍後は冷蔵で2日
解凍のしかた / 冷蔵庫で4〜5時間
配送温度帯 / 冷凍

ジャム・瓶詰め

[商品情報]
原材料 / いちご(国産)、砂糖、レモン果汁
内容量 / 140g
賞味期限 / 製造日から1年
保存方法 / 開封後は要冷蔵。2週間を目安にお召し上がりください
配送温度帯 / 常温

精肉・海産(冷凍・加熱用)

[商品情報]
原材料 / 牛肉(国産)
内容量 / 300g
賞味期限 / 冷凍で60日
保存方法 / 要冷凍(-18℃以下)
お召し上がり方 / 加熱してお召し上がりください
配送温度帯 / 冷凍

食品でないもの(箱・雑貨)

[商品情報]
サイズ / 幅20cm × 奥行15cm × 高さ8cm
素材 / 紙(FSC認証紙)
付属品 / リボン、メッセージカード

表示の内容(原材料・アレルゲン・期限など)は、お店の商品に合わせて正しく書き換えてください。食品表示の決まりは、保健所や消費者庁の案内で確かめてください。

3-5. 表の設定を変える

商品ページ設定にあります。

設定の名前初期値説明
原材料やアレルゲンを表にして見せるオンオフにすると、目印を書いた商品もふだんの説明のまま出ます
表の見出し商品の表記表の上に出る見出し
商品説明の中に書く目印[商品情報]変えたら、すべての商品説明の目印も同じものにします
項目名と内容を分ける記号 / 前後の半角スペースも記号の一部です
ひとつずつ切り出して見せる項目名アレルゲン化粧品なら「全成分」などに
色つきの印で見せる項目名配送温度帯
色を変える語(冷蔵)、色を変える語(冷凍)冷蔵、冷凍「チルド」などに変えられます

3-6. 商品一覧の印(ラベル App)

表の内容は商品ページだけに出ます。商品一覧の写真に印を付けたいときは、ラベル App を使います。ラベル App で付けられるのは BASE が用意した印(NEW・SALE など)で、「冷蔵」のような自由な文字は付けられません。冷蔵・冷凍は、商品ページの表の色つきの印で伝えてください。

3-7. のしの名入れ・表書きを受け付ける

商品オプション App で、文字を入力する形のオプション(例: 「のしのお名前」)を作ります。必ず書いてほしい場合は「必須」にします。必須の選択肢を選ばずにカートに入れようとすると、選択肢の下に赤い文字で知らせが出ます。

商品オプションを使わない場合は、商品ページ設定の「商品ページのギフト案内文」に「表書き・名入れはご注文時の備考欄にご記入ください」のように書いておきます。

動画(37秒・音なし): 商品ページの「贈り物として」と、トップページの「贈る場面から選ぶ」

4. 商品ページ設定

設定の名前初期値説明
商品写真の形縦長「正方形」「横長」も選べます。登録している写真の形に合わせます。形の違う写真が混ざると、設定した形に切り抜かれます
原材料やアレルゲンを表にして見せる ほか3-5
残りわずかな商品に残数を出すオン在庫が少ない商品に「残り3点」のように出します
残りわずかとみなす数5この数以下になると残数が出ます
商品ページにギフトの案内を出すオン購入ボタンの近くに「贈り物として」の案内を出します
商品ページのギフト案内の見出し贈り物として
商品ページのギフト案内文のし・包装・メッセージカードを無料で承ります……お店の実際の内容に直します
ギフトの段取り1〜3(「/」の前が項目、後ろが説明)のし/表書きと名入れ ほか3つの段取りが番号つきで並びます。使わない段取りは空にします
商品ページの季節の注記空例: 「お歳暮は12月20日までにご注文ください」。空なら出ません
購入ボタンが見えなくなったら、画面の下に購入ボタンを出すオン押すと、ページの購入ボタンの位置まで移動します
発送日の目安を出す ほか8章
「この商品を送る」ボタンを出す(LINE・X・リンクのコピー)オン8章
商品の写真を押すと大きく見られるようにするオン8章
商品ページの「贈り物として」と、ギフトの段取り
商品ページの「贈り物として」と、ギフトの段取り

5. ABOUT設定

ショップの「ABOUT」ページの設定です。

設定の名前説明
ABOUTページの画像、見出し、導入文ページの最初に出ます。見出しの初期値は「私たちについて」
店舗の情報を表示する初期値はオフ。実店舗がある場合だけオンにします
店舗名、所在地、電話番号、営業時間店舗の情報の表になります
Googleマップの地図URLGoogleマップで場所を開き、「共有」→「地図を埋め込む」で出るコードのうち、src=" と " のあいだのアドレスだけを貼ります
営業許可など例: 菓子製造業 第123号。空なら出ません
トップの「つくり手の想い」「選ばれる理由」もここに出すオンにすると、トップページに入れた内容をここにも出します。同じ文を2回入れなくて済みます
お買い物の案内(送料・発送・ギフト・返品・お支払い)を出す送料とギフトはトップページの内容、発送の目安は商品ページ設定から自動で作ります
返品・交換についてお買い物の案内に出る文。空なら出ません
よくある質問質問と答えを「 / 」で分け、1組ずつ「|」で区切ります

よくある質問の書き方の例:

日持ちはどのくらいですか? / 製造日から14日です|のしは付けられますか? / 無料で承ります

押すと答えが開く形で並びます。ページの一番下には「お問い合わせ」のボタンが出ます。

6. App設定と、App ごとの表示

App設定

設定の名前初期値説明
販売開始までの残り時間を出す(販売期間設定App)オン販売開始前の商品に、残り時間を出します
残り時間の見出し販売開始まで
定期便の案内を出す(定期便App)オフ
定期便の案内文空
レビューを出す場所(レビューApp)商品説明のすぐ下「ページの一番下」も選べます

App ごとの表示

App を入れていなくても、表示は崩れません。入れると次のように変わります。

App表示されるところ・気をつけること
送料詳細設定商品ページの価格のすぐ下に送料が出ます。クール便・地域別の料金は「送料を確認する」から開きます
商品オプション購入ボタンの上に選択肢が出ます。名入れの使い方は 3-7
予約販売商品ページと一覧に「予約」の印。購入ボタンの文字が変わります
販売期間設定販売開始前・終了後の表示。販売開始までの残り時間(App設定)
年齢制限購入ボタンの近くに注意書き。法令の表示の決まりに合わせ、価格より大きな文字で出します
定期便商品ページに初回の価格と2回目以降の価格を両方出します。一覧と画面下の購入ボタンには初回の価格を出します
レビュー出す場所を App設定で選べます
ラベル一覧と商品ページの写真の左上に印
カテゴリ管理メニューの「Category」、トップページのカテゴリ一覧、カテゴリページの上の道しるべ
商品検索パソコンは画面右上、スマホはメニューの中。見つからないときは「すべての商品を見る」
Blogトップページのブログの新着(2-16)
セール元の価格(取り消し線)、割引率、セール価格の順。売り切れでもセール価格を出します
英語・外貨対応ページ下部に切り替え。テーマの決まった文言は翻訳されますが、設定に自分で入れた文は翻訳されません
メールマガジントップページの登録欄(2-18)
お知らせバナー画面の一番上に細い帯。テーマ側に設定はありません
再入荷自動通知売り切れの商品で、購入ボタンが通知の受付に変わります
メッセージ画面の右下にアイコンが出ます。画面下の購入ボタンと重ならないよう、下に余白を取っています
テイクアウト一覧と商品ページに「テイクアウト」の印
商品説明カスタム商品説明の表のすぐ下に、App の内容が出ます
デジタルコンテンツ商品ページにファイル名の枠
コミュニティ一覧と商品ページに会員限定の印
メンバーシップメニューとページ下部にリンク
抽選販売一覧と商品ページに「抽選」の印
BASEロゴ非表示テーマ側の作業はいりません

7. その他設定

設定の名前初期値説明
支払い方法をページ下部に出すオンすべてのページの下部に、送料の案内とお支払い方法のロゴを出します。ロゴは BASE の「決済方法」の設定から自動で出るので、テーマ側の作業はいりません
ページ下部の補足文空ページの一番下に出る短い文
CSSで細かく調整する(上級者向け)空CSS が分かる方向け。ここに書いた内容は、テーマの指定より後に読み込まれます

テーマの更新について

  • テーマの更新は、BASE の審査を通ったあとに、テーマを使っているショップへ自動で届きます。テーマ別設定に入れた内容はそのまま残ります。
  • HTML編集 App でテーマを書き換えると、それ以降の更新は届きません。 見た目を少し変えたいときは、まず「CSSで細かく調整する」を使ってください。
  • 何が変わったかは 更新履歴 に書きます。

8. お客様が使いやすい機能

どれも初期値はオンで、設定でオフにできます。

お気に入りと最近見た商品

  • 商品の写真の右上のハートを押すと、お気に入りに入ります。お客様のブラウザに保存されるので、会員登録やログインはいりません(最大30件)。
  • 画面上のハートを押すと、右からお気に入りと最近見た商品(最大12件)の一覧が出ます。一覧から外すこともできます。
  • トップページの商品一覧の下に「お気に入り」「最近見た商品」の段が出ます(まだ何も無いお客様には出ません)。
  • 別のスマホやパソコンには引き継がれません。ブラウザの履歴を消すと消えます。
お気に入りと最近見た商品の一覧
お気に入りと最近見た商品の一覧
動画(34秒・音なし): ハートを押してお気に入りに入れ、右から開く一覧を見る

発送日の目安

  • 商品ページの購入ボタンの下に「今日ご注文いただくと、〇月〇日(〇)ごろの発送です」と出ます。
  • 設定: 「発送日の目安を出す」「ご注文から発送までの日数(0なら当日発送)」(初期値 2)、「その日のご注文として受け付ける時刻」(初期値 12:00。過ぎたら次の営業日の受付)。
  • お休みの日は、HOME設定の営業日カレンダーの定休日と臨時のお休みを使います。
  • 日本時間で計算します。
  • 売り切れ・販売開始前・予約販売の商品には出ません。目安であることも一緒に表示します。
  • 配送日設定 App で最短のお届け日を出している場合は、その日付と食い違わないように日数を合わせてください。

この商品を送る

商品ページのボタンです。スマホでは端末の共有画面(LINE やメールなど)が開きます。パソコンでは「LINEで送る」「Xで送る」「リンクをコピー」を選べます。贈り物の相談でご家族に送るときなどに使われます。

商品写真の拡大

商品ページの写真を押すと、画面いっぱいに大きく出ます。左右のスワイプ、矢印キー、画面の矢印で次の写真へ。×、写真の外、Esc キーで閉じます。

ページの上へ戻る

ある程度下まで読むと、右下に小さな丸いボタンが出ます。画面下の購入ボタンと重ならない高さに出ます。

並び順と価格帯(商品一覧)

商品一覧の上の並び順・価格帯・在庫ありだけ
商品一覧の上の並び順・価格帯・在庫ありだけ
動画(24秒・音なし): 並び順を変え、価格帯で絞り、「在庫ありだけ」を切り替える
  • トップページ・カテゴリ・検索結果の商品一覧の上に「並び順」「価格帯」「在庫ありだけ」が出ます。
  • 並び順: おすすめ順(ショップの並び)、新しい順、価格の安い順、価格の高い順。セール中の商品はセール後の価格で並べます。
  • 条件を選ぶと、まだ表示していない商品も読み込んでから並べ替えます(読み込み中は件数が出ます)。商品がとても多いお店では、設定の上限(初期値 20ページ・約480件)までの中で並べ替え、そのことを表示します。
  • 選んだ条件は、商品を見て戻ってきたときも残ります。

ページ下部の送料とお支払い方法

すべてのページの下部に、送料の案内(HOME設定の「送料案内の本文」)と、お支払い方法のロゴが並びます。送料の案内を空にすると、お支払い方法だけが出ます。ABOUT ページでは「お買い物の案内」の中に同じロゴが出るので、ページ下部には重ねて出しません。

リンクの小さなアイコン

ページ下部とスマホのメニューの「お問い合わせ」「プライバシーポリシー」などに、細い線のアイコンが付きます。設定はいりません。

9. 画像の推奨サイズ

場所推奨サイズ(横×縦 px)形ひとこと
ロゴ横 600 以上、高さ 160 以内横長背景が透ける PNG。文字のロゴのままでもかまいません
大きな画像(パソコン用)2400×1350横長 16:9主役を中央に。文字は画像に入れず設定で
大きな画像(スマホ用)1200×1600縦長 3:4入れないとパソコン用の中央を切り抜きます
商品写真1200×1200 以上正方形(設定で縦長 4:5・横長も可)1つの商品の写真は同じ形にそろえます。1枚目が一覧に出ます
贈る場面、おすすめ特集、カテゴリの写真1200×1500縦長 4:5
つくり手の想い、自由記入エリア、季節のご案内1600×1200横長 4:3
選ばれる理由の小さな画像160×160正方形線の細い単色のアイコン
Instagramの写真800×800正方形
ABOUTページの画像1600×1200横長 4:3
  • 写真は JPEG、ロゴとアイコンは PNG。1枚 1〜2MB 以内が目安です。
  • 写真の明るさと色味をそろえると、写真を大きく見せる作りがまとまって見えます。
  • 人が写った写真や、ほかの会社のロゴが写った写真を使うときは、使ってよいかを確かめてください。

10. よくある詰まりどころ

商品説明に [商品情報] と書いたのに、表にならない

次のどれかに当てはまることが多いです。

  • 区切りが全角の「/」になっている、または前後の半角スペースが無い。 / (半角スペース・半角の / ・半角スペース)に直します。
  • 目印の行に、ほかの文字が付いている(例: [商品情報]です)→ 目印だけの行にします。
  • 目印の次の行が空いている。目印のすぐ下から項目を書きます。
  • 商品ページ設定の「原材料やアレルゲンを表にして見せる」がオフになっている。
  • 目印を設定で変えたのに、商品説明は古い目印のまま。

表が途中で切れて、残りがふだんの説明になる

表の途中に空の行があります。空の行で表が終わる決まりなので、空の行を消します。

アレルゲンが1つの印にまとまってしまう

語のあいだが「・」「、」以外(「と」やスペース無しの続け書きなど)になっています。小麦・卵・乳 のように区切ります。1つの語が12文字を超えている場合も、印に分けずに文のまま出します。

冷蔵の印に色が付かない

「配送温度帯」の項目名か、「冷蔵」「冷凍」の語が、商品ページ設定の語と違っています。例: 項目名を「温度帯」と書いている。

商品一覧にも「冷蔵」の印を出したい

一覧の印はラベル App の機能で、自由な文字は付けられません(3-6)。

大きな画像の動きを止めたい

全体設定の「スクロールに合わせて写真や文字をゆっくり見せる」をオフにします。3枚の切り替えをやめたいときは「大きな画像の見せ方」を「1枚だけ表示」にします。

スマホで大きな画像の端が切れる

「大きな画像(スマホ用・1枚目)」に縦長(3:4)の写真を入れます。

パーツが表示されない

「〇〇 を表示する」がオンでも、中身が空だと出ません。2-1 の表で「出るための条件」を確かめてください。カテゴリ一覧・ブログ・メールマガジンは App が必要です。

設定を保存できない

一度にたくさんの項目を変えたときに起きやすいです。何回かに分けて保存します。画像の容量も下げてみてください。

商品名が長いと2行になる

長い商品名は折り返して全部表示します。これは仕様です。一覧で見やすくしたいときは、商品名を短くして、くわしい名前は商品説明に書きます。

英語表示にしたのに、自分で入れた文が日本語のまま

英語・外貨対応 App が翻訳するのは、テーマの決まった文言(「カートに入れる」など)だけです。テーマ別設定に入れた文は翻訳されません。

お問い合わせや会員規約のページの見た目が変わらない

それらは BASE が用意しているページで、テーマでは見た目を変えられません。

定期便の商品が、一覧では違う価格に見える

一覧には初回の価格を出し、商品ページで初回と2回目以降の両方を出しています。

設定を変えたのに、見た目が変わらない

ブラウザに前の表示が残っていることがあります。別の端末や、ブラウザのシークレットウィンドウ(プライベートブラウズ)で開いて確かめてください。

11. 困ったときは

このマニュアルと よくある質問 で解決しないときは、お問い合わせ からご連絡ください。通常2営業日以内に返信します。

次の4つを書いていただくと、早く答えられます。

  1. ショップの URL
  2. 困っている画面(トップページ、商品ページなど)と、その画面の写真
  3. 使っている端末とブラウザ(例: iPhone の Safari、Windows の Chrome)
  4. 変えた設定と、そのときに入れた内容

対応する範囲は サポート方針 にまとめています。