How can I add bullet point metafields to the Dawn theme product page?

Store Design
1

Hey everyone,

I’m trying to add bullet point metafields just below product title in Dawn theme.

I need to add 3 bullet points.

I tried the following methods:

1. Use single line metafield with
in between in text block.

It worked but if I have middle metafield blank it will leave the blank space between 1 and 3.

s14vTBb
s14vTBb1388×375 86.9 KB

2. Use multi-line metafield through custom liquid block.

It somewhat worked but it created one extra line break in the middle and portion of metafield went to the same line as Size Chart block.

UUQPCnb[1].png
UUQPCnb[1].png1327×337 82.6 KB

If anyone could help me with rendering this field that would be amazing!

2

Of the top of my head I’m not sure of the behavior here that causes things separated by the
tag to then get checkmarks styling. Probably browser generated

or

's?

When content is empty depending on what the output html is you could just add a CSS style that hides double
's that , aka adjacent selector :

br + br { display: none;}

https://stackoverflow.com/questions/7596647/ignore-br-with-css

Have you tried just using html list elements instead of line breaks in the text field?

I.e.

For the custom-liquid if referencing a list of things put them into a a variable converting newlines_to_br and splitting it into an array with the split filter " | split:‘
’ " then loop over the variable to make separate elements. In some instances the
may be
or
, etc update code to match.

{{ assign info = product.metafields.info.top_pdp | newline_to_br | split:'
' %}

{%- for item in info %}
 {% unless item == blank or item == '' %}- {{ item }}{%- endunless %}
{%- endfor %}

{%- comment %}Hide empty - 's with CSS{%- endcomment -%}

https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

1 Like