How can I separate metafield list items in Shopify?

Hello,

I am using metafields to select a list of countries. Currently, the way I’ve added the metafield data on my store the multiple items appear as one single block of text how can I have the list be outputted with commas to separate each list item

This is what I currently have that outputs a block of text

<div>{{ product.metafields.custom.countries.value }}</div>

Currently, the list looks like this EnglandFranceItaly but I would like it to look separated with commas i.e England, France, Italy.

As you may be able to already see I’m very new to Liquid and Shopify Development altogether so would appreciate any help.

Thanks!

How have you save the meta field value, could you show the screenshot of that section as well please?

Ideally, something like this should work where you loop through the values and add a comma and space at the end.


{% for country in product.metafields.custom.countries.value %}
- {{country }}, 
{% endfor %}

If you have found the answer helpful, please like my reply and mark the question as solved. Thank You.

Sorry, this is the way I have the meta field setup. A for loop makes perfect sense I’ll give it a shot. I need the text in one line but that should be simple HTML and CSS I assume.

Thanks!

The code I have given should work. Let me know how it goes.

Yep worked perfectly thank you!

@rahuli20

You should use Multi-line text for your country metafile like this

Then add the value to it like this

And use this code to parse the list

{% assign countries = product.metafields.custom.countries | newline_to_br | strip_newlines | split: "
" %}

{% for country in countries %}
  - {{ country }}
{% endfor %}   

This is the result

Try it and let me know