ショートコードでハイライトを配置する

初期状態では、ハイライトブロックは商品ページ上の、アプリの組み込み位置に表示されます。説明文の上、ページのさらに下、別のテンプレートなど、別の場所に表示したい場合は、ブロックのショートコードをコピーして、自分で配置します。

ショートコードの確認場所

ショートコードは、次の2か所で確認できます。

• エディタ内 — ハイライトを開いて、Placementタブに移動します。下部のShortcodeカードに、Copyボタンが付いたスニペットが表示されます。
• リスト内 — Extra FeaturesページのHighlightsタブにあるShortcode列に、各ブロックのコピー用アイコンがあります。

Shortcodeカードは、PlacementタブのProduct pageトグルの下にあります。

注意

ショートコードをコピーする前に、ハイライトを保存してください。保存していないブロックでは、スニペットがdata-id="new"となり、ストアフロントに何も表示されません。

テーマにショートコードを配置する

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

   ハイライトを開き、Placementタブに切り替えて、Copyをクリックします。スニペットは次のようになり、ブロック固有のIDが入ります。

   <div class="samitaPL-highlight" data-id="4482"></div>

   ハイライトごとに固有のdata-idがあるため、実際に表示したいブロックからスニペットをコピーしてください。

2. テーマエディタを開く

   Shopify管理画面でオンラインストアに移動し、変更するテーマのテーマを編集をクリックします。

   

   テーマを編集で、ハイライトを追加するテーマを開きます。

3. Samita Highlightブロックを追加する

   ブロックを配置するページとセクションに移動します。たとえば、商品テンプレートの商品情報です。ブロックを追加をクリックしてアプリタブに切り替え、Samita Highlight(Sami Product Labels)を選択します。ブロックを、購入ボタンと説明の間など、目的の位置にドラッグします。

   

   ブロックを追加メニューのアプリタブから、Samita Highlightを選びます。

4. ブロックにショートコードを貼り付ける

   ブロックを選択した状態で、Shortcode欄にスニペットを貼り付けて、保存をクリックします。

   

   ハイライトのショートコードを、ブロックのShortcode欄に貼り付けて保存します。

5. ストアフロントを確認する

   ストアフロントでページを開き、ブロックが正しい位置に表示されることを確認します。何も表示されない場合は、次の点を確認してください。

   • ハイライトのステータスが、DraftではなくActiveになっている。
   • ブロック内のdata-idが、ハイライトと一致している。
   • Placementタブの条件によって、このページが除外されていない。ハイライトの表示対象を指定するをご覧ください。

組み込み位置とショートコードの違い

方法	仕組み
Product pageトグル	PlacementタブでProduct pageをオンにすると、すべての商品ページで、アプリの組み込み位置にハイライトが表示されます。テーマの編集は不要です。
Shortcode	スニペットをアプリブロックに貼り付けて、正確な位置に配置します。組み込み位置が希望の場所でない場合に使用します。

どちらの方法でも、表示条件は引き続き適用されます。ショートコードはブロックをどこに配置するかを制御し、条件はブロックを表示するかどうかを制御します。

次のステップ

• ハイライトを作成する — ブロックを作成し、グリッドのスタイルを設定します。
• ハイライトの表示対象を指定する — ハイライトを表示するページと顧客を制御します。
• ショートコードでトラストバッジを配置する — トラストバッジでも同じ手順です。

ヒント

サポートが必要な場合

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