Shopify themes, liquid, logos, and UX
We have metafield tabs on our product pages and on one tab, we need to be able to bold and italicize specific words. I've been seeing ways to bold specific words but nothing for doing both and I can't find anything for italicizing in metafields. An example would be that 'Vitellaria paradoxa' and the other botanical names need to be italicized and 'Shea' needs to be bolded (not all words in parenthesis need to be bolded, only this particular one because it is a nut allergen).
We are using the pipeline theme.
Solved! Go to the solution
This is an accepted solution.
I just realized that it can only be done when it's a single line text and not multi.
So if you wanted to change your metafield to a single line text, you would just need to put <p> at the end of the paragraph to start the next set of words on a new line with space in between. I put an example from our site below and a screenshot to show what it ends up looking like. Maybe you can create a test metafield to see if it works for you?
<b>Backpacks roughly measure-- </b> <br>10.5” Wide <br>12.25” Tall <br>2.75” Depth <br>7.5” Front Pocket Height<p> <b>Fanny Pack Measures-- </b>
I've bolded and italicized on our site using html tags in the metafield, so maybe this could work for you as well.
To italicize use <i> at the beginning of the word and then close it with </i> where you want the italics to end. To bold, do the same except use <b> and close with </b>.
Example: <i>Vitellaria paradoxa</i><b> (Shea)</b><i> Nut Butter*</i>
This worked on my page. We are currently using Pipeline 6.1.
We are using pipeline 6.4.0 so theoretically it should work for us as well but I just gave it a try and this is how it's showing on the product page. Thank you for the suggestion though. It would have been so simple your way
Did you have to change anything in the validation fields of the metafield definitions?
This is an accepted solution.
I just realized that it can only be done when it's a single line text and not multi.
So if you wanted to change your metafield to a single line text, you would just need to put <p> at the end of the paragraph to start the next set of words on a new line with space in between. I put an example from our site below and a screenshot to show what it ends up looking like. Maybe you can create a test metafield to see if it works for you?
<b>Backpacks roughly measure-- </b> <br>10.5” Wide <br>12.25” Tall <br>2.75” Depth <br>7.5” Front Pocket Height<p> <b>Fanny Pack Measures-- </b>
Thank You! This worked perfectly once we switched over the field type
You're welcome! Glad it worked out!
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025