📣
BASEのお知らせバナーAppを利用する
お知らせバナーAppとは?お知らせバナーAppをインストールする一般的なご利用方法有料テーマとHTML編集Appによるご利用方法HTML編集Appにコードをコピーするデザインパーツを編集するカートボタンや英語・外貨対応Appが被る時
お知らせバナーAppとは?
「お知らせバナー App」は、ショップページの上部にお知らせを表示することができるBASEの拡張機能です。2021/12/16から利用できるようになりました。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/886b56fd-d1d5-4704-ba44-52b5779f6673/97b36a039496e4e64184efda55564bfb.png)
お知らせバナーAppをインストールする
一般的なご利用方法
BASEの管理画面のデザインメニューでお知らせバナーを有効にしデザインをカスタマイズします。
リンク先には、おみせコネクト管理画面左メニューの「友だち追加URLの設定」から「友だち追加URL をコピーして使用します。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/4aba84ff-21da-4577-b077-24ad9110df56/1aa01caca36b7a3900a9893313acb052.png)
有料テーマとHTML編集Appによるご利用方法
有料テーマなどをご利用されているショップで、デザイン変更のためにHTML編集Appをインストールされている場合、お知らせバナーAppのご利用方法は若干難しくなります。
有料テーマをお使いの場合、下記方法を実施するとデザインが崩れる場合があります。その場合はテーマ作成者にお問い合わせください。
HTML編集Appにコードをコピーする
HTML編集Appを開き、設定中のテーマのエディタアイコンをクリックします。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/6ed1b9cb-977e-410e-b1d4-ec86777b7be3/db1d74984d2f932878cc1dd10859d455.png)
テーマの編集ページで という文字を検索します(1箇所しかありません)。
エディタ(コードが書かれた黒背景の部分)をクリックし、カーソルが点滅している状態で、windowsの場合はコントロール+Fを、macの場合はコマンド+Fを押すと、画像のようにエディタに検索窓が出現します。ここに を入力し、エンターを押すと検索ができます。
![検索窓に <body を入力](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/63caa265-4a38-4146-8240-98cf8cfaa900/32ac9bf1d402e3c47489c0c5cee27d3b.png)
が見つかったら、その直後に下記コードをコピーしてください。
![コードをコピーしたイメージ](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/9022b1e4-1cda-474a-bf5a-351164c9bf71/ba65d0b26342151551130e78ddf70ce6.png)
コピーできたら、保存して編集を終了します。
「現在ご利用中のテーマです。変更内容をショップページに反映しますか?」と出てきた場合は「はい」を選択してください。
デザインパーツを編集する
デザイン編集ページの右下に「お知らせバナー」の項目が追加されているのでクリックします。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/c0c15ad5-6537-475c-bc55-1667d6d2b130/14cadb611485876f74e453894f856d86.png)
お知らせするテキストやリンク、アイコンなどを設定するフォームが出てきますので内容を入力し、保存します。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/c8319590-10e9-40cf-984b-cfa8b509f655/e887c6db595eeadd982538c55cad576c.png)
ショップにお知らせが表示されました!以上で設定完了です🎉
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/9c682849-34d3-4ee8-b35d-6fddb58ea861/2f3e01a8f5833ac415645da6d103528f.png)
カートボタンや英語・外貨対応Appが被る時
下の図のように、カートボタンや英語・外貨対応Appがお知らせバナーに被る場合は、HTML編集でコードを変更します。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/3a528126-7bd5-4e8a-8760-b598b5d30942/8448682f35d4c4df49f6cd56c8cbd691.png)
有料テーマをお使いの場合や、ご自身でHTMLをカスタマイズしている場合は下記方法では上手くいかない場合があります。
HTML編集Appに行き、エディタを開きます。
次に という文字を検索します。
その下に書かれている という部分を に変更します(数字を10→66に変更します)。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/b46f9c23-e8ed-4017-8d54-a8001a24dcdd/df8a463cb499c15f9959fb598685c9a3.png)
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/2aadfecf-fa9e-4ea2-8930-08f26a9ec033/ce809fb58c8f2a7dbe08c216008b3215.png)
次に という文字を検索します。
その下に書かれている という部分を に変更します(数字を5→61に変更します)。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/102463aa-d062-4914-9d27-6690b18a22d7/61cb049d6d1fef7ea74cbca6a56fa418.png)
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/ba49df75-21d0-4ca3-8811-247bdcfbb2b2/853bbd436d5c3f5404c28fd4b849b7fa.png)
完了したらテーマを保存し、エディタの編集を終了します。
これでボタンが被らなくなりました🎉
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/266b8ac7-0182-4bc7-9e5d-6ba8b9815b47/106769404938933a27f63fc09de4c17e.png)