How to access URL and text from metafield of type "Link"

Technical Q&A
1

I couldn’t find documentation about this and had to figure it out by trial and error, so I’m recording it here for others to learn from.

  • The Liquid documentation on metafields here doesn’t even list “Link” as a metafield type: Liquid objects: metafield
  • The closest field type it lists is “url_reference” which it lists as being a simple string, which is not helpful here at all

TL;DR: Use metafield_key.value.url to get the url, and metafield_key.value.text to get the text.

Here’s an example where the link is inside a custom metaobject Warranty, which is referenced by a product in metafield “custom.warranty”:

<a href="{{ product.metafields.custom.warranty.value.manufacturer_details.value.url }}">{{ product.metafields.custom.warranty.value.manufacturer_details.value.text }}
</a>

If the link URL was stored at the product level instead and that metafield was custom.warranty_link, the Liquid code to get the link data would be:

<a href="{{ product.metafields.custom.warranty_link.value.url }}">{{ product.metafields.custom.warranty_link.value.text }}
</a>

Hope that is helpful to someone.

2

A LINK has a url and text.

A URL is not a LINK, a URL type is ONLY the url no extra text.
Using a URL type is just repeating the url value in the href and in the content without a text content; of the anchor tag etc.

When there’s a url and text use the LINK type
https://shopify.dev/docs/apps/build/custom-data/metafields/list-of-data-types#:~:text=link,store%20link%20content

Test types {% if RESOURCE.metafield.custom.namespace.type == "url_reference" %}....{%else %}...{% endif %}
Or use fallbacks in case of no .text {{ RESOURCE.metafield.custom.namespace.value.text| default: RESOURCE.metafield.custom.namespace }}

The data types are linked in the doc of metafields object to here:
https://shopify.dev/docs/apps/build/custom-data/metafields/list-of-data-types

But it is silly that link or 'link_reference` type ?? hasn’t made into that liquid doc they might be waiting for better theme editor support as a direct setting or maybe something with RTE formatting /shurg
Link is also still MIA for settings https://shopify.dev/docs/storefronts/themes/architecture/settings/input-settings

There is a feedback Was this page helpful? Yes No at the bottom of each .dev doc page.
But if missing across surfaces might want to post on the .dev forum.

⛏️🏺🔎⚱️

There should be stuff about this in the partner slack (soon to disappear Dec 15th), though I swore there was something about this on the .dev forum already but I can’t find it /shrug

3

I have edited the post to reflect that the type is in fact “Link” and not “URL”.