FROMOはBASEオフィシャルパートナーです。
パートナープログラムの一環として、当サイトを通して新規のBASEショップを立ち上げると、
ショップの購入者様が利用できるクーポン1万円分、
BASEロゴ非表示Appの無償化(月額500円)の特典が受けられます!
申請はこちらから▼
fit.を実際に適用したデモサイトです。
https://fitdot.base.ec/
無料でかんたんにネットショップを開設できるサービス「BASE」にまずはご登録ください。
登録後、「BASEデザインマーケット」から「fit.」のデザインテンプレートを購入することで使えるようになります。
デザインテンプレートを購入すると、BASE管理画面の「デザイン編集」=>「テーマの選択」からテーマを設定できるようになります。テーマを設定すると、デザインが適用され、備わっている機能が画面左のサイドメニューから設定できるようになります。
ONでロゴ画像、OFFでテキストロゴになります。
テキストロゴについては別項目でフォントや文字の大きさなど個別の設定が可能です。
ONにするとサイトの背景に画像を使用できます。
サイトの背景色を設定できます。
サイト全体で一括で変更できるオプションです。
サイト全体の文字色を一括で変更できます。
これで変わらない部分は、ほとんどの場合、個別に設定できる別項目があります。
サイト全体のテキストリンクの色を一括で設定できます。
ショップ情報やブログ記事などの平文の中のリンクです。
サイト全体でポイントとして使われている、割引価格やセールタグの文字色、お問い合わせフォームの必須タグの背景色などを一括で変更できます。割引価格やセールタグなどは別項目で個別に設定できます。
ポイントカラーを変更して背景色が変わった要素の文字色が同化して見えにくい場合にこちらで調整してください。
「VIEW MORE」のボタンや、お問い合わせフォームの送信ボタン、商品詳細ページの購入ボタンなど、ボタンの背景色を変更できます。
※マウスホバーの色は背景「白」、文字色「黒」の固定になります
ボタンカラーを変更して背景色が変わった要素の文字色が同化して見えにくい場合にこちらで調整してください。
基本設定でロゴ画像を使用するをOFFにしてテキストロゴを使う場合にカスタマイズできます。
※改行されてしまう場合はヘッダーの追従機能は使用しないでください。
約30種類のフォントからテキストロゴに使うフォントを選ぶことができます。
※日本語の場合は「Noto Sans JP」「Noto Serif JP」「M PLUS Rounded 1c」の3種類のみ
スマホ表示の場合のテキストロゴのサイズを1~5段階で設定できます。
PC表示の場合のテキストロゴのサイズを1~5段階で設定できます。
約30種類のフォントからテキストロゴに使うフォントを選ぶことができます。
※日本語の場合は「Noto Sans JP」「Noto Serif JP」「M PLUS Rounded 1c」の3種類のみ
テキスト全体のフォントサイズを3段階で調整できます。
デフォルト<ミディアム<ラージの順番です。
サイトの各所に出てくる見出しのフォントを個別に設定できます。
約30種類のフォントからテキストロゴに使うフォントを選ぶことができます。
※日本語の場合は「Noto Sans JP」「Noto Serif JP」「M PLUS Rounded 1c」の3種類のみ
ONにするとスクロール時にヘッダーを画面上部に固定してスクロールに追従させます。
※テキストロゴが改行されてしまう場合は使用しないでください。
ONにするとヘッダーを追従させる際に、背景色を付けることができます。
サイトによってはヘッダーに置くロゴの視認性を高めたい、デザインとして色を入れたいといった場合があると思いますので必要であればお使いください。
ブラー効果(ぼかし)は視認性を保つためにデフォルトで入っています。
ヘッダーを追従させて背景を付ける場合の色を設定できます。
デフォルトは白です。
ブラー効果(ぼかし)は視認性を保つためにデフォルトで入っています。
ヘッダーを追従させて背景を付けた際の背景色を透過できます。
0 ~ 100%で透過率を指定すると背景を透けた感じにできます。
ブラー効果(ぼかし)は視認性を保つためにデフォルトで入っています。
ONにするとBASEリンク、カート、メニューボタンに白背景を付けることができます。
BASEの仕様でBASEリンクとカートのアイコン画像の色が変更できないため、全体的に黒っぽいサイトカラーの場合は視認性を保つために設定することをおすすめします
BASEリンク、カート、メニューボタンの背景の形を円・角丸・四角の3つの中から設定できます。
ONにすると表示、OFFにすると非表示になります。
ONにするとキャンペーンバナーに任意の画像を使います。
OFFにすると画像は使わず、任意のテキストを入力して各項目を調整します。
画像を使う場合にスマホ表示用の画像を設定できます。
推奨サイズは横750 × 縦90(px)
スマホ用画像しか設定しない場合はスマホもPCもどちらもスマホ用画像が適用されます。
画像を使う場合にPC表示用の画像を設定できます。
推奨サイズは横1440 × 縦75(px)
PC用画像しか設定しない場合はスマホもPCもどちらもPC用画像が適用されます。
画像を使わない場合は任意のキャッチコピーをテキスト入力で設定できます。
キャンペーンバナー全体の背景色を設定できます。
画像を使わない場合に設定するキャッチきぴーの文字色を設定できます。
キャッチコピーに使うフォントを選ぶことができます。
約30種類のフォントからテキストロゴに使うフォントを選ぶことができます。
※日本語の場合は「Noto Sans JP」「Noto Serif JP」「M PLUS Rounded 1c」の3種類のみ
PC表示の際のキャッチコピーの文字サイズを1 ~ 5段階で設定できます。
スマホ表示の際のキャッチコピーの文字サイズを1 ~ 5段階で設定できます。
バナーにリンクを付けたい場合にURLを入力します。
空欄の場合はリンクなしになります。
リンク先URLがある場合、ONにすると別のウィンドウで新しく開きます。OFFにすると同じウィンドウで開きます。
サイト右上のハンバーガーボタンを押して開くメニューのことです。
メニュー全体の背景色を変更できます。
メニュー内の文字色を変更できます。
PC表示の時にメニューのリンクにマウスを乗せた時に変化する色を変更できます。
BASE管理画面上でSNSのリンクを設定している場合に表示されるSNSアイコン一覧をONで表示・OFFで非表示にできます。
TOPページ最上部、ヘッダーの下にメインビジュアルとしてスライドを設定できます。
最大4枚まで設定できます。
画像が1枚の場合はスライドしません。
ONにするとスライドを表示させます。
OFFにすると非表示になります。
Blog Appを使用してブログ記事を書く時に「この記事を固定にする」にチェックと入れて投稿すると、TOPページのメイン画像の上に記事の記事のタイトルが表示されます。(メイン画像がない場合は最上部)
固定記事の背景色を変更できます。
※マウスオンカラーは変更できません。
固定記事の文字色を変更できます。
※マウスオンカラーは変更できません。
TOPページにバナーを最大4枚まで掲載できます。
バナーエリアの背景色を変更できます。
個別にアピールしたい商品やページを掲載できるエリアです。
最大3つまで追加できます。
ONにすると表示、OFFにすると非表示になります。
ピックアップのレイアウトを変更できます。
各ピックアップのコンテンツがスマホ表示になると、画像に少しかかるようなデザインになりますが、その背景色を変更できます。
スマホ表示でコンテンツ背景色を変更した際に文字が見えにくくなる場合がありますが、こちらで文字色を変更できます。
スマホ表示でコンテンツ背景色を変更した際にボタンの色味が見えにくくなる場合がありますが、こちらで背景色を変更できます。
スマホ表示でボタン背景色を変更した際にボタンの文字が見えにくくなる場合がありますが、こちらで文字色を変更できます。
ONにすると表示、OFFにすると非表示になります。
商品画像の推奨サイズは横1600 × 縦1200(px)です。
※必ずしも推奨サイズに合わせる必要はありませんが、商品画像はなるべくサイズを揃えた方がサイト上で見た目がバラバラにならないのでサイズは決めておくことをおすすめします。
各商品一覧・商品詳細ページで品切れの場合に表示されるタグの色を個別に設定できます。
空欄の場合は「ポイントカラー」「ポイントテキストカラー」が適用されます。
各商品一覧・商品詳細ページで販売期間設定Appを使っている場合に販売期間前に表示されるタグの色を個別に設定できます。
空欄の場合は「ポイントカラー」「ポイントテキストカラー」が適用されます。
予約販売Appを使っている場合に表示されるタグの色を個別に設定できます。
空欄の場合は「ポイントカラー」「ポイントテキストカラー」が適用されます。
テイクアウトAppを使っている場合に表示されるタグの色を個別に設定できます。
空欄の場合は「ポイントカラー」「ポイントテキストカラー」が適用されます。
抽選販売Appを使っている場合に表示されるタグの色を個別に設定できます。
空欄の場合は「ポイントカラー」「ポイントテキストカラー」が適用されます。
コミュニティAppで会員限定商品を設定している場合に表示されるタグの色を個別に設定できます。
空欄の場合は「ポイントカラー」「ポイントテキストカラー」が適用されます。
TOPページにお知らせを表示できるエリアです。最大5件まで表示できます。
ONにすると表示、OFFにすると非表示になります。
BlogAppを利用する際にTOPページにブログ記事のリストを表示できます。
ONにすると表示、OFFにすると非表示になります。
表示する記事数を最大4件か8件のどちらかを選択できます。
ブログ画像の推奨サイズは横800 × 縦600(px)以上です。
CTAとは「Call To Action」の略で、日本語で言えば「行動換気」という意味になります。
このエリアはユーザーを目的とする行動やページへの誘導・導線としてお使いいただけます。
デモサイトでは公式サイトに誘導する導線として使っています。
ONにすると表示、OFFにすると非表示になります。
CTAエリアの背景に使う画像を設定できます。
枠がすべて埋まるように自動でトリミングされる仕様です。
こちらはあくまで背景として利用する前提ですので、画像に重要な文字情報なども含めて掲載すると、途切れたり前面の要素と被ってしまったりします。できるだけシンプルな画像をおすすめします。
推奨サイズは横2880 × 縦1200(px)です。
ユーザーを誘導したいページや行動へのキャッチコピーとしてお使いください。
デモサイトの場合は公式サイトに誘導したいので「OFFICIAL WEBSITE」としています。
見出し 補足説明を付ける場合にご利用ください。
リンクを付ける場合にボタンの文字内容を設定できます。
誘導したいページのURLを設定することでボタンが表示されます。空欄の場合はボタンが表示されません。
リンク先URLがある場合、ONにすると別のウィンドウで新しく開きます。
OFFにすると同じウィンドウで開きます。
CTAエリアのコンテンツを囲むように枠線を表示します。
お好みで表示・非表示を切り替えられます。
自動的に文字色と同じ色の線になります。(個別の色設定はできません)
画像を使わない場合の背景色を設定できます。
コンテンツの文字色を設定できます。
枠線を表示する設定をしている場合は枠線も同じ色になります。
※マウスオン時の色は固定です。
TOPページのコンテンツを任意の順番に並び替えることができます。(ヘッダー・フッター・メインビジュアルを覗く) デフォルトでは以下の順になっています。
それぞれのエリアで1~6まで数値を選ぶことができますが、1が最上、6が最下の優先順位で並び替えられます。
同じ数値同士の場合はデフォルトの順番が適用されます。
例えば、バナーを6、CTAを2、他の4つをすべて1にしている場合は以下のようになります。
このようになると少しややこしくなるので、順番を変更したい場合はすべてのエリアに数値が被らないように1~6まで設定することをオススメします。
メールマガジンAppをインストールしている場合、フッターのすぐ上に登録フォームが表示されます。 見出しは「NEWSLETTER」となります。 ※見出しの文字を変更する機能はございません。
メールマガジン登録フォームを囲むように枠線を表示します。
お好みで表示・非表示を切り替えられます。
自動的に文字色と同じ色の線になります。(個別の色設定はできません)
メールマガジン登録フォームの背景色を設定できます。
説明文の文字色を設定できます。
※文字入力エリアの色は背景白・テキスト黒から変更できません。
枠線を表示する設定をしている場合は枠線も同じ色になります。
※マウスオン時の色は固定です。
ABOUTページの最上部にメイン画像を表示させます。
ONにすると表示、OFFにすると非表示になります。
ABOUTページのメイン画像として表示させたい画像をアップロードできます。
画像の推奨サイズは横2880 × 縦960(px)です。
メイン画像がある場合はその上にコンテンツが少しかかるようなデザインになるため、そのコンテンツ部分の背景を設定できます。
シンプルにまとめるためには全体の背景色と合わせるのがオススメです。
「コンテンツ背景色」を設定して文字がみえにくくなった場合にこちらで文字色も調整可能です。
ショップのコンセプトを見出しと説明文で掲載できます。
ONにすると表示、OFFにすると非表示になります。
ショップコンセプトの見出しを設定できます。
短文でわかりやすいキャッチコピーのようなものを設定すると良いと思います。
ショップコンセプトの見出しに対して詳細説明を付けられます。
コンセプトエリアの直下に「SHOP INFO」という見出しで表示されるエリアは、 テーマ編集画面ではなく、BASE管理画面の「ショップ設定」から変更できます。 ショップ設定→ショップ情報→ショップの説明に設定した内容が反映されます。
※このテーマではSHOP INFOを非表示にする機能はございません。
※「SHOP INFO」という見出しの変更はできません。
ショップについてのYouTube動画を掲載できます。
ONにすると表示、OFFにすると非表示になります。
該当のYouTube動画から、「共有」→「埋め込む」で表示される「<iframe ~」で始まる埋め込みコードをコピーします。(ポップアップ右下の「コピー」でクリップボードにコピーできます)
その埋め込みコードをそのまま貼り付けることで表示できます。
よくある質問を最大10問まで掲載できます。
質問内容を設定できます。
質問内容がなく、答えしかない場合はその番号の質問欄は表示されません。
質問内容に対する回答を設定できます。
商品説明の上にフリーテキストとして設定できます。
商品ごとに個別にではなく一括ですべての商品ページに設定できるので、注意事項や今だけ使えるクーポンコード、キャンペーンについてなどすべての商品で購入の際に伝えておきたい内容を掲載することができます。
BASEの機能で、商品詳細ページに関連商品が自動で3つ表示されるようになっています。
商品のアルゴリズムや表示する件数などはこちらでは変更できませんが、表示・非表示やデザイン上の細かな設定が少しだけできます。
ONにすると表示、OFFにすると非表示になります。 テーマで調整できるのは関連商品の表示・非表示のみです。関連商品の並びや表示件数、表示される条件など表示・非表示以外の内容についてはテーマで制御できませんのでBASEにお問い合わせをお願いします。
このテーマにはスクロール時にふわっとコンテンツを表示させるアニメーションが適用されていますが、任意で変更できます。
ONにするとアニメーションあり、OFFにするとアニメーションなしになります。
CSSの知識がある方はこちらに追記することでデザインのカスタマイズが可能です。
BASE Appsはショップに便利な機能を追加できる機能です。
「fit.」ではテーマ内で使えるものの中で下記のAppsに対応しています。
必要なものを管理画面からインストールしてお使いください。
※デフォルトで使えるわけではありませんので必ず管理画面からインストールしてください。
※英語・外貨対応Appについては今のところ対応予定はありません。
TOPページのお問い合わせフォームよりご連絡をお願いいたします。
※ご要望の内容によっては対応できない場合もございます。
※HTML編集Appでの個別のカスタマイズ要望については有料・無料に関わらず一律でお断りしております。個人的なカスタマイズ要望でなく、「新しいAppsに対応して欲しい」「こんな機能があったら嬉しい」などのテーマをご利用いただいている皆さま全体に関わるアップデートや修正要望にはできるだけお応えいたします。
※HTML編集Appでのカスタマイズについては自己責任でお願いします。購入したテーマを元にHTML編集Appでカスタマイズしている場合は、元のテーマに不具合があったとしても個別の修正等のご要望をお断りしております。
※テーマの使い方を直接レクチャーしたり、テーマのソースコードについて教えるといったサポートサービスは行なっていませんのでご理解のほどよろしくお願いいたします。
※不具合の修正についてはなるべく早く対応しますが、修正対応に加えBASEの審査があるため数日〜1週間以上かかる場合がございます。また、BASEの審査が不合格となり再修正・再審査の期間がさらに必要になる場合もございます。手元で修正できてもすべてのお客様のテーマに反映されるまでの期間が流動的になってしまうため具体的にいつまでに修正しますという日程のお約束は控えさせていただいております。ただ基本的には手元での修正は大きなものではない限りは1週間以内には対応して申請するようにしております。
※テーマの使い方に記載のない機能はこのテーマに備わっておりません。ご質問の前にご確認ください。
※テーマの機能やデザインは予告なく変更・除外する場合がございます。
※FROMOは法人や組織活動ではなく余暇時間を使った個人活動となります。平日日中はWebエンジニアとして制作会社に勤務しておりますので、返信が遅くなる可能性がございます。ご理解のほどよろしくお願いいたします。
まず、HTML編集Appを使って独自でhtmlを編集しているかどうかをご確認ください。
編集している場合はそれが原因でアップデートが止まっている可能性があります。
アップデートが止まっている場合は、その後の修正や機能追加、新しいAppsの対応などが反映されません。このページに書いてある情報は最新のテーマについての内容になりますので、編集されたテーマをお使いの方は参考にされてもその通りにならない可能性がございます。
「HTML編集App」で1文字でも変更したテーマは、カスタムテーマとなり、公式テーマとは別テーマ扱いになります。公式テーマは各所の修正やアップデートが自動的に反映されますが、カスタムテーマはカスタムした時点のバージョンのままで固定されます。たまに「テーマの説明に新しいAppsに対応したと書いてあるのに反映されない」といったお声をいただきますが、ほぼほぼのショップ様が「HTML編集App」でカスタマイズされているのが原因となっています。
尚、カスタムテーマの個別対応はできません。
不具合についてお問い合わせいただいても公式テーマについては対応しますが、カスタムテーマの対応はお断りいたしますのでご理解のほどよろしくお願いいたします。