How to display taxonomy values in liquid templates?

We’re now using taxonomy category metafields, and have our product sizes linked to category metafields, see screenshot below. My question is: how do we display the base size in a liquid template? I can display the label and the global taxonomy ID (taxonomy_reference), but can’t get the base size from the taxonomy value. We want to display our options on PDP as eg. “UK M / 10”.

Any advice or knowledge as to whether this feature will be implemented in the future would be great, thanks.

PS. I suppose I could access them through product.collections.first.filters but that seems a bit tortuous!

Hi,

Hope this will work

  • Use .value.title to get the pretty text.
  • Example: {{ product.metafields.custom.size.value.title }}
  • Access Value’s Properties
  • Final Code for PDP (Product Detail Page)
    Code example
{% if product.metafields.custom.size.value %}
  

Size: {{ product.metafields.custom.size.value.title }}

{% endif %}

No, I do not think there is a direct way in Liquid.

You can pull some limited subset from https://github.com/Shopify/product-taxonomy and use that data to map taxonomy values to their names, but that’s weird.

Hi, thanks for the suggestion! This doesn’t work, unfortunately. The closest thing is if I do:

{{ product.metafields.shopify.size.value }}

this returns a MetaobjectListDrop, which is where I can see all the taxonomy value IDs - from where I am unable to get the base sizes.
I can also do:

{{ metaobjects['shopify--size']['uk-m'].label }}
{{ metaobjects['shopify--size']['uk-m'].taxonomy_reference }}

but this only returns the label, ‘UK M’ and the taxonomy reference, ‘gid://shopify/TaxonomyValue/2880’. I can’t get to the base size, ‘10’.
I have a JavaScript workaround, using a hard-coded list of taxonomy values, but this is far from ideal.

Thanks Tim, I think you’re right!
As a follow-up, the solution turned out even more convoluted than we had imagined.
We have a theme object stored on the window, so we added the taxonomy IDs with the base sizes to that, eg.

window.theme = {
    baseSizes = [
        {
          "id": "gid://shopify/TaxonomyValue/2880",
          "name": "10"
        }
    ];
}

On PDP, we have a small script that gets all of the taxonomy IDs from the products category metafield, eg.


And then we do the logic to match the IDs to the option labels and get the base size and then append the base size to the exsting labels.
Then the PLP. Thinking we could use the collection filters like this:

assign sizeFilter = collection.filters | where: 'name', 'filter.v.t.shopify.size' | first
assign sizeFilterValues = sizeFilter.values

and then get the values and labels to get a list of the taxonomy IDs with their base sizes, respectively.

This works but then when you try to access the metaobjects based on their handles in order to access their labels, you run into the issue that you can only access a max. of 20 unique metaobjects via handle, and of course you can only loop through 50 of them, so that’s not an option either.
So you accept that this has to be done with JavaScript as well, sigh… So then we added a script to our product grid item template that fixes things for the PLP.

But now you remember that anywhere these templates are injected, in our case for quick add modals and related/recommended product sections, these scripts won’t run. So then you add some JS in your theme JS file to map sizes in the relevant places using the global object created earlier.

Then rinse and repeat for shoe sizes!

So, to finish on a constructive note - could we please have something like this:

{{ variant_option.linked_metafield }}