デバイスとページ別の表示
バッジを表示するページとデバイスを制御し、テーマの要素を除外し、同じ商品に複数のバッジが該当する場合にどのバッジを優先するかを決めます。
バッジエディタのDisplayタブでは、Productsタブでバッジを適用する商品を決めた後、バッジをどこに、いつ表示するかを決めます。
このタブは、折りたたみ可能なセクションの一覧です。
| セクション | 制御する内容 | 説明ページ |
|---|---|---|
| Customer conditions | バッジを表示する買い物客（ログイン状態、タグ、特定の顧客） | 顧客で対象を設定する |
| Page conditions | バッジを表示するページの種類 | このページ |
| Language conditions | 訪問者が閲覧しているストアフロントの言語 | 国と言語で対象を設定する |
| Country conditions | 訪問者の国 | 国と言語で対象を設定する |
| Other conditions | 商品画像、デバイス、除外するテーマ要素 | このページ |
| Visibility Date & Countdown | 開始日と終了日、カウントダウンタイマー | 表示スケジュールを設定する |
| Priority conditions | 1つの商品に複数のバッジが該当する場合に優先されるバッジ | このページ |
Displayタブです。シェブロンがあるセクションは展開でき、スイッチがあるセクションは先にオンにします。
Displayタブを開く
Section titled “Displayタブを開く”-
アプリを開く
Section titled “アプリを開く”Shopify管理画面で、Apps → Sami Product Labelsに移動します。
-
Badges & Labelsを開く
Section titled “Badges & Labelsを開く”アプリの左メニューでBadges & Labelsをクリックします。一覧には、すべてのバッジのId、名前、プレビュー、種類、優先度、位置、ステータスが表示されます。
Badges & Labelsの一覧です。Actions列の鉛筆アイコンをクリックして、バッジを編集します。
-
バッジを編集する
Section titled “バッジを編集する”設定したいバッジのActions列にある鉛筆アイコンをクリックします。エディタが開き、Design、Products、Displayの3つのタブが表示されます。
-
Displayに移動する
Section titled “Displayに移動する”Displayタブをクリックします。
Page conditions
Section titled “Page conditions”デフォルトでは、バッジは商品が表示されるすべてのページに表示されます。特定のページの種類に限定するには、ページ条件を追加します。
ページ条件を追加する方法
Section titled “ページ条件を追加する方法”-
Page conditionsを展開する
Section titled “Page conditionsを展開する”Page conditionsの行をクリックして展開します。+ Add conditionsボタンが表示されます。
空のPage conditionsセクションです。ルールがまだないため、バッジはすべての場所に表示されます。
-
+ Add conditionsをクリックする
Section titled “+ Add conditionsをクリックする”条件の行が表示され、Page（固定）、演算子、ページの種類の3つのフィールドがあります。デフォルトは
Pageis equal toIndex pageです。
+ Add conditionsをクリックするたびに、1行追加されます。行の右端にあるゴミ箱アイコンで、その行を削除できます。
-
演算子を選択する
Section titled “演算子を選択する”- is equal to — 選択したページの種類にのみバッジを表示します。
- is not equal to — 選択したページの種類を除くすべての場所にバッジを表示します。
-
ページの種類を選択する
Section titled “ページの種類を選択する”オプション バッジが表示される場所 Index page ストアフロントのホームページ Collection page コレクション/カテゴリの一覧ページ Product page 個別の商品ページ Article Page ブログ記事ページ Blog page ブログの一覧ページ Cart page (including cart drawer) カートページとスライド式のカートドロワー Search page 検索結果ページ Specific pages 入力した正確なURLのみ（次の手順を参照） 
ページ条件で利用できる8つのページの種類です。
-
Specific pagesの場合は、URLを入力する
Section titled “Specific pagesの場合は、URLを入力する”Specific pagesを選択すると、4つ目のフィールドが追加されます。ページのストアフロントの完全なURLを入力します。たとえば、
https://your-store.myshopify.com/pages/summer-saleです。プレースホルダーには、目安として、ご自身のストアのURLが表示されます。
Specific pagesではURLフィールドが追加されます。パスだけでなく、ページの完全なURLを貼り付けます。
-
右上のSaveをクリックします。
Other conditions
Section titled “Other conditions”Other conditionsを展開すると、バッジを表示する商品画像、バッジを表示するデバイス、スキップするテーマの要素を制御できます。
| 設定 | オプション | 動作 |
|---|---|---|
| Show on (product page) | All images / First image | すべてのギャラリー画像にバッジを表示するか、最初の（メインの）商品画像のみに表示するかを選択します。 |
| Device targeting | All devices / Desktop / Mobile | バッジをデスクトップまたはモバイルの買い物客に限定するか、すべてのデバイスに表示します。 |
| Do not show label on | CSS class list — .CLASS1, .CLASS2,... |
これらのクラスに一致する要素には、バッジが表示されません。テーマのスライダー、クイックビュー、アップセルのセクションがバッジの配置に適さない場合に便利です。 |
画像、デバイス、除外の設定は、すべてOther conditionsにあります。
Priority conditions
Section titled “Priority conditions”複数のバッジが同じ商品に一致する場合、優先度によってどのバッジを表示するかが決まります。
-
Priority conditionsをオンにする
Section titled “Priority conditionsをオンにする”Priority conditionsの行のスイッチをクリックします。Priority valueフィールドが表示されます。
-
優先度の値を入力する
Section titled “優先度の値を入力する”0～100の数値を入力します。**0が最も高い優先度、100が最も低い優先度です。**同じヒントが、フィールドの下にも表示されます。
数値が小さいほど、優先度が高くなります。商品にすでに優先度の高いバッジがある場合、そのバッジは非表示になります。
-
Saveをクリックします。値は、Badges & Labels一覧のPriority列に表示されるため、すべてのバッジをひと目で比較できます。
| バッジ | 優先度の値 | 両方に一致する商品での結果 |
|---|---|---|
| Sale off | 0 |
表示 |
| Best seller | 10 |
非表示 |
次のステップ
Section titled “次のステップ”- バッジの位置を変更する — 商品画像上のバッジの位置を調整します。
- 商品を対象にする — バッジを表示する商品を選択します。
- 表示スケジュールを設定する — バッジの開始日と終了日を設定します。