Metafield on product card in collection page

[Dclootbox]

Hello.

How do i add Metafield under price in collection page?

I have this code:

but then it looks like this: ["5G"] instead of just 5G

I have tried with card_ in front, but then nothing comes up at all.. 

Can anyone help me? 🙂

 

[SomeUsernameHe]

The issue you're encountering with the display of your Metafield value as ["5G"] instead of just 5G suggests that the Metafield data is being stored and retrieved as an array, not as a simple text string. This is why you see the square brackets. 

You can adjust your code like this: 

{{ product.metafields.custom.forbindelse[0] }}

[Dclootbox]

That didnt work 😞

[SomeUsernameHe · Accepted solution]

If the Metafield is indeed returning a string that looks like an array, you can use string manipulation to remove the brackets and quotes.

{% assign metafield_value = product.metafields.custom.forbindelse | remove: '[' | remove: ']' | remove: '"' %}
{{ metafield_value }}

[Dclootbox]

I Think it because its a list of values, and not a value. 

just tried with one a value, and thats seems to work.

[Dclootbox]

But thats works to, do you know how i can add a border around with border-radius?

[SomeUsernameHe]

You should be able to wrap it in a div and give that div a border and radius. 

<div class="metafield-badge">
  {% assign metafield_value = product.metafields.custom.forbindelse | remove: '[' | remove: ']' | remove: '"' %}
  {{ metafield_value }}
</div>

<style>
.metafield-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border: 2px solid red;
  border-radius: 50%;
}
</style>

[Dclootbox]

That worked.

But now its on all my collection pages, can you do it so its only on one collection?

[SomeUsernameHe]

You can use {% if collection.handle == 'test' %} to only show the badge on certain collections. Just replace 'test' with your correct collection handle. 

{% if collection.handle == 'test' %}

  <div class="metafield-badge"> {% assign metafield_value = product.metafields.custom.forbindelse | remove: '[' | remove: ']' | remove: '"' %} {{ metafield_value }} </div>

{% endif %}

[Dclootbox]

Worked like a charm 😄 

You been so helpful 😄

[SomeUsernameHe]

Awesome! I am super glad I could help! 

If you need to show this on other collections you can always use something like this:

{% assign collection_handles = 'test1,test2,test3' | split: ',' %}

{% if collection_handles contains collection.handle %}
  Hello
{% endif %}

If you have any other questions, feel free to ask!

Happy Coding!