Add metafields to sections on PDP

main-product.liquid

{% comment %} hotspots carousel {% endcomment %}
{% assign hotspotsMetafield = product.metafields.custom.pl_hotspots_carousel.value %}
{% assign hotspotsContent = product.metafields.custom.pl_hotspots_content.value %}

{%- capture hotspots -%}
  [
    {%- for hotspot in hotspotsMetafield  -%}
      {
        "x_coordinate": {{ hotspot.x_coordinate_hostpost.value | json }},
        "y_coordinate": {{ hotspot.y_coordinate_hostpost.value | json }},
        "headline": {{ hotspot.headline.value | json }},
        "text": {{ hotspot.text.value | json }}
      }
    {%- unless forloop.last -%}, {%- endunless -%}
    {%- endfor -%}
  ]
{%- endcapture -%}

{% if hotspotsContent != blank and hotspotsMetafield != blank %}
  {% render 'layout-hotspots',
    hotspots: hotspots,
    title: hotspotsContent.title,
    eyebrow: hotspotsContent.eyebrow,
    image: hotspotsContent.media
  %}
{% endif %}

{% comment %} press carousel {% endcomment %}
{% assign pressMetafield = product.metafields.custom.pl_press_carousel.value %}

{% if pressMetafield != blank %}
  {% render 'layout-press-carousel', slides: pressMetafield, isPDP: true %}
{% endif %}

{% comment %} Recommended Products {% endcomment %}
{% assign suggestedMetafield = product.metafields.custom.pl_suggested_products.value %}
{% assign suggestedProducts = suggestedMetafield.products.value %}

{% if suggestedMetafield != blank %}
  <div class="mt-60 mb-50 lg:mt-90 lg:mb-70">
    <div class="container">
      <h2 class="header-3 mb-30 lg:mb-70 text-center">{{ suggestedMetafield.title }}</h2>
    </div>
    {% render 'layout-collection-carousel', products: suggestedProducts %}
  </div>
{% endif %}