Remove return line for metafield

Shopify Discussion
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!