Expanse Theme - Fit single line metafields into table in mobile view

Store Design
1

Hoping someone can help me here.

In final stages of setting up new 2.0 Expanse theme. I need to fit multiple choices of metafields (grape varieties in this case!) into a table. Thought I’d cracked it by using multi-line metafields instead but then as I need the grape variety metafields for filtering also, I can’t use multi-line as can’t use multi-line for filtering. It works fine for wines with single grape varieties but when you need to select more than one, the text runs off screen breaking the mobile view. As below:

Metafield Table - Mobile View.jpg
Metafield Table - Mobile View.jpg485×876 58 KB

Also, would love to remove the [“,”] around multiple choices of metafields! But that’s not as important as getting the text to fit in the table somehow!

Thanks in advance!

2

For further info, this is the custom HTML (liquid) that is used in the theme section:

Country {{ product.metafields.global.Country }}
Region {{ product.metafields.global.Region }}
Grapes {{ product.metafields.custom.grapes }}
Alcohol % {{ product.metafields.custom.alcohol }}
Suitable for Vegans {{ product.metafields.global.Vegan }}
Organic {{ product.metafields.global.Organic }}

Thanks!

3

In case it helps anyone else, I’ve worked it out from looking here. https://shopify.dev/api/liquid/filters#metafield_text Need to display the metafield as text. So, just add:

| metafield_text }}

after {{ product.metafields.custom.grapes

so… {{ product.metafields.custom.grapes | metafield_text }}

and it displays a list of single line metafields as text, even including “and” before the last metafield!