How can I display two metafields on the same line in a custom liquid block?

Technical Q&A
,

Topic summary

A user is working with Shopify Liquid to display two metafields (an image file and rich-text) on the same line within a custom block. Initially, the metafields appeared on separate lines despite attempts to combine them.

Solution provided:

  • Wrap both metafield tags inside a parent <div> container
  • The parent div automatically positions child elements inline
  • Additional styling may be needed on the parent div depending on desired layout

Follow-up question:
The original poster successfully implemented the solution but now wants to control vertical spacing when creating multiple rows of these metafield pairs. Their attempt added excessive space between lines.

Status: The helper suggested using CSS flexbox positioning and referenced MDN documentation on flex container alignment, but specific spacing solution remains pending. The discussion appears ongoing as the exact CSS implementation for controlling row spacing hasn’t been fully resolved.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

I have 2 metafields I am including in a custom liquid block: One is a file (image) and one is rich-text.

I have figured out how to include both to make them functional and visible, but I want to put them on the same line.

When I add this code, they always separate into 2 lines:

{{ product.metafields.custom.product_specs_icon_field | metafield_tag }}
{{ product.metafields.custom.product_specs_field_ | metafield_tag }}
2

A simple solution is the add two divs inside another div block:


{{ product.metafields.custom.product_specs_icon_field | metafield_tag }}

{{ product.metafields.custom.product_specs_field_ | metafield_tag }}

You might need to add other styling to the parent div depending how the content appears.

1 Like
3

That worked well!

If I wanted two lines of this code, how would I control the space between them?

I tried this, but a lot of space was added between the 2 lines:


{{ product.metafields.custom.product_specs_icon_field | metafield_tag }}

{{ product.metafields.custom.product_specs_field_ | metafield_tag }}

{{ product.metafields.custom.product_specs_icon_field | metafield_tag }}

{{ product.metafields.custom.product_specs_field_ | metafield_tag }}
4

It is a bit difficult to comment without seeing your html code. Please refer this regarding flex positioning: Aligning items in a flex container - CSS: Cascading Style Sheets | MDN (mozilla.org)

1 Like