cover image
🔔

お知らせバナーAppを利用する

お知らせバナーAppとは?

「お知らせバナー App」は、ショップページの上部にお知らせを表示することができるBASEの拡張機能です。2021/12/16から利用できるようになりました。
詳しくはこちらをご覧ください。
notion image
 

ご利用方法

おみせコネクトをご利用中の皆さまは、HTML編集Appをインストールされていますが、この場合、お知らせバナーAppのご利用方法が通常と異なります。
⚠️
有料テーマをお使いの場合、下記方法を実施するとデザインが崩れる場合があります。その場合はテーマ作成者にお問い合わせください。

お知らせバナーAppをインストールする

必ずPCから BASEの管理画面にログインしてください。
こちらからお知らせバナーAppをインストールします。

HTML編集Appにコードをコピーする

HTML編集Appを開き、設定中のテーマのエディタアイコンをクリックします。
エディタアイコンをクリック
エディタアイコンをクリック
テーマの編集ページで <body という文字を検索します(1箇所しかありません)。
エディタ(コードが書かれた黒背景の部分)をクリックし、カーソルが点滅している状態で、windowsの場合はコントロール+Fを、macの場合はコマンド+Fを押すと、画像のようにエディタに検索窓が出現します。ここに <body を入力し、エンターを押すと検索ができます。
検索窓に <body を入力
検索窓に <body を入力
<bodyが見つかったら、その直後に下記コードをコピーしてください。
{block:AppsInformationBanner}
    {AppsInformationBannerTag}
{/block:AppsInformationBanner}
Plain Text
コードをコピーしたイメージ
コードをコピーしたイメージ
コピーできたら、保存して編集を終了します。
「現在ご利用中のテーマです。変更内容をショップページに反映しますか?」と出てきた場合は「はい」を選択してください。

デザインパーツを編集する

BASEの管理画面から「デザイン」のメニューを選択します。
デザイン編集ページの右下に「お知らせバナー」の項目が追加されているのでクリックします。
notion image
 
お知らせするテキストやリンク、アイコンなどを設定するフォームが出てきますので内容を入力し、保存します。
notion image
 
ショップにお知らせが表示されました!以上で設定完了です🎉
notion image

カートボタンや英語・外貨対応Appが被る時

下の図のように、カートボタンや英語・外貨対応Appがお知らせバナーに被る場合は、HTML編集でコードを変更します。
notion image
⚠️
有料テーマをお使いの場合や、ご自身でHTMLをカスタマイズしている場合は下記方法では上手くいかない場合があります。
HTML編集Appに行き、エディタを開きます。
次に #i18 { という文字を検索します。
その下に書かれている top: 10px という部分を top: 66px に変更します(数字を10→66に変更します)。
notion image
notion image
次に #baseMenu { という文字を検索します。
その下に書かれている top: 5px という部分を top: 61px に変更します(数字を5→61に変更します)。
notion image
notion image
完了したらテーマを保存し、エディタの編集を終了します。
これでボタンが被らなくなりました🎉
notion image