バナーを作成する
スターターテンプレートからバナーを作成し、ストアフロントに公開します。
Bannersページが空の状態から、お客様に表示されるバーを公開するまでの手順をすべて説明します。
-
Banners を開いて作成を始める
Section titled “Banners を開いて作成を始める”アプリメニューで Banners をクリックし、Create banner をクリックします。
初めて作成する場合は、ページに Create your first banner と表示され、中央に同じボタンがあります。
バナーを作成する前のBannersページです。
-
出発点を選ぶ
Section titled “出発点を選ぶ”用途別にグループ化された10種類のスターターがダイアログに表示されます。左側のスターターをクリックすると、右側のプレビューにページ上でのバーの表示が表示されます。
グループ スターター Sale and urgency Flash sale、Black Friday、Selling fast、Sticky footer Discount code Discount code、Welcome offer Shipping Free shipping、Shipping cutoff Announcement Announcement、New arrivals プレビューの下には、Text、Countdown、Buttonなど、含まれている要素と配置位置が小さなラベルで表示されます。
何もない状態から作成したい場合は、リストの下部にある Start from blank を選択します。
Use this template をクリックします。
どのスターターも後から変更できます。固定されているものはありません。
-
名前を付ける
Section titled “名前を付ける”ビルダーが開きます。左上の名前を、リストで見分けやすいものに変更します。「Banner 3」ではなく「Black Friday top bar」のようにしましょう。
入力欄の横のカウンターには、あと何文字入力できるかが表示されます。
-
バーの内容を入力する
Section titled “バーの内容を入力する”Content パネルには、バーに含まれる要素が一覧表示されます。要素をクリックすると、右側のカラムに設定が開きます。
- Text をクリックして、メッセージを変更します
- Countdown をクリックして、終了日を設定します
- Button をクリックして、ラベルとリンク先を変更します
- 行の左にあるハンドルをドラッグして、順序を変更します
- Add element で、末尾に新しい要素を追加します
各要素でできることは、バーのコンテンツと要素をご覧ください。
左で要素を選び、右で変更します。
-
スタイルを設定する
Section titled “スタイルを設定する”レールのブラシアイコンの Design パネルを開きます。
背景、文字とアクセントの色、バーの高さ、お客様が閉じられるようにするかどうかを設定します。バナーをデザインするをご覧ください。
-
表示場所を選ぶ
Section titled “表示場所を選ぶ”レールの3番目のアイコンの Placement パネルを開きます。
- Top of the page はページを下に押し下げて表示し、Bottom of the page は画面の下部に固定します
- Stay on screen は、お客様がスクロールしてもバーを表示し続けます
- Conditions で表示するページを決めます。All pages のままにすると、すべてのページに表示されます
- Devices で、デスクトップまたはモバイルのみに限定します
- Schedule で、自動的にオンとオフを切り替えます
バナーの表示場所をご覧ください。
-
プレビューを確認する
Section titled “プレビューを確認する”ビルダーの中央には、代わりのストアフロントページにバーが表示されます。上部の2つのアイコンで、デスクトップとモバイルの幅を切り替えられます。ノートパソコンで読みやすいバーが、スマートフォンでは窮屈になることがあるため、確認をおすすめします。
-
Active にして保存する
Section titled “Active にして保存する”名前の横で Draft から Active に切り替え、Save をクリックします。
Draftは、誰にも表示せずにバナーを保存します。Activeにすると、ストアフロントに表示されます。
お客様に表示するには、バナーをActiveにする必要があります。
-
ストアフロントを確認する
Section titled “ストアフロントを確認する”新しいタブでストアを開き、再読み込みします。ページの上部または下部にバーが表示されます。
表示されない場合は、カウントダウンが表示されないの手順を順に確認してください。バナーでも同じ確認が必要です。
ボタンにリンクが必要な場合
Section titled “ボタンにリンクが必要な場合”Open a link に設定したボタンには、バナーをActiveで保存する前にURLが必要です。スターターには /collections/all があらかじめ入力されているため、お客様を誘導したいページに変更してください。