How can I display bulletpoints in a Metafields list on product pages?

How can I display bulletpoints in a Metafields list on product pages?

Laurasnow
Visitor
2 0 0

Hi,

Hoping someone can help. I'm trying to add collapsable tabs to my product pages and using metafields to pull in the required information. Within the product description tab I'd like to have a bulleted list. I've added a metafield list but when I'm adding the values they're displaying as:

 

blah, blah and blah

 

But I would prefer:

 

  • blah
  • blah
  • blah

 

Can anyone help? I assume I need to edit the code

 

Thanks

Replies 6 (6)

BSS-Commerce
Shopify Partner
3477 463 527

Hi @Laurasnow 

 

I would like to give you some suggestions below:

- You can try to add the following code where you want to show the metafield.

{%- if product.metafields.custom.metafield_multi_line != blank -%}
                  <ul>
                  {% for metafield_value in product.metafields.custom.metafield_multi_line.value  %}
                    <li>{{ metafield_value }}</li>
                  {% endfor %}
                  </ul>
                {%- endif -%}

 

- For example, for the Dawn theme, if you want to show the metafield on the product description page, you will add the above code to the main-product.liquid file.

view - 2022-11-22T141203.869.png

view - 2022-11-22T141207.643.png

 

Please let me know if it works for you.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

GemPages
Shopify Partner
5625 1261 1232

Hello @Laurasnow ,

 

I would like to give you some recommendations to support you. Let's try using this code and add it to metafield:

<ul>
 <li>Blah</li>
 <li>Blah</li>
 <li>Blah</li>
</ul>

GemPages_0-1669101519112.png

 

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
fedgery77
Tourist
7 0 1

It doesn't look like metafields support HTML like that. I tried this and it just displays the HTML.

sammyprince
Tourist
7 0 2

You need to use rich list rather than Multi line as this supports a lot of formating

fedgery77
Tourist
7 0 1

Thank you! Yes I found out last week that there is a Rich Text content type for  metafield.   

Giuliuz
New Member
4 0 0

This is working if typing manually the fields <ul> and <li> directly in the rich text field. But if I copy and paste the code from Excel, the html code automatically disappears, it's not shown in the rich text field and the bulletpoints are not working. 

Since I have a lot of products, I have to use the import (Matrixify) and it does not work..