基本バナーを作成する

基本バナーは、見出し、メッセージ、ボタン、カウントダウン、画像などのコンテンツ要素を1つ以上のセクションにまとめて作成するバーです。エディタには、Design(コンテンツとスタイル)とPlacement(バーを表示する場所と対象)の2つのタブがあります。

1. Bannersページを開く

   Shopify管理画面でSami Product Labelsアプリを開き、アプリのサイドバーでExtra Featuresをクリックして、Bannersタブに切り替えます。

   

   Sami Product LabelsのサイドバーからBannersを開きます。

2. Create bannersをクリックし、Basicを選択する

   Create bannersをクリックします。Select Typeダイアログで、Basicの横にあるSelectをクリックします。Basicは、1つまたは複数のコンテンツグループに対応するタイプです。

   

   Basicを選択して、標準のお知らせバーを作成します。

   ノート

   一から作成しない場合は、BannersページでFeatured templatesまたはView all templatesを使用して、用意されているバナーを開いて編集できます。

3. バナーに名前を付ける

   フルスクリーンのエディタがDesignタブで開きます。プレビューの上にある名前欄のNew Bannerを、50文字以内の名前に置き換えます。この名前は内部用で、リスト内でバナーを識別するためのものです。お客様には表示されません。

   名前の横には、言語セレクター、デスクトップとモバイルのプレビュー切り替え、Active / Draftのステータススイッチもあります。

   

   プレビュー上のツールバーには、バナー名、言語、プレビューするデバイス、ステータスがあります。

4. コンテンツを作成する

   Contentの下にあるSection 1に、バーを構成する要素が一覧表示されます。要素をクリックするとテキストとスタイルを編集できます。左側のハンドルをドラッグすると並べ替えができ、行の右側のアイコンで非表示、複製、削除ができます。

   Add elementをクリックして、新しい要素を追加します。

   要素	追加されるもの
   Message	本文テキストを1行追加します。
   Heading	大きな見出しを追加します。
   Line break	要素間に縦方向の余白を追加します。
   Button	独自のリンクを持つコールトゥアクションボタンを追加します。
   Countdown	日、時間、分、秒のタイマーを追加します。
   Image	画像またはロゴを追加します。

   

   バーを構成する要素を追加、並べ替え、編集します。

5. (任意)コンテンツグループを追加する

   Add Groupをクリックすると、Section 2、Section 3のように追加されます。各セクションは別々のメッセージで、バナーは順番に切り替わって表示されます。タイミングは、以降の手順のAnimationで設定します。

   静的なメッセージを1つだけ表示する場合は、セクションを1つのままにします。

6. バーのスタイルを設定する

   Styleパネルで次の設定を行います。

   • Background Type — Single Color、Gradient Color、Pattern Imageのいずれかを選択し、色または画像を設定します。
   • Font Style — フォント、サイズ、太さ、テキストの色を設定します。
   • Padding — バー内の余白を調整します。

   

   バー全体の背景、フォント、余白を設定します。

7. 閉じるボタンを追加する、またはバーをクリック可能にする

   どちらのオプションもButtonパネルにあり、初期状態ではオフです。

   • Include Close Buttonにチェックを入れると、バーに「x」が表示され、お客様がバーを閉じられるようになります。ColorとHover Colorの2つの欄が表示されます。
   • Bar Clickableにチェックを入れると、バー全体がリンクになります。Link URL欄が表示されるので、リンク先を入力します。横のトグルで、リンクを新しいタブで開くかどうかを切り替えられます。

   

   各チェックボックスを有効にすると、閉じるボタンの色やリンクURLなどの設定が表示されます。

8. アニメーションのタイミングを設定する

   Animationパネルで、HorizontalまたはVerticalの切り替え方式を選択し、タイミングを秒単位で設定します。

   項目	設定内容
   Disappear After	バーが非表示になるまでの表示時間です。
   Interval Between Bar Display	バーが再び表示されるまでの間隔です。
   Time For The Bar To Fade In	フェードインアニメーションの長さです。
   Time Per Group	次のセクションに切り替わるまでの、各セクションの表示時間です。

   ノート

   動作を無効にするには、項目を0のままにします。たとえばDisappear After = 0にすると、お客様が閉じるまでバーが表示され続けます。

9. (任意)カスタムCSSを追加する

   Advance Sectionを開き、Custom CSS (Developer Zone)ボックスに独自のCSSを記述します。下にあるCSS referenceリストには、使用可能なセレクターが表示されます。クリックすると挿入されます。

10. バナーの表示場所を選択する

    Placementタブに切り替えて、表示位置を選択します。

    位置	動作
    Top	ページのコンテンツを下に押し下げます。
    Top Sticky	コンテンツを下に押し下げ、スクロールしても表示されたままになります。
    Top Overlay	ページコンテンツの上部に重なります。
    Overlay Sticky	コンテンツに重なり、スクロールしても表示されたままになります。
    Bottom Sticky	ページの下部に固定されます。
    Custom	ショートコードを使って、バーを好きな場所に配置します。

    位置の選択の下にあるProduct conditions、Customer conditions、Page conditions、Language conditions、Country conditions、Other conditions、Visibility dateで、対象を絞り込めます。Customを選択した場合は、Shortcodeパネルに、テーマに貼り付けるスニペットが表示されます。

    各条件タイプの詳細については、表示条件を設定するをご覧ください。

    

    表示位置を選択し、条件を追加してバナーを表示する対象を制御します。

11. 保存して有効にする

    プレビューの上にあるステータススイッチをActiveに設定し、右上のSaveをクリックします。公開せずに作業を続ける場合は、Draftのままにします。

    注意

    バナーがストアフロントに表示されるのは、テーマでアプリの埋め込みが有効になっている場合のみです。テーマでアプリを有効にするをご覧ください。

次のステップ

• 表示条件を設定する — バナーの詳細なターゲティングルールを設定します。
• 無限スクロールバナーを作成する — 代わりに、ティッカー形式で流れるバーを試します。

ヒント

サポートが必要な場合

手順の途中で問題が発生した場合は、[email protected]までお問い合わせください。