How input metafield on theme become liquid code

[tokito]

Hi guy,

Im trying to create an app. I just wanna ask about how can a simple liquid code like this one in product review :

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

 can turn into

<div class="spr-container">
  <div class="spr-header">
    <h2 class="spr-header-title">Customer Reviews</h2><div class="spr-summary" itemscope itemprop="aggregateRating" itemtype="http://schema.org/AggregateRating">
        <meta itemprop="itemReviewed" content="Striped Pareo Towel">
        <span class="spr-starrating spr-summary-starrating">
          <meta itemprop="bestRating" content="5">
          <meta itemprop="worstRating" content="1">
          <meta itemprop="reviewCount" content="1">
          <meta itemprop="ratingValue" content="2.0">
          <i class="spr-icon spr-icon-star"></i><i class="spr-icon spr-icon-star"></i><i class="spr-icon spr-icon-star-empty"></i><i class="spr-icon spr-icon-star-empty"></i><i class="spr-icon spr-icon-star-empty"></i>
        </span>
        <span class="spr-summary-caption"><span class='spr-summary-actions-togglereviews'>Based on 1 review</span>
        </span><span class="spr-summary-actions">
        <a href='#' class='spr-summary-actions-newreview' onclick='SPR.toggleForm(2336778911792);return false'>Write a review</a>
      </span>
    </div>
  </div>
  <div class="spr-content">
    <div class='spr-form' id='form_2336778911792' style='display: none'></div>
    <div class='spr-reviews' id='reviews_2336778911792' ></div>
  </div>
</div>
</div>

 I have read about metafield in this .

Can someone tell more detail about this? I see all metafield app can do that.  Also in snippets I see none of those liquid code

[Jason · Accepted solution]

A metafield can hold a string and in this case the value is html code.

{{ product.metafields.spr.reviews }}

^ That code pulls the value of the metafield from the product and adds in to the page. The review app populates the metafield as needed so Liquid is able to grab it later. 

The API docs for metafield will also be of use to you:
https://help.shopify.com/en/api/reference/metafield

[tokito]

Hi Jason,

Thank for your help,

May I ask one more thing? I have put a html string inside the metafield and call it successful in product-template.liquid but the liquid code not work it just print liquid code like some words.

If I put the liquid directly not via a metafield it work fine. Do you know how to make it possible?

The liquid look like this : <div>{{shop.metafields.xyz.xyz}}</div> it represent:

{% unless shop.metafields.cmld == blank %}
{%- assign cmld = shop.metafields.cmld -%}
    <div class="slider">
    {%- for field in cmld -%}
          <div><img src="{{ field | last }}" /></div>
     {% endfor %}
     </div>
{% endunless %}

[tokito]

I want to ask also about this case too:

<div data="scmBannerSlider" data-id="14916" style="display: none;"></div>

 I dont know how it work too?