表示条件を設定する

バナーエディタの Placement タブでは、2つのことを制御します。バーをページ上のどこに表示するかと、誰に表示するかです。基本バナーと無限スクロールバナーの両方のタイプで、同じタブを使用します。

Placementタブを開く

Sami Product Labels でバナーを作成または編集している間に、左パネルの上部にある Placement をクリックします。

Placementタブ：上部に位置ピッカー、下に条件パネルがあります。

表示位置を選択する

Position は最初のパネルで、必須です。すべてのバナーに位置が設定されます。

位置	動作
Top	ページコンテンツの上に配置され、コンテンツを下に押し下げます。
Top Sticky	コンテンツを押し下げ、お客様がスクロールしても表示され続けます。
Top Overlay	コンテンツを押し下げずに、ページコンテンツの上部に重なります。
Overlay Sticky	コンテンツに重なり、お客様がスクロールしても表示され続けます。
Bottom Sticky	ビューポートの下部に固定されます。
Custom	デフォルトでは、どこにも表示されません。ショートコードを使って自分で配置します。ショートコードによる配置をご覧ください。

条件パネル

位置ピッカーの下にあるものはすべて任意です。パネルを空のままにすると、制限は適用されず、バナーは、位置が許す限りすべての場所で、すべての人に表示されます。

Product conditions

ルールに一致する商品にバナーを限定します。Add conditions をクリックし、フィールド、演算子（is equal to / is not equal to）、値の3つの要素で行を作成します。

フィールド	選択する値
Select Products	カタログから選ぶ個別の商品。
Product tag	1つ以上の商品タグ。
Product compare price	割引商品をターゲットにするための比較価格。
Collections	1つ以上のコレクション。

行の末尾にある削除アイコンで行を削除し、もう一度 Add conditions をクリックして行を追加します。

ノート

Product tag 条件には、GOLDプラン以上が必要です。

すべての条件に一致するか、いずれかの条件に一致するか

パネルに複数の行がある場合は、Products must match のラジオボタンで、それらの組み合わせ方を決めます。

• all conditions — すべての行が真である必要があります（AND）。たとえば、sale のタグが付いていてかつ Clearance コレクションに含まれる商品。
• any condition — 1つの行で十分です（OR）。たとえば、sale のタグが付いているか Clearance コレクションに含まれる商品。

パネル内の行のロジックを、ANDとORで切り替えます。

各演算子の動作の詳細については、条件演算子のリファレンスをご覧ください。

Customer conditions

閲覧しているユーザーによってバナーを限定します。Add conditions をクリックし、フィールドを選択します。

フィールド	オプション
Customer	Is Logged In または Not Logged In。
Customer tag	1つ以上の顧客タグに一致させます。

ノート

顧客タグの条件には、GOLDプラン以上が必要です。

Page conditions

特定のページタイプにバナーを限定します。各行は、Page + 演算子 + ページタイプです。

ページタイプ	適用される場所
Index page	ストアのホームページ。
Collection page	コレクション内の商品を一覧表示するページ。
Product page	個別の商品詳細ページ。
Article Page	ブログ記事ページ。
Blog page	ブログ一覧ページ。
Cart page	カートドロワーを含む、ショッピングカートのページ。
Search page	検索結果。
Specific pages	入力したURLで一致させる、その他のページ。

ノート

「すべてのページ」のオプションはありません。Page conditions を空のままにすると、バナーはすべての場所に表示されます。

Language conditions

切り替えでパネルをオンにし、Operator（Equals または Not equals）を選択して、ストアの言語を検索して選択します。バナーは、お客様が使用している言語が一致する場合にのみ表示されます。

ノート

言語のターゲット設定には、DIAMONDプランが必要です。他のプランでは、バナーはすべての言語で表示されます。

Country conditions

切り替えでパネルをオンにし、Operator（Equals または Not equals）を選択して、国を検索して選択します。地域別の配送や、プロモーションメッセージに便利です。

Other conditions

Device targeting の設定が1つあります。All devices、Desktop、Mobile から選択します。

Visibility date

Start と End の日時で、バナーのスケジュールを設定します。どちらも YYYY-MM-DD HH:mm の形式です。フィールドを空のままにすると、期間のその端は開いたままになります。たとえば End のみを設定すると、セールが終了するまでバナーを表示できます。

ショートコードによる配置

ページの上部や下部に固定するのではなく、テーマ内の正確な位置にバナーを表示したい場合は、Custom 位置を選択します。

1. ショートコードをコピーする

   Placementタブの下部にある Shortcode パネルを開き、Copy をクリックします。スニペットは次のようになります。

   <div class="samitaPL-banner" data-id="YOUR_BANNER_ID"></div>

   バナー一覧の Shortcode 列からもコピーできます。

2. テーマに貼り付ける

   Shopify管理画面で オンラインストア > テーマ > コードを編集 に移動し、バナーを表示する位置にある、Liquidテンプレート、またはカスタムHTMLセクションに、スニペットを貼り付けます。

ノート

ショートコードは、正確な位置に配置する必要がある場合にのみ使用してください。それ以外の場合は、5つの組み込みの位置のいずれかで十分です。

効果的なターゲット設定のヒント

• **広く始めて、絞り込む。**最初に位置を選び、バナーが表示されることを確認してから、条件を追加します。
• **パネルは組み合わされることを忘れない。**異なるパネルの条件は、すべて満たす必要があります。商品条件とページ条件を設定した場合は、両方に一致する必要があります。
• **両方のデバイスを確認する。**エディタの上にあるモバイルプレビューの切り替えを使用し、メッセージが片方のデバイスでのみ意味を持つ場合は Device targeting を設定します。
• **ストアフロントでテストする。**バナーを有効にして、対象のページを読み込み、想定した場所に表示されることを確認します。

次のステップ

• 基本バナーを作成する — 固定、またはローテーションするお知らせバーを作成します。
• 無限スクロールバナーを作成する — ティッカー形式のバーを作成します。
• バナーの概要 — バナーのハブに戻ります。

ヒント

サポートが必要ですか？

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