Product title split and append

[BenPanda]

Hi Everyone, 

I am really struggling to output my product title in the way I want it to display in a certain part of my site. 

The product titles on the store are all structured like this "Product Name || Some other product info". In other places I am splitting the title of the product using this method:

{% assign productName = product-loop.title | split: "||" %}

{% if productName.size > 1 %}
      {% assign productName = productName[0] | append: "<br><span class='product_info_2'>" | append: productName[1] | append: "</span>" %}

{% endif %}

This is working fine, but for this particular feature on the store I am getting the product data using the following method:

      {%- for product in collections[collectionName].products -%}
        {{ product.id | json }}: {
          id: {{ product.id | json }},
          title: {{ product.title | json | split: '||' }},
          tags: {{ product.tags | json }},
          materials: [{%- for tag in product.tags %}{% if tag contains "materials - " %}{{ tag | json }}{% if forloop.last %}{% else %},{% endif %}{% endif %}{% endfor %}],
          colours: [{%- for tag in product.tags %}{% if tag contains "colour - " %}{{ tag | json }}{% if forloop.last %}{% else %},{% endif %}{% endif %}{% endfor %}],
          collections: [ {%- for collection in product.collections -%}{{ collection.id | json }},{%- endfor -%}],
          type: {{ product.type | json }},
          image: {{ product.featured_image | json }},
          price: {% if product.compare_at_price %}{{ product.compare_at_price | money | json }}{% else %}{{ product.price | money | json }}{% endif %},
          url: {{ product.url | json }},
          firstVariantId: {{product.variants.first.id}}
        },
      {%- endfor -%}

I can output the title no problem using the following:

  <h4 class="product-title">{title}</h4>

The problem is that it contains the "||" in the product title and I want to split it similarly to how I have done in other places. I've tried to use assign or capture to get the {title} object and then split, and append how I have been before but it hasn't worked. If tried this, but with no luck:

{% assign productInfo = title  %}

{% assign productInfo = productInfo[0] | append: "<br><span class='product_info_2'>" | append: productInfo[1]  | append: "</span>" %}

<h4 class="product-title">{{ productInfo }}</h4>

I just end up with an empty <h4> tag containing the <br><span class='product_info_2'></span> and no title at all. I've tried a few variations, but not sure what I am doing wrong. 

Does anyone have any ideas what I might be doing wrong?