バッジグループを作成する（商品画像の外側）

グループを写真に重ねるのではなく、価格の下やカートに追加ボタンの下など、商品情報の欄に配置したい場合は、Outside product imageを選択します。購入に関する情報と一緒に表示したい、信頼や配送のバッジに適しています。

ノート

先にバッジとラベルでバッジを作成してください。グループにまとめられるのは、すでに作成済みのバッジのみです。

1. Badge groupsを開く

   Shopify管理画面でSami Product Labelsを開き、アプリのサイドバーでBadge groupsをクリックします。

   

   Badge groupsは、サイドバーのBadges & LabelsとExtra Featuresの間にあります。

2. Create badge groupをクリックする

   まだグループがないストアでは、Create your first badge groupと表示されます。Create badge groupをクリックして、エディタを開きます。

3. Outside product imageを選択する

   Designタブの上部で、Outside product imageを選択します。Label SelectionボタンがAdd badges to groupに変わり、DesignセクションにBadge group replacementメニューが表示されます。

   

   Outside product imageを選択すると、グループが商品情報の欄に配置されます。

4. グループに名前を付ける

   グループ名はデフォルトでLabel groupです。プレビューの上にある**…**メニューを開き、Renameをクリックして、50文字以内で名前を入力します。たとえば「Checkout trust badges」のように入力します。

5. グループにバッジを追加する

   Label SelectionでAdd badges to groupをクリックします。名前で検索し、追加したいバッジにチェックを入れて、Selectをクリックします。

   

   含めるバッジにそれぞれチェックを入れ、Selectをクリックします。

6. ページ上でグループを表示する場所を選択する

   DesignセクションでBadge group replacementを開き、グループを関連付ける商品ページの要素を選択します。デフォルトはBelow the product priceです。メニューには、個別のバッジと同じ配置先が表示されます。一覧はバッジの位置を変更するを参照してください。

   次に、Predefined positionで、その要素内でグループを左、中央、右のいずれかに揃えます。

   

   商品ページの要素を選択し、その中でグループを揃えます。

7. グループをデザインする

   バッジをまとめて表示する方法を設定します。

   設定	制御する内容
   Select layout	HorizontalまたはVerticalの並べ方。
   Item size	各バッジのサイズ（パーセンテージまたは固定値）。
   Label gap	バッジ同士の間隔（ピクセル単位）。
   Margin	周囲のコンテンツからの上、下、左、右の余白。

   右側のライブプレビューを確認します。Product page / Collection pageメニューとデスクトップ/モバイルのアイコンを使って、それぞれの場面でグループが想定どおりの位置に表示されることを確認します。

8. カスタムCSSを追加する（任意）

   Advance Sectionを展開して、独自のCSSを追加します。選択した要素の周囲のテーマの余白を少し調整したい場合に便利です。

9. グループの対象を選択する

   Placementタブに切り替え、Condition typeを選択します。

   オプション	動作
   Keep individual badge conditions	各バッジは、それぞれのターゲティングルールに従って表示または非表示になります。
   Set a custom group condition	個別のルールを無視し、グループ全体で1つの条件を使用します。

   2つ目のオプションを選択すると、グループのProduct、Customer、Page、Language、Country、Otherの条件が表示されます。詳しくはグループ条件を設定するを参照してください。

   

   グループ全体を1つのルールで制御したい場合は、カスタムのグループ条件を使用します。

10. グループを保存する

    右上のSaveをクリックします。グループは、条件に一致する商品ページにすぐに表示されます。

注意

グループが想定した場所に表示されない場合は、選択した要素がテーマで公開されていない可能性があります。別のBadge group replacementオプションを試すか、バッジの位置を変更するで説明しているテーマのセレクターを使用してください。

次のステップ

• ラベルグループを作成する（商品画像の内側） — 代わりに、商品の写真にグループを重ねて表示します。
• バッジグループの概要 — エディタの各設定の内容を説明します。
• バッジの位置を変更する — 商品ページの配置先の一覧です。