Adding a product metafield on a product page to display Related Products

[robnaples]

Hello,

I can't figure out how to add metafields that are not text to a product page template. I am trying to link a metafield with "product" content type to create a section on my product page that displays related products. I've attached a screenshot as an example. Can this be done with a Custom Liquid Block? Or do i need to create a block that can them be inserted into a product page? I have no idea how to write this code. I'm grateful for any help.

[KetanKumar]

@robnaples 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[robnaples]

Our website is here - I'm using Turbo theme and updated Shopify 2.0. I know how to create the product metafield. I just don't know how to add it to the product template. I'm hoping it's code that can be added through a custom liquid block. Thank you!

[LitExtension]

Hi @robnaples,

Please add code at custom liquid block:

{% assign productItem = product.metafields.custom.product_item.value %}
{% assign secondaryImage = productItem.media[1] %}
{% assign collection_handles = productItem.collections | map: 'handle' %}
{% if productItem.featured_media.preview_image.alt contains 'youtube' or image.alt contains 'vimeo' %}
  {% assign alt_text = productItem.title %}
{% else %}
  {% assign alt_text = productItem.featured_image.alt %}
{% endif %}

<div class="
  thumbnail
  thumbnail-hover-enabled--false
  product-{{ productItem.id }}">

  <div class="product-wrap">
    <div class="relative product_image">
      <a href="{{ productItem.url | within: collection }}">
        <div class="image__container">
          {% include 'image-element', image: productItem.featured_media.preview_image, alt: alt_text, object_fit: align_height, max_height: collection_height %}
        </div>
        {% if settings.collection_secondary_image != blank and productItem.media[1] != blank %}
          {% if productItem.media[1].media_type == 'external_video' %}
            <div class="external-video__container lazyload lazypreload secondary-media-hidden video-on-hover">
              <div class="youtube-wrapper" data-youtube-video>
                {{ productItem.media[1] | external_video_tag }}
              </div>
            </div>
          {% elsif productItem.media[1].media_type == 'video' %}
            <div class="video__container lazyload lazypreload secondary-media-hidden video-on-hover" data-html5-video>
              {{ productItem.media[1] | video_tag: controls: false }}
            </div>
          {% else %}
            {% include 'image-element', image: productItem.media[1].preview_image, alt: alt_text, additional_classes: 'secondary lazypreload secondary-media-hidden' %}
          {% endif %}
        {% endif %}
        </a>
      {% include "product-details" %}
    </div>
    <a class="product-info__caption {% if settings.thumbnail_hover_enabled %}hidden{% endif %}" href="{{ productItem.url | within: collection }}">
      {% include "product-info" %}
    </a>
  </div>

  {% unless settings.quick_shop_style == 'inline' and settings.quick_shop_enabled %}
    {% include 'collection-swatch' %}
  {% endunless %}

  {% if settings.quick_shop_style == 'inline' and settings.quick_shop_enabled %}
    {% unless collection_handles contains 'coming-soon' %}
      <div class="inline-quickshop js-product_section product-{{ productItem.id }}">
        {% include 'product-form', show_payment_button_quickshop: settings.show_payment_button %}
      </div>
    {% endunless %}
  {% endif %}
</div>

With 'product.metafields.custom.product_item.value' is the name of the product metafield you created.

Hope it helps!

[robnaples]

Hi @LitExtension ,

I tried your code. 2 things. When i insert the system says there is a syntax error likely somewhere below <div class="product-wrap">. I deleted all the code from here down and the syntax error went away. 

I tried saving the code that did not have an error and nothing appeared to be inserted into the template. It should insert between Price and Width.