FROMOはBASEオフィシャルパートナーです。
当サイトを通して新規BASEショップを開設すると、
購入者様が利用できるクーポン1万円分
、
BASEロゴ非表示Appの無償化(月額500円)
の特典が受けられます!
申請はこちらから▼
BOLD.を実際に適用したデモサイトです。
https://bolddot.base.ec/
無料でかんたんにネットショップを開設できるサービス「BASE」にまずはご登録ください。
登録後、「BASEデザインマーケット」から「BOLD.」のデザインテンプレートを購入することで使えるようになります。
デザインテンプレートを購入すると、BASE管理画面の「デザイン編集」=>「テーマの選択」からテーマを設定できるようになります。テーマを設定すると、デザインが適用され、備わっている機能が画面左のサイドメニューから設定できるようになります。
ONでロゴ画像、OFFでテキストロゴになります。
テキストロゴについては別項目でフォントや文字の大きさなど個別の設定が可能です。
ONにするとサイトの背景に画像を使用できます。
サイトの背景色を設定できます。
サイト全体で一括で変更できるオプションです。
サイト全体の配色を一括で変更できます。
シンプルな配色を13パターン用意しました。
テーマカラーの配色設定に含まれている背景色を強制的に設定させる項目です。
ONにすると背景設定が無視されテーマカラーに用意されている背景色が設定されます。
OFFにすると背景設定した画像や色、パターンが反映されます。
ONにすると重要なお知らせとして全ページサイトの最上部にバー形式でテキストとリンクを設置できます。
OFFにすると非表示になります。
重要なお知らせを表示する際の内容を設定できます。
ここに極端に長いテキストを入れると違和感が出るので、
1行程度で収まるように見出しだけにしておいて
BLOG Appなどに詳細な内容を掲載してリンクで飛ばすのがおすすめです。
重要なお知らせをクリックして飛ばすリンク先のURL。
空欄の場合はリンクになりません。
重要なお知らせのリンク先URLがある場合、ONにするとリンク先ページを別のウィンドウで新しく開きます。
OFFにすると同じウィンドウで開きます。
重要なお知らせの背景色を設定できます。
重要なお知らせの文字色を設定できます。
Blog Appを使用してブログ記事を書く時に「この記事を固定にする」にチェックと入れて投稿すると、
TOPページ最上部(重要なお知らせの下)にバー形式で記事へのリンクが表示されます。
そのタイトルの先頭に「NEW」「HOT TOPICS」など任意のテキストでタグを先頭に付けることができます。
空欄の場合は非表示になります。
ブログ固定記事の背景色を設定できます。
ブログ固定記事の文字色を設定できます。
ロゴの表示を「デフォルト」、「横長」、「縦長」、「正方形」の4つから選んで設定できます。
ロゴ画像の形によって選択肢を変更することでサイトになじませることができます。
テキストロゴの場合は無効です。
ロゴに背景色を付けたい場合にONにします。
OFFにすると背景色は非表示になります。
ONにするとロゴを左上固定配置ではなく、コンテンツの最上部中央に表示します。
デフォルトの左上配置では収まりきらない長文テキストロゴや、サイズの大きいロゴを使用したい場合におすすめです。
テキストロゴの場合のスマホ表示時の文字サイズを5段階で設定できます。
テキストロゴの場合のPC表示時の文字サイズを5段階で設定できます。
ONにするとスマホ表示の際にヘッダーを画面に追従させます。
OFFにすると追従しなくなります。
PC表示時は必ず追従します。OFFにはできません
カテゴリ管理App利用時にPC表示の際、画面左側に固定表示される「CATEGORY」というメニューの設定。
カテゴリ管理App利用時にPC表示の際、画面左側に固定表示される「CATEGORY」というメニューを表示するかどうかを設定できます。
カテゴリーメニューはマウスポインタを載せるだけで開き、カテゴリー一覧のみをすぐ見れるようにしたメニューです。
メニュー内にもカテゴリーは表示されますので、必要なければOFFにして非表示にしてください。
PC表示時のみ
画面右上のMENUボタンを押すと表示されるメニューに関する設定。
メニュー内に任意のリンクを3つまで追加できます。
そのリンク先のテキストを設定できます。
リンクURLとリンクテキスト両方が設定されていないと表示されません
メニュー内に任意のリンクを3つまで追加できます。
そのリンク先URLを設定できます。
リンクURLとリンクテキスト両方が設定されていないと表示されません
任意リンクのリンク先URLがある場合、
ONにするとリンク先ページを別のウィンドウで新しく開きます。
OFFにすると同じウィンドウで開きます。
メニュー内のSNSアイコンの表示を切り替えられます。
ONにすると表示、
OFFにすると非表示になります。
フッターのSNSアイコンの表示を切り替えられます。
ONにすると表示、
OFFにすると非表示になります。
TOPページにYouTube動画、もしくはスライドを最大3枚設定できます。
ONにするとTOPページ上部メインビジュアル部分にYouTube動画を設置できます。
OFFにすると非表示になります。
動画は自動再生、ループ再生になっています。
※音声は出ません。あくまでも背景として流しておくようなビジュアル表現としてお使いください。
YouTube動画表示をONにした場合、スライドは表示されません。
スライドを表示したい場合は必ずこの設定をOFFにしてください。
メインビジュアル部分で動画を無音で自動再生・無限ループさせます。
商品の仕様を印象的に伝えたい場合に使える機能となります。
静止画より動画の方がユーザーの興味や注意を引き付ける効果があります。
アニメーションを使えば、親しみやすい印象に、
実写を使えば、より商品やブランドイメージを強く印象付けられます。
YouTube動画のページのURL、もしくは動画ページの「共有」で表示されるURLを貼り付けることで動画を表示させることができます。
動画上に見出しや説明を付けたりリンクボタンを付けることも可能です。
※ 動画上に見出しを設定した場合、動画は背景動画として扱われるため、フルサイズで表示されません。
※ 動画上に見出しを設定しない場合はフルサイズで表示されます。
※ ここではあくまでもデザインの一つとして動画を使うことを目的としている機能のため無音再生となります。
音声の入ったYouTube動画を埋め込みたい場合は、Aboutページで埋め込み可能です。
ONにするとTOPページ上部にスライドを表示できます。
OFFにすると非表示になります。
スライドを表示したい場合は必ず「 【TOPページ:メインビジュアル】YouTube動画を表示」をOFFにしてください。
ページを表示してスライドが表示される際のアニメーションを
ON・OFFで切り替えられます。
ONにするとアニメーションあり、
OFFにするとアニメーションなしになります。
スライド切り替え時のエフェクト(アニメーション)を変更できます。
「デフォルト」、「fade」、「slide」、「coverflow」、「flip」
の5種類から設定できます。
スライドが切り替わるタイミングを調整できます。
デフォルトは8秒で3〜10秒を設定できます。
PC表示時にスライドに表示する画像を設定します。
推奨サイズは横2640×縦1480(px)。
PC画像は必須です。スマホ画像のみでは表示されません。
見出しやテキストの量が多くなり画像の縦サイズを超えるような場合は画像が引き延ばされます
テキスト量に合わせて縦サイズは調整が必要になる場合があります
スマホ表示時にスライドに表示する画像を設定します。
推奨サイズは横690×縦1040(px)。
PC画像が必須です。スマホ画像のみでは表示されません。
見出しやテキストの量が多くなり画像の縦サイズを超えるような場合は画像が引き延ばされます
テキスト量に合わせて縦サイズは調整が必要になる場合があります
スライド画像の上に見出しを設定できます。
文字が長すぎると画像が隠れてしまいますので、
あくまでも装飾程度でお使いください。
デモサイトのように短いキャッチコピーで1〜2行に収めることがおすすめです。
見出しやテキストをスライド画像上に配置する場合は、PC画像・スマホ画像をそれぞれ推奨サイズで設定することをおすすめします
見出しのフォントを英語用と日本語用で設定できます。
見出しを日本語にする場合は日本語用フォントを、
英語にする場合は英語用フォントをお使いください。
見出しの文字サイズを3段階で調整できます。
見出しの下に説明分を付けることができます。
見出しが無い場合は非表示になります。
あくまでも装飾オプションの一貫ですので、適度な量に調整してお使いください。
デモサイトのように画像の邪魔にならないように3〜4行に収めることがおすすめです。
見出しやテキストをスライド画像上に配置する場合は、PC画像・スマホ画像をそれぞれ推奨サイズで設定することをおすすめします
リンク先URLがあり、見出しが設定されている場合に限り「VIEW MORE」と書かれたリンクボタンを表示することができます。VIEW MOREボタンが表示されている時はボタンがリンクに、非表示の時はスライド全体がリンクになります。ONにすると表示、OFFにすると非表示になります。
各スライドにリンクを設定できます。
空欄の場合はリンクは付きません。
任意リンクのリンク先URLがある場合、ONにするとリンク先ページを別のウィンドウで新しく開きます。
OFFにすると同じウィンドウで開きます。
スライドの見出しと説明の文字色を変更できます。
スライドのVIEW MOREボタンの文字色を変更できます。
スライドのVIEW MOREボタンの背景色を変更できます。
TOPページにバナーを最大4枚設定できます。
ONにすると表示、
OFFにすると非表示になります。
PC表示時に表示する画像を設定します。
推奨サイズは横660×縦495(px)。
PC画像は必須です。スマホ画像のみでは表示されません。
スマホ表示時に表示する画像を設定します。
推奨サイズは横346×縦260(px)。
PC画像が必須です。スマホ画像のみでは表示されません。
画像が表示されなかった場合に画像の説明として使われる代替テキスト(alt)を設定できます。
直接ページに表示されませんが、コード上で使われます。
各バナーにリンクを設定できます。
空欄の場合はリンクは付きません。
バナーのリンク先URLがある場合、ONにするとリンク先ページを別のウィンドウで新しく開きます。
OFFにすると同じウィンドウで開きます。
TOPページにABOUTページへの導線コンテンツを設置できます。
ONにすると表示、OFFにすると非表示になります。
PC表示時に表示する画像を設定します。
推奨サイズは横1340×縦1787(px)。
PC画像は必須です。スマホ画像のみでは表示されません。
スマホ表示時に表示する画像を設定します。
推奨サイズは横600×縦800(px)。
PC画像が必須です。スマホ画像のみでは表示されません。
コンテンツの見出しを設定できます。
空欄の場合は表示されません。
文字量としては最大2行程度がおすすめです。
コンテンツの見出しの下に付く概要説明を設定できます。
空欄の場合は表示されません。
ABOUTページに繋がるページ概要文としてお使いください。
文字量としてはあまりここでダラダラ説明すると他のコンテンツの邪魔になるので、スマホで見た時に10行以内に収まるぐらいがおすすめです。
ピックアップ商品をスライド形式で最大6件まで追加できます。
ONにすると表示、
OFFにすると非表示になります。
画像の表示形式を設定できます。
画像の高さをきっちり揃えたい場合に使えます。
PC表示時に表示する画像を設定します。
推奨サイズは横820×縦1120(px)。
PC画像は必須です。スマホ画像のみでは表示されません。
スマホ表示時に表示する画像を設定します。
推奨サイズは横520×縦692(px)。
PC画像が必須です。スマホ画像のみでは表示されません。
画像下に見出し・商品名を表示できます。
空欄の場合は非表示になります。
PC画像が必須です。PC画像が設定されていない場合は表示されません
商品価格を表示できます。
空欄の場合は非表示になります。
PC画像が必須です。PC画像が設定されていない場合は表示されません
商品価格の右側に10%OFFなどのタグを表示できます。
空欄の場合は非表示になります。
PC画像が必須です。PC画像が設定されていない場合は表示されません
商品の簡単な説明を掲載できます。
テキストが長すぎるとバランスが悪くなるので、5〜6行ぐらいの適量に調整してください。
他のPICK UP商品とできるだけ同じぐらいの高さになるように揃えるのがおすすめです。
PC画像が必須です。PC画像が設定されていない場合は表示されません
各ピックアップにリンクを設定できます。
空欄の場合はリンクは付きません。
PC画像が必須です。PC画像が設定されていない場合は表示されません
ピックアップにリンク先URLがある場合、
ONにするとリンク先ページを別のウィンドウで新しく開きます。
OFFにすると同じウィンドウで開きます。
ONにするとVIEW MOREボタンを表示、
OFFにすると非表示になります。
PC画像が必須です。PC画像が設定されていない場合は表示されません
商品一覧で設定できる項目について
画像の表示形式を設定できます。
画像の高さをきっちり揃えたい場合に使えます。
BLOG App利用時にTOPページに新着ブログを最大8件まで表示できます。
ONにすると表示、
OFFにすると非表示になります。
TOPページに表示する新着ブログの最大記事数を4、8、12から選べます。
画像の表示形式を設定できます。
画像の高さをきっちり揃えたい場合に使えます。
TOPページにお知らせを表示できるエリアです。
最大5件まで表示できます。
ONにすると表示、
OFFにすると非表示になります。
お知らせを更新した日時を入れることができます。
空欄の場合は表示されません。
お知らせの詳細です。
空欄の場合は表示されません。
リンクを付ける場合のURL。
空欄の場合はリンクになりません。
リンク先URLがある場合、
ONにすると別のウィンドウで新しく開きます。
OFFにすると同じウィンドウで開きます。
TOPページのコンテンツを任意の順番に並び替えることができます。
並び替えられるのは「バナー」「ABOUT」「PICK UP」「PRODUCTS」「BLOG」「NEWS」の6つ。
デフォルトでは以下の順になっています。
それぞれのエリアで1~6まで数値を選ぶことができますが、
1が最上、6が最下の優先順位で並び替えられます。
同じ数値同士の場合はデフォルトの順番が適用されます。
例えば、バナーを6、NEWSを2、他の4つをすべて1にしている場合は以下のようになります。
このようになると少しややこしくなるので、順番を変更したい場合はすべてのエリアに数値が被らないように1~6まで設定することをオススメします。
CTAとは「Call To Action」の略で、日本語で言えば「行動換気」という意味になります。
このエリアはユーザーを目的とする行動やページへの誘導・導線としてお使いいただけます。
デモサイトでは公式サイトに誘導する導線として使っています。
ONにすると表示、
OFFにすると非表示になります。
PC表示時に表示する画像を設定します。
推奨サイズは横2640×縦1200(px)。
PC画像は必須です。スマホ画像のみでは表示されません。
スマホ表示時に表示する画像を設定します。
推奨サイズは横690×縦600(px)。
PC画像が必須です。スマホ画像のみでは表示されません。
ユーザーを誘導したいページや行動へのキャッチコピーとしてお使いください。
デモサイトの場合は公式サイトに誘導したいので「OFFICIAL WEBSITE」としています。
見出しが日本語の場合は日本語用、
英語の場合は英語用をお使いください。
見出しに補足説明を付ける場合にご利用ください。
誘導したいページのURLを設定することでボタンが表示されます。
空欄の場合はボタンが表示されません。
リンク先URLがある場合、
ONにすると別のウィンドウで新しく開きます。
OFFにすると同じウィンドウで開きます。
リンクを付ける場合にボタンの文字内容を設定できます。
ボタンテキストが日本語の場合は日本語用、
英語の場合は英語用をお使いください。
CTAエリアの文字サイズを5段階で変更できます。
背景色を変更できます。 画像を使わない無い場合に表示できます。
見出しと説明の文字色を変更できます。
リンクがある場合にボタンの背景色を変更できます。
リンクがある場合にボタンの文字色を変更できます。
メールマガジンAppをインストールしている場合、登録フォームをフッターのすぐ上に設置します。
メールマガジンAppをインストールしている場合、
NEWSLETTERという見出しの下に説明文を追加できます。
デフォルトは「新商品やキャンペーンなどの最新情報をお届けいたします。」という文言になっています。
※見出しの「NEWSLETTER」の文言は変更できません
ONにすると表示、
OFFにすると非表示になります。
PC表示時に表示する画像を設定します。
推奨サイズは横2640×縦1200(px)。
PC画像は必須です。スマホ画像のみでは表示されません。
スマホ表示時に表示する画像を設定します。
推奨サイズは横690×縦460(px)。
PC画像が必須です。スマホ画像のみでは表示されません。
ONにするとショップ説明を表示、
OFFにすると非表示にします。
ショップ説明はBASE管理画面のショップ設定から入力・変更できます
テーマ編集画面ではなく、BASE管理画面の「ショップ設定」から変更できます。
ショップ設定→ショップ情報→ショップの説明に設定した内容が反映されます。
ショップ説明に付く見出しを変更できます。
空欄の場合は『{ショップ名}について』となります。
ABOUTページにYouTube動画を1つ埋め込むことができます。
ONにするとYouTube動画の表示エリアを表示、
OFFにすると非表示になります。
該当のYouTube動画から、「共有」→「埋め込む」で表示される埋め込みコードをコピーします。(ポップアップ右下の「コピー」でクリップボードにコピーできます)その埋め込みコードをそのまま貼り付けることで表示できます。
ONにするとショップの住所などを掲載できるAccessエリアを表示、
OFFにすると非表示にします。
Accessに表示する住所情報を設定できます。
店舗の公式ページなど何か情報として掲載しておきたいリンクURLがある場合に1つリンクを設定できます。
任意リンクがある場合、
ONにするとリンク先ページを別のウィンドウで新しく開きます。
OFFにすると同じウィンドウでリンクを開きます。
ABOUTページにFAQ(よくある質問)を最大10件表示できます。
ONにすると表示、
OFFにすると非表示になります。
表示する場合はメニューにも追加されます。
質問内容を設定できます。
質問内容がなく、答えしかない場合はその番号の質問欄は表示されません。
質問内容に対する答えを設定できます。
商品ページ、商品説明の上にフリーテキストとして設定できます。
商品ごとに個別にではなく一括ですべての商品ページに設定できるので、注意事項や今だけ使えるクーポンコード、キャンペーンについてなどすべての商品で購入の際に伝えておきたい内容を掲載することができます。
商品ページ「カートに入れる」ボタンの背景色を変更できます。
商品ページ「カートに入れる」ボタンの文字色を変更できます。
BASEの機能で、商品詳細ページに関連商品が自動で3つ表示されるようになっています。
商品のアルゴリズムや表示する件数などはこちらでは変更できませんが、表示・非表示ができます。
ONにすると表示、OFFにすると非表示になります。
テーマで調整できるのは関連商品の表示・非表示のみです。関連商品の並びや表示件数、表示される条件など表示・非表示以外の内容についてはテーマで制御できませんのでBASEにお問い合わせをお願いします。
このテーマにはスクロール時にふわっとコンテンツを表示させるアニメーションが適用されていますが、任意で変更できます。
ONにするとアニメーションあり、OFFにするとアニメーションなしになります。
CSSの知識がある方はこちらに追記することでデザインのカスタマイズが可能です。
BASE Appsはショップに便利な機能を追加できる機能です。
テーマに影響のあるAppsの中で下記のAppsに対応しています。
必要なものを管理画面からインストールしてお使いください。
※デフォルトで使えるわけではありませんので必ず管理画面からインストールしてください。
TOPページのお問い合わせフォームよりご連絡をお願いいたします。
※ご要望の内容によっては対応できない場合もございます。
※HTML編集Appでの個別のカスタマイズ要望については有料・無料に関わらず一律でお断りしております。個人的なカスタマイズ要望でなく、「新しいAppsに対応して欲しい」「こんな機能があったら嬉しい」などのテーマをご利用いただいている皆さま全体に関わるアップデートや修正要望にはできるだけお応えいたします。
※HTML編集Appでのカスタマイズについては自己責任でお願いします。購入したテーマを元にHTML編集Appでカスタマイズしている場合は、元のテーマに不具合があったとしても個別の修正等のご要望をお断りしております。
※テーマの使い方を直接レクチャーしたり、テーマのソースコードについて教えるといったサポートサービスは行なっていませんのでご理解のほどよろしくお願いいたします。
※不具合の修正についてはなるべく早く対応しますが、修正対応に加えBASEの審査があるため数日〜1週間以上かかる場合がございます。また、BASEの審査が不合格となり再修正・再審査の期間がさらに必要になる場合もございます。手元で修正できてもすべてのお客様のテーマに反映されるまでの期間が流動的になってしまうため具体的にいつまでに修正しますという日程のお約束は控えさせていただいております。ただ基本的には手元での修正は大きなものではない限りは1週間以内には対応して申請するようにしております。
※テーマの使い方に記載のない機能はこのテーマに備わっておりません。ご質問の前にご確認ください。
※テーマの機能やデザインは予告なく変更・除外する場合がございます。
※FROMOは法人や組織活動ではなく余暇時間を使った個人活動となります。平日日中はWebエンジニアとして制作会社に勤務しておりますので、返信が遅くなる可能性がございます。ご理解のほどよろしくお願いいたします。
まず、HTML編集Appを使って独自でhtmlを編集しているかどうかをご確認ください。
編集している場合はそれが原因でアップデートが止まっている可能性があります。
アップデートが止まっている場合は、その後の修正や機能追加、新しいAppsの対応などが反映されません。このページに書いてある情報は最新のテーマについての内容になりますので、編集されたテーマをお使いの方は参考にされてもその通りにならない可能性がございます。
「HTML編集App」で1文字でも変更したテーマは、カスタムテーマとなり、公式テーマとは別テーマ扱いになります。公式テーマは各所の修正やアップデートが自動的に反映されますが、カスタムテーマはカスタムした時点のバージョンのままで固定されます。たまに「テーマの説明に新しいAppsに対応したと書いてあるのに反映されない」といったお声をいただきますが、ほぼほぼのショップ様が「HTML編集App」でカスタマイズされているのが原因となっています。
尚、カスタムテーマの個別対応はできません。
不具合についてお問い合わせいただいても公式テーマについては対応しますが、カスタムテーマの対応はお断りいたしますのでご理解のほどよろしくお願いいたします。