All things Shopify and commerce
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
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;
}
You can try to use this code and check again.
.metafield-single_line_text_field-array {
display: inline-flex;
}
- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Could you please share your store url so that I can provide you solution code.
If your metafield has line breaks you want to remove, you can use the strip newlines filter in your Liquid code. It will display the text in a single line without returns.
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.
Instead of a bullet point or stacked display, you want:
Size: Medium (all on one line)
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.
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.
Avoid wrapping single-line text metafields in list (<ul>/<li>) tags unless you want bullet points or vertical stacking.
Let me know if you have any questions!