Metafield List display with line breaks

Store Design
, ,

Topic summary

Goal: Show each value from a product metafield list on its own line instead of being concatenated with “and”.

Context: Using a text block with metafield_text in product.json showed items joined by ‘and’. Example config:

  • text: {{ product.metafields.custom.edition_by_size | metafield_text }}
  • text_style: uppercase

Solution proposed: Use a Custom Liquid block to iterate the list values:

  • Loop over product.metafields.custom.edition_by_size.value
  • Output each item in its own

    tag for line breaks

  • Apply uppercase via the Liquid upcase filter or CSS on the

    .

Outcome: After a minor variable name adjustment, the line-break display works. However, the uppercase styling is not applying as expected in the Custom Liquid block. Further tweaking (e.g., using {{ edition | upcase }} or adding CSS text-transform: uppercase to the

) may be needed.

Status: Partially resolved (line breaks fixed); uppercase styling remains an open issue.

Summarized with AI on December 20. AI used: gpt-5.
1

Hi,

I’m trying to get a list of values in a custom metafield to display with each one on a new line, at the moment they appear together linked by ’ and ’

Screenshot 2024-09-04 111723.png
Screenshot 2024-09-04 111723.png445×336 9.44 KB

block code in product.json is

 "text_pqP6Ef": {
          "type": "text",
          "settings": {
            "text": "{{ product.metafields.custom.edition_by_size | metafield_text }}",
            "text_style": "uppercase"
          }
2

@JS1007 you’ll need to try it with a custom liquid block and paste in the following:

{% assign editions = product.metafields.custom.edition_by_size.value %}
{% for edition in editions %}
  

{{ edition | upcase }}

{% endfor %}

You might have to add some styling to the

-Tag

3

Amazing thank you, just had to amend ‘editions’ in Line 1 to ‘edition’ and it works

I’m not getting the uppercase text style with that solution, will keep playing with it