商品詳細ページの任意の場所にカスタムHTMLを挿入する【テーマ：Debut】

今回は【テーマ：Debut】で、商品詳細ページのレビューの下に、管理画面から登録できるカスタムHTMLのブロックを追加する方法についてご紹介します。
「Debut」では商品詳細ページテンプレートは sections/product-template.liquid ですので、このファイルを修正してカスタマイズを実現するんですが、Shopifyの場合、管理画面でコンテンツなどを入力できるようにするには schema というjsonタイプの宣言が必要になります。

実際、product-template.liquid を開いてみてみると分かりますが、テンプレートはテンプレート表示部とschema部の2部構成になっているのがわかると思います。
テンプレート表示部で表示側を、schema部で入力側をコントロールしているわけです。
　
それでは実際に product-template.liquid を修正していきます。

まずschema部のsettingsを探し、一番下に次のように追記します。

{% schema %}
{
  "settings": [
    {
       ・・・
    },
    {
       "type": "html",
       "id": "product_html_area_for_custom",
       "label": "カスタム HTML",
       "default": "<div><p>Some HTML content</p></div>"
    }
  ]
}
{% endschema %}

これで管理画面の「商品ページ」設定画面に「カスタム HTML」というのが加わり、そこでHTMLを記述することができるようになりました。
　
次に、この入力された「カスタム HTML」を表示させるためのテンプレート表示部の記述ですが、今回レビューの下に表示させたいので

{{ product.metafields.spr.reviews }}

を探してその行の下に以下のように記述を加えましょう。

<div id="shopify-product-reviews" class="page-width" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

<!-- ここから -->
{% if section.settings.product_html_area_for_custom %}
  {{ section.settings.product_html_area_for_custom }}
{% endif %}
<!-- ここまで -->

これでレビューの下にカスタムHTMLを表示させることができます。