無限スクロールバナーを作成する

無限スクロールバナーは、ニュースティッカーのように、コンテンツが右から左へ 連続してループして流れるバーです。繰り返し表示したいプロモーション、送料無料のお知らせ、お客様に気づいてもらいたい短いお知らせに使用します。

ノート

無限スクロールバナーにはコンテンツセクションが1つしかなく、Add Groupオプションはありません。複数のメッセージを順番に切り替えて表示する場合は、代わりに基本バナーを使用します。

1. Bannersページを開く

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

   

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

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

   Create bannersをクリックします。Select Typeダイアログで、Infinite Scrollの横にあるSelectをクリックします。Infinite Scrollは、バナーのコンテンツを無限にループさせて、シームレスなスクロール効果を出すタイプです。

   

   Infinite Scrollを選択して、ティッカー形式のバーを作成します。

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

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

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

   

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

4. スクロールするコンテンツを編集する

   Section 1には、最初に✨ Free ship on order $40+ ✨のようなサンプルテキストが入ったDescription要素が1つあります。クリックすると、右側に設定が表示されます。

   • Content — 太字、斜体、下線、絵文字、配置、HTML表示(</>)に対応したリッチテキストエディタです。言語チップには、編集中の言語が表示されます。
   • Text — フォントのSizeとColorです。
   • PaddingとMargin — 要素の周囲の余白をピクセルで指定します。

   Add elementをクリックすると、ループに項目を追加できます。Message、Heading、Line break、Button、Countdown、Imageから選択できます。行の左側にあるハンドルをドラッグすると、並べ替えができます。

   

   バーを流れる要素を編集するか、シーケンスに要素を追加します。

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

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

   • Background Type — Single Color、Gradient Color、Pattern Imageのいずれかを選択します。無限スクロールバナーの初期値はPattern Imageです。Change Imageでタイルを差し替え、Removeでクリアできます。
   • Font Style — フォント、太さ、テキストの標準の色を設定します。
   • Padding — バー内の余白を調整します。

   ノート

   パターン画像は、PNG、JPG、またはSVG形式で、5 MB以下、512 × 512 pxにしてください。

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

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

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

   

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

7. スクロール速度とタイミングを設定する

   Animationパネルの4つの項目は、すべて秒単位です。

   項目	設定内容
   Scroll speed	1周のループにかかる時間です。数値を大きくすると、スクロールが遅くなります。
   Disappear After	バーが非表示になるまでの表示時間です。
   Interval Between Bar Display	バーが再び表示されるまでの間隔です。
   Time For The Bar To Fade In	フェードインアニメーションの長さです。

   ノート

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

   

   Scroll speedは1回のループの長さを設定します。数値を大きくすると、ティッカーが遅くなります。

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

   Advance Sectionを開き、Custom CSS (Developer Zone)ボックスに独自のCSSを記述します。下にあるCSS referenceリストには、無限スクロールが有効なときに使われるラッパーの.samita_banner_groups.infinityScrollなど、使用可能なセレクターが表示されます。セレクターをクリックすると挿入されます。

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

   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パネルに、テーマに貼り付けるスニペットが表示されます。

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

   

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

10. 保存して有効にする

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

    注意

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

次のステップ

• 表示条件を設定する — バナーを表示する場所と対象を制御します。
• 基本バナーを作成する — 代わりに、静的または切り替え表示のお知らせバーを作成します。

ヒント

サポートが必要な場合

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