Shopify show related product with count validation and meta value

 
Go to theme and add custom liquid block where you want to show related products and also mention meta field value that you want to show instead of product title


{% assign related_products = product.metafields.custom.related_products.value %}

{% if related_products and related_products != blank %}
<div class="related-products">
  <h3>Related Products</h3>
  <div class="related-products-list">

    {% for recommended in related_products %}
    <div class="related-product">
      <a href="{{ recommended.url }}" class="related-product-link">
        <div class="related-product-image">
          {% if recommended.featured_image %}
            <img src="{{ recommended.featured_image.src | img_url: 'medium' }}" alt="{{ recommended.title }}">
          {% else %}
            <img src="{{ 'no-image.png' | asset_url }}" alt="No image available">
          {% endif %}
        </div>
        <div class="related-product-details">
          <!-- Displaying the color_name metafield as the title -->
          <h4 class="related-product-title">
            {% if recommended.metafields.custom.color_name %}
              {{ recommended.metafields.custom.color_name.value }}
            {% else %}
              {{ recommended.title }}
            {% endif %}
          </h4>
        </div>
      </a>
    </div>
    {% endfor %}

  </div>
</div>
{% endif %}


css to beautify the section


.related-products {
  margin-top: 20px;
}

.related-products h3 {
  font-size: 1.5em;
  margin-bottom: 10px;
}

.related-products-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Adjust spacing between related products */
}

.related-product {
    width: calc(50% - 20px);
    padding: 10px;
    border: 1px solid #ddd;
}

.related-product-link {
  display: flex;
  flex-direction: column;
  text-align: center;
  text-decoration: none;
  color: #333;
}

.related-product-image img {
  width: 100%;
  height: auto;
  max-height: 200px; /* Adjust image height as needed */
  object-fit: cover;
  border-radius: 5px;
}

.related-product-details {
  padding: 10px 0;
}

.related-product-title {
    color: var(--g-color-heading);
    font-weight: var(--g-p-font-weight);
    line-height: var(--g-p-font-lineheight);
    font-size: var(--g-p-font-size);
    font-family: var(--g-p-font_family);
    letter-spacing: var(--g-p-font-spacing);
    text-transform: var(--g-p-font-transform);
    display: block;
}

.related-product-price {
  font-weight: bold;
  color: #f00; /* Adjust price color */
}