How can I switch array from vertical to horizontal on a product page?

Store Design
,

Topic summary

  • Issue: Icons from a product metafield (dietary credentials like “organic,” “vegan”) render in a vertical list and appear too large when added via a custom Liquid block. The goal is a horizontal row of smaller icons (reference image provided).

  • Implementation details: The Liquid loops over product.metafields.custom.dietary_creds.value and outputs each image. No CSS was included to control layout or size; adjustments likely require CSS (e.g., flex/inline display and fixed dimensions).

  • Support requests: A responder asked for the store URL and password (if enabled) to inspect. The merchant shared www.wearefairtrade.com.

  • Latest update: The responder could not find the issue live. The merchant had switched away from the problematic template because the product is live and offered to switch back when someone is ready to review.

  • Status: Unresolved and pending coordination to reproduce the issue for diagnosis. Next step is scheduling a time to re-enable the affected template for inspection. The attached image and the Liquid snippet are central to understanding the problem.

Summarized with AI on January 24. AI used: gpt-5.
1

I have a metafield, on one of my product page templates, that comprises a list of icons denoting “organic’, 'vegan” etc.
When I deploy the metafield using a custom liquid block on the template, the icons show up as a vertical array and they are a bit too large.

This is the customer liquid code I have used:
{% assign array_of_badges = product.metafields.custom.dietary_creds.value %}
{% if array_of_badges %}
{% for product_badge in array_of_badges %}

{% endfor %}
{% endif %}

Can anyone help me switch the array to horizontal and reduce the size of the icons? Basically, I want it to look like the top row in the attached pic instead of the bottom row

Vertical array.png
Vertical array.png1344×2021 236 KB

2

Hey @WeAreFairTrade
Kindly share your Store URL and Password if enabled

3

Hi Moeed
it is www.wearefairtrade.com

4

Hey @WeAreFairTrade

I’m unable to locate what you mentioned in the screenshot. Did you remove it?

Moeed_0-1689227460963.png
Moeed_0-1689227460963.png1073×933 143 KB

5

Hi Moeed.

Sorry, Yes, I switched the template away from the one with the problem because the product is live. If you can let me know when you are going to look, I will switch back to the template that contains the array with the problem.