jquery - Shopify Liquid テンプレート内に複数のスパンを挿入する

Question

NodeJSでjqueryを使用して、Shopifyのsections/product-template.liquidテンプレート内のプレースホルダーとして、異なる場所に3つのスパンを追加したいと考えています。

テンプレートはこんな感じ。

<div class="product-template__container page-width" itemscope itemtype="http://schema.org/Product" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true">
 <meta itemprop="name" content="{{ product.title }}">
 <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
</div>

{% if collection %}
 <p class="text-center return-link-wrapper">
  <a href="{{ collection.url }}" class="btn btn--secondary btn--has-icon-before return-link">
    {% include 'icon-arrow-left' %}
    {{ 'products.product.back_to_collection' | t: title: collection.title }}
  </a>
 </p>
{% endif %}

{% unless product == empty %}
 <span id="ProductJson-{{ section.id }}">
  {{ product | json }}
 </span>
{% endunless %}

上記のdiv、p、spanの中にそれぞれ1つのスパンを追加したい。

上記の完全な文字列を jQuery に変換すると、クラス 'product-template__container' を持つ div のみにアクセスできますが、{%...%} 内で条件付きでレンダリングされる他の要素にはアクセスできません。

条件要素にスパンを追加するにはどうすればよいですか?