Shopify metafield base frequently bought together liquid code issue

Question

I have created a product metafield namespace.key which is sequence (theme.fbt) for frequently bought together section in single product page

I also Added item in Shopify admin product for showing bundle item

But still issue not linked product url, product title and price doesn’t work of my website. It shows only same product page when clicked on bundle item

Here is a screenshot View Screenshot

Anyone please assist me where is my code issue?

Here is my liquid code

{% if product.metafields.theme.fbt %}
<div class="frequently-bought-together-section">
  <h2>Frequently Bought Together</h2>
  <div class="fbt-products">
    {% assign fbt_product_ids = product.metafields.theme.fbt %}
    {% if fbt_product_ids %}
      {% assign fbt_products = fbt_product_ids | split: ',' %}
      {% for id in fbt_products %}
        {% assign related_product = all_products[id] %}
        {% if related_product %}
          <div class="fbt-product">
            <a href="{{ related_product.url }}"><img src="{{ related_product.featured_image | img_url: 'medium' }}" alt="{{ related_product.title }}"></a>
            <p class="price">{{ related_product.price | money }}</p>           
          </div>
        {% endif %}
      {% endfor %}
    {% else %}
      <p>No products found.</p>
    {% endif %}
  </div>
</div>
  {% endif %}

Answer 1

It looks like the issue is with how the metafield data is being processed. Based on your code, it seems you're trying to use all_products to retrieve related products, but Shopify metafields can already include detailed product objects if configured correctly.

Here's an updated version of your code that should resolve the issue:

{% if product.metafields.theme.fbt %}
    <div class="frequently-bought-together-section">
      <h2>Frequently Bought Together</h2>
      <div class="fbt-products">
        {% if product.metafields.theme.fbt.value %}
          {% for related_product in product.metafields.theme.fbt.value %}
            {% if related_product %}
              <div class="fbt-product">
                <a href="{{ related_product.url }}">
                  <img src="{{ related_product.featured_image | image_url: width: 500 }}" alt="{{ related_product.title }}">
                </a>
                <p class="price">{{ related_product.price | money }}</p>
              </div>
            {% endif %}
          {% endfor %}
        {% else %}
          <p>No products found.</p>
        {% endif %}
      </div>
    </div>
{% endif %}

What's Changed

• Using product.metafields.theme.fbt.value:

The .value property of the metafield directly provides the array of related products. This eliminates the need to use all_products or manually split IDs. Learn more about accessing metafield values here

• The image_url filter accepts a numeric width, not a string.: Check the documentation here

The related_product object retrieved from metafields differs slightly from Shopify's standard product object. You can inspect its structure in the browser console for debugging:

<script>
  console.log({{ related_product | json }});
</script>