Metafield Question - How to remove the [""] when displaying the Array on Page

Technical Q&A
, , ,

Topic summary

A developer encountered an issue displaying Shopify metafield arrays in a custom Liquid table, where values appeared wrapped in brackets and quotes (e.g., [“value”]).

Initial Problem:

  • Array metafields were rendering with unwanted formatting characters when displayed directly in table cells
  • The code was attempting to display product metafields (blank_series, rod_piece, blank_length, line_rating) in a structured table format

Suggested Solution:
Another user recommended using Liquid for loops to iterate through array values instead of printing them directly, which would properly extract individual items.

Final Resolution:
The original poster found a working solution by:

  1. Adding .value to metafield references to access the raw array data
  2. Using the join filter with a separator ( | join: " | ") to format multiple array values with proper spacing

This approach successfully removed the brackets and quotes while maintaining readable formatting in the table. The discussion concluded with clarification that both the for loop method and the .value + join approach are valid solutions depending on the desired output format.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hello. So I have some code that I slapped together. How would I remove the [" "] that is wrapped around the objects in the Array. Im just using the Custom Liquid section to create this. Below I’ll add a screen shot of the table that I’m working on and also the Code that I’m using. Thanks for any help or guidance on how to fix this.

Screen Shot 2025-02-25 at 11.27.30 AM.png
Screen Shot 2025-02-25 at 11.27.30 AM.png1440×900 140 KB

Code:


        {% for product in collection.products %}
        
      {% endfor %}
      

| Series | Rod Pieces | Rod Length | Line Rating | Price | Buy |
| - | - | - | - | - | - |
| {{ product.metafields.custom.blank_series }} | {{ product.metafields.custom.rod_piece }} | {{ product.metafields.custom.blank_length }} | {{ product.metafields.custom.line_rating }} | {{ product.price | money_with_currency }} | <br>            {% if product.variants.size > 0 %}<br>              View product<br>            {% endif %}<br>           |
2

Hey @DavidBeuy , per Shopify’s Liquid docs, it seems the best way to print array values is with a for loop.

For example, instead of just printing:

{{ product.metafields.custom.blank_series }}

You would loop through and print each value using something like:

{% for item in product.metafields.custom.blank_series %}
  {{ item }}
{% endfor %}
3

So question. Im assuming that I need to pass something in where {{ item }} is correct? Im assuming “Item” isn’t the correct syntax to print up the array values.

And just to verify this is how it should theoretically look below?

{% for item in product.metafields.custom.blank_series %}
        {{ item }}
      {% endfor %}
{% for item in product.metafields.custom.rod_piece %}
        {{ item }}
      {% endfor %}
{% for item in product.metafields.custom.blank_length %}
        {{ item }}
      {% endfor %}
{% for item in product.metafields.custom.line_rating %}
        {{ item }}
      {% endfor %}

Thanks for your patience, I’m relatively new to coding so Im learning a lot here. I also didn’t know about the Shopify Dev Docs so I’ll look over that. Just seems daunting when your newer ha. Thanks!

4

Also, what would you call {{ item }} in this situation? Is that the product of the Array? I have a feeling that there are set term to print the value or its some thing that I need to put in that I made but don’t know what it is like it should be {{ line_rating }} or {{ custom.line_rating}}

Just thinking out loud. Thanks Again.

5

I think I found my own solution. Or at least it worked for me and my needs.

1st - I needed to add .value to the end of my product metafields inputs to remove the [" "] so that displayed it the way I wanted with out the brackets and the quotes.

2nd - I added {{ | join " | " }} to the end to add the spacing I need between to create a spacing and break in between each of the values in that array.


    {% for product in collection.products %}
    
  {% endfor %}
  

| Series | Rod Pieces | Rod Length | Line Rating | Price | Buy |
| - | - | - | - | - | - |
| {{ product.metafields.custom.blank_series.value }} | {{ product.metafields.custom.rod_piece }} | {{ product.metafields.custom.blank_length.value | join: " | " }} | {{ product.metafields.custom.line_rating.value | join: " | "}} | {{ product.price | money_with_currency }} | <br>        {% if product.variants.size > 0 %}<br>          View product<br>        {% endif %}<br>       |
6

Glad you were able to find a solution that works for you!

To be clear, I believe the example you previously shared should have worked:

{% for item in product.metafields.custom.blank_series %}
        {{ item }}
      {% endfor %}

When working with a for loop, you essentially assign a variable, in this case “item” which takes on each value from the array one at a time, and then the inside of the loop executes individually for each item, in this case printing the value.

Here’s the Liquid reference for this specifically: https://shopify.github.io/liquid/basics/types/#array