トラストバッジを作成する

トラストバッジは、決済、セキュリティ、配送、保証、ポリシーなどのアイコンをまとめたブロックで、タイトルと説明を任意で追加できます。エディタには、コンテンツとスタイルを設定するDesignと、商品ページの組み込み位置とショートコードを設定するPlacementの2つのタブがあります。

1. Trust Badgesを開く

   Shopify管理画面でSami Product Labelsを開き、アプリのナビゲーションでExtra Featuresを選択して、Trust Badgesタブを選択します。

   すでにトラストバッジがある場合は、テーブルに一覧表示されます。リストが空の場合は、代わりにCreate your first trust badgeパネルが表示されます。

   

   Trust Badgesタブには、作成アクション、保存済みのトラストバッジ、Featured templatesがあります。

2. 開始方法を選択する

   Create trust badgeをクリックします。このボタンは、テーブルが表示されている場合はページヘッダーに、トラストバッジをまだ作成していない場合は空の状態のパネルに表示されます。

   Featured templatesまでスクロールします。View all templatesをクリックすると、4つのデザイン(Eco-Friendly template、With payment method、Policies store template、Badge box template)がすべて表示されます。テンプレートのSelectをクリックすると、アイコンとスタイルがすでに適用された状態で開きます。

   どちらの方法でも、エディタがDesignタブで開きます。

   

   トラストバッジを一から作成するか、4つのFeatured templatesから選択します。

3. トラストバッジに名前を付ける

   名前欄はプレビューの上にあります。New Trust Badgeを、50文字以内の名前に置き換えます。この名前は、アプリ内でトラストバッジを識別するためだけに使用され、お客様には表示されません。

   

   テーブルで見つけやすいように、わかりやすい内部用の名前を付けます。

4. タイトルと説明を追加する

   Content & Badgesで、TitleとDescriptionを開き、アイコンの上に表示する任意のテキストを入力します。どちらの欄も、太字、斜体、下線、絵文字、テキストの配置、ソースモードに対応しています。

   これらの欄は言語ごとに入力します。ラベルには、たとえば**Title (en)**のように、現在の言語が表示されます。別の言語を編集するには、プレビューの上にある言語セレクターを使用します。

   アイコンのみを表示する場合は、どちらの欄も空のままにします。

   

   TitleとDescriptionは任意のリッチテキスト欄で、言語ごとに個別に編集します。

5. バッジアイコンを追加する

   Badgesの下にあるAdd Badgeをクリックして、次のいずれかを選択します。

   オプション	動作
   Select badge image	Select Imageダイアログを開きます。
   Line break	以降のアイコンを新しい行から始めます。

   Select Imageで、Search imagesを使ってアイコンを探します。Libraryソースには、決済、セキュリティ、配送、保証、ポリシーに関する400点以上の画像があり、現在のアイテム数がソース名の横に表示されます。1つ以上の画像を選択して、Select Imageをクリックします。

   Design your Imagesに切り替えると、アップロードした画像、URLからインポートした画像、関連するカスタムデザインを使用できます。画像を選択した後、追加する前にバリエーションを作成したい場合は、Edit with AIをクリックします。

   

   組み込みのライブラリを検索するか、Design your Imagesに切り替えて、選択を確定します。

6. 各アイコンの並べ替えと設定を行う

   各アイコンは、Badgesリストの1行として表示されます。行のハンドルをドラッグすると表示順を変更でき、Deleteをクリックすると削除できます。Line breakアイテムを使うと、新しい行を始める位置を制御できます。

   行のGeneralボタンをクリックすると、設定が開きます。

   • Change Image — 選択したアイコンを差し替えます。
   • Link — アイコンをクリックしたときにURLを開くようにします。外部リンクのオプションを使うと、新しいタブで開きます。
   • Tooltip — 買い物客がアイコンにポインターを合わせたときに表示される、150文字以内のテキストを追加します。
   • Layout colors — 組み込みのSVGアイコンで、対応するレイヤーの色を変更します。

   

   アイコンをドラッグして並べ替え、Generalで画像、リンク、ツールチップ、対応する色を変更します。

7. トラストバッジブロックのスタイルを設定する

   折りたたみ可能なデザインセクションを使って、トラストバッジをテーマに合わせます。

   セクション	主な設定
   Design Main Section	ブロックの幅、余白、パディング、枠線のサイズ・スタイル・色、シャドウ、角の丸みです。
   Design title & description	タイトルと説明のカスタムフォント、色、フォントサイズ、行の高さです。
   Design Badge	Mono、Mono card、Original、Original cardのスタイル、配置、幅と高さ、余白、アニメーションです。
   Responsive size	タブレットとモバイルそれぞれのアイコンの幅と高さです。
   Advance Section	カスタムCSSと、トラストバッジのセレクターを一覧表示するクリック可能なCSS referenceです。

   使用できるアニメーションは、SlideInUp、SadeInDown、BounceIn、FlipInX、ZoomInです。Animationをオンにしてエフェクトを選択し、再生ボタンでプレビューします。

   

   各デザインセクションを開いて、コンテナ、テキスト、アイコン、レスポンシブサイズ、カスタムCSSのスタイルを設定します。

   ノート

   Advance Sectionで、CSS referenceのセレクターをクリックすると、そのスコープ付きルールがカスタムCSSエディタに挿入されます。

8. トラストバッジの表示場所を選択する

   Placementタブに切り替えます。

   オプション	動作
   Product page	スイッチをオンにすると、すべての商品ページで、アプリの組み込み位置にトラストバッジが表示されます。
   Shortcode	トラストバッジをテーマ内の任意の位置に配置する場合に、スニペットをコピーします。

   保存していないトラストバッジのショートコードでは、data-id="new"が使われます。このスニペットをテーマに配置する前に、トラストバッジを保存してください。

   

   商品ページの組み込み位置を使用するか、ショートコードをコピーして任意の位置に配置します。

   ノート

   テーマエディタでの完全な手順については、ショートコードでトラストバッジを配置するをご覧ください。

9. プレビューして保存する

   プレビューの上にあるコントロールで、次の操作ができます。

   • 編集する言語を切り替える。
   • Product pageをプレビューする。
   • デスクトップ表示とモバイル表示を切り替える。
   • サンプル商品を表示または非表示にする。
   • トラストバッジをActiveまたはDraftに設定する。

   プレビューを確認して、右上のSaveをクリックします。保存していない編集内容を残さずに終了する場合は、Discardをクリックします。

   

   結果をプレビューし、ActiveまたはDraftを選択して、トラストバッジを保存します。

次のステップ

• トラストバッジの概要 — 保存済みのトラストバッジ、テンプレート、ステータス、配置を管理します。
• ショートコードでトラストバッジを配置する — トラストバッジをテーマ内の正確な位置に追加します。

ヒント

サポートが必要な場合

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