Remove return line for metafield

Shopify Discussion

Topic summary

A user is trying to display a size metafield inline as part of a sentence rather than as a separate line or list item. They’ve already removed bullet points with CSS but need the text to flow on one line.

Proposed solutions include:

  • Adding display: inline-flex; to the metafield array class
  • Using the strip_newlines filter in Liquid code to remove line breaks
  • Restructuring the HTML/Liquid to use <span> or <p> tags instead of list elements (<ul>/<li>), combined with display: inline; CSS

Key recommendation: Avoid wrapping single-line metafields in list tags. Instead, render them directly within inline elements like <span>Size: {{ product.metafields.custom.size }}</span> to achieve natural sentence flow.

One responder requested the store URL to provide a more specific solution. The issue remains open pending implementation feedback.

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

Help! The size is a metafield, but how do i code it to be as if itʻs part of the sentence. I want it to be all on one line.

Iʻm using this code to remove the bullet point but I want it to all be on one line like the example.

.metafield-single_line_text_field-array {
padding: 0;
}
.metafield-single_line_text_field {
list-style: none;
}

Screenshot 2025-06-18 at 10.22.56 PM.png
Screenshot 2025-06-18 at 10.22.56 PM.png3024×1504 382 KB

2

You can try to use this code and check again.

.metafield-single_line_text_field-array {
 display: inline-flex;
}
3

Could you please share your store url so that I can provide you solution code.

5

Hi @ashleyfonseca

If your size metafield is showing as a list item but you want it to display as part of a sentence on a single line, you’ll need to adjust both your HTML/Liquid code and CSS.

Example Goal:

Instead of a bullet point or stacked display, you want:
Size: Medium (all on one line)

  1. Liquid Code Example:

Make sure your metafield is rendered inside a regular element like a span or div, not a ul or li. For example:

<p>Size: {{ product.metafields.custom.size }}</p>

Or:

<span>Size: {{ product.metafields.custom.size }}</span>

Replace custom.size with your correct namespace and key.

  1. CSS (if needed):

If you’re already targeting metafield styles, you can simplify or remove the list-specific styling:

.metafield-single_line_text_field-array,
.metafield-single_line_text_field {
  list-style: none;
  padding: 0;
  display: inline; /* Ensures it stays on one line */
}

But ideally, if you switch to using span/p in your Liquid, you won’t need this extra styling at all.

Please note:

Avoid wrapping single-line text metafields in list (

    /
  • ) tags unless you want bullet points or vertical stacking.

    Let me know if you have any questions!