Product Metafield - Showing chosen product on a product page

Store Design
, ,

Topic summary

A user is attempting to display a referenced product on a product page using Shopify metafields. They successfully created a Product-type metafield with storefront access, but encountered issues implementing it.

Initial Problem:

  • The custom liquid code only displays the product’s global ID (gid://shopify/Product/9018545428977) instead of actual product details
  • Unable to render the product itself on the page

Proposed Solution:
Another user provided code to:

  • Extract the product ID from the GID string
  • Use all_products to fetch product details
  • Display the product title and link if it exists

Remaining Issues:

  • The link only refreshes the current product page instead of navigating to the referenced product
  • Only displays a link rather than comprehensive product information (image, name, price)
  • The user expected more visual product details, not just a hyperlink

Status: Unresolved. The user expressed frustration that Shopify’s metafield feature lacks clear implementation guidance and requires custom coding rather than offering a simple block-based solution.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Hello,

So I’m trying to reference another product on a product page.

I have done the following:
-Created a metafield under “Product”

-This metafield I selected “Product” for the metafield type.

-Selected “Storefronts access”

I got it to show on the product page using the custom liquid block and the following code:

{{ product.metafields.custom.alternate_product  }}

Problem I seem to be having: it won’t actually show a product. It throws this code in place of where the product should show:

gid://shopify/Product/7798245458109

Is there some reason why it will only show that but not the actual product?

Thank you in advance for your time

2

Hi @cmproduct85736 ,

To display the actual product instead of its ID, you need to fetch the product details using the product ID.

Here’s the code:

{% assign product_gid = product.metafields.custom.alternate_product %}
{% assign product_id = product_gid | split: '/' | last %}
{% assign alternate_product = all_products[product_id] %}

{% if alternate_product %}
  
    ## {{ alternate_product.title }}
    View Product
  

{% else %}
  

Alternate product not found.

{% endif %}

Explanation1. Extract the product ID from the gid://shopify/Product/7798245458109 string.

  1. Use all_products to fetch the product details.
  2. Display the product’s title and link if it exists.

Thanks!

3

Hi @thirtycoders

Thank you for the quick reply and that code! I would have never figured that out on my own…why is Shopify putting that feature there but no way to know how to use it properly? You should be able to select that option and just use it (as a block) - no code necessary. Makes no sense.

Anyway, unfortunately it didn’t really work.

A) It only put a link? I was hoping it would maybe show the product picture, name and the price? Or at least the product name and picture?

B) The link simply refreshes the current product page that I’m on when I click the link. It does not bring me to the product I wanted.

Thank you again in advance!