ショートコードでトラストバッジを配置する
ショートコードを使って、トラストバッジをShopifyテーマ内の正確な位置に配置します。
アプリの組み込み位置がストアに適している場合は、トラストバッジエディタでProduct pageをオンにします。購入ボタンの真下など、別の場所にトラストバッジを表示したい場合は、ショートコードをコピーして、テーマ内のその位置にSamita Trust Badgeアプリブロックを追加します。
ショートコードの確認場所
Section titled “ショートコードの確認場所”ショートコードは、次の2か所で確認できます。
- トラストバッジのテーブル — Sami Product Labels → Extra Features → Trust Badgesを開きます。配置したいトラストバッジのShortcode列から、スニペットをコピーします。
- トラストバッジエディタ — 行の編集アクションをクリックしてPlacementを開き、ShortcodeセクションのCopyをクリックします。
更新されたTrust Badgesテーブルから、ショートコードを直接コピーします。
Placementタブにも、ショートコードとCopyボタンがあります。
テーマにショートコードを配置する
Section titled “テーマにショートコードを配置する”-
保存済みトラストバッジのショートコードをコピーする
Section titled “保存済みトラストバッジのショートコードをコピーする”テーブルまたはエディタから、スニペットをコピーします。スニペットは次のようになり、トラストバッジ固有のIDが入ります。
<div class="samitaPL-trustBadge" data-id="4477"></div>別の行のスニペットを使い回さないでください。トラストバッジごとに固有の
data-idがあります。 -
テーマエディタを開く
Section titled “テーマエディタを開く”Shopify管理画面でオンラインストアを開きます。更新するテーマを見つけて、テーマを編集をクリックします。
トラストバッジを表示するテーマを開きます。
-
商品テンプレートを開く
Section titled “商品テンプレートを開く”テーマエディタ上部のページセレクターを使い、商品 → デフォルト商品、またはストアで使用している別の商品テンプレートを選択します。
セクションパネルで、商品情報を展開します。タイトル、価格、購入ボタン、説明などの既存のブロックを見ると、トラストバッジを挿入できる位置がわかります。
アプリブロックを追加する前に、商品テンプレートを開いて商品情報を展開します。
-
Samita Trust Badgeブロックを追加する
Section titled “Samita Trust Badgeブロックを追加する”ブロックを追加をクリックしてアプリタブを選択し、Sami Product LabelsのSamita Trust Badgeを選びます。新しいブロックを、購入ボタンの真下など、目的の位置にドラッグします。
アプリの一覧からSamita Trust Badgeを選択して、商品情報内に配置します。
-
ショートコードを貼り付けてテーマを保存する
Section titled “ショートコードを貼り付けてテーマを保存する”Samita Trust Badgeブロックを選択し、Shortcode欄にスニペット全体を貼り付けます。テーマエディタで保存をクリックします。
ショートコード全体をアプリブロックに貼り付けて、テーマを保存します。
-
ストアフロントを確認する
Section titled “ストアフロントを確認する”編集したテンプレートを使用している商品を開き、トラストバッジが想定した位置に表示されることを確認します。
表示されない場合は、次の点を確認してください。
- トラストバッジが、DraftではなくActiveになっている。
- ショートコードに、保存済みトラストバッジの正確な
data-idが含まれている。 <div class="samitaPL-trustBadge" ...></div>のスニペット全体が、Shortcode欄に入っている。- 商品が、編集したテーマテンプレートを使用している。
- Samita Trust Badgeブロックが表示されていて、テーマの変更が保存されている。
組み込み位置とショートコードの違い
Section titled “組み込み位置とショートコードの違い”| 方法 | 仕組み |
|---|---|
| Product page | Placementでスイッチをオンにすると、すべての商品ページで、アプリの組み込み位置にトラストバッジが表示されます。テーマの編集は不要です。 |
| Shortcode | 保存済みトラストバッジのスニペットをSamita Trust Badgeアプリブロックに貼り付けて、正確な位置を指定します。 |
同じ商品テンプレートで両方の方法を有効にすると、トラストバッジが2回表示されることがあります。組み込み位置にはProduct pageスイッチ、任意の位置にはショートコードのアプリブロックのどちらか一方を使用してください。
次のステップ
Section titled “次のステップ”- トラストバッジを作成する — 配置する前に、コンテンツとデザインを作成します。
- トラストバッジの概要 — 保存済みのトラストバッジを管理し、テーブルからショートコードをコピーします。