Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Metafield on product card in collection page

Solved

Metafield on product card in collection page

Dclootbox
Excursionist
42 0 8

Hello.

 

How do i add Metafield under price in collection page?

I have this code:

 

Skærmbillede 2024-01-11 kl. 19.10.38.png

 

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

 

Skærmbillede 2024-01-11 kl. 19.12.23.png

 

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

 
Can anyone help me? 🙂

Accepted Solution (1)
SomeUsernameHe
Shopify Partner
517 57 110

This is an 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 }}

 

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee

View solution in original post

Replies 10 (10)

SomeUsernameHe
Shopify Partner
517 57 110

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] }}
Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
Dclootbox
Excursionist
42 0 8

That didnt work 😞

SomeUsernameHe
Shopify Partner
517 57 110

This is an 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 }}

 

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
Dclootbox
Excursionist
42 0 8

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
Excursionist
42 0 8

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

SomeUsernameHe
Shopify Partner
517 57 110

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>

 

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
Dclootbox
Excursionist
42 0 8

That worked.

 

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

SomeUsernameHe
Shopify Partner
517 57 110

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 %}

 

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
Dclootbox
Excursionist
42 0 8

Worked like a charm 😄 

You been so helpful 😄

SomeUsernameHe
Shopify Partner
517 57 110

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!

 

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee