Metafield Lists

Shopify has added a new feature to the Metafield Single Line Text, giving the ability to add as many lines in a list form for the field.
Very handy and greatly needed to create styled lists that will fit into your shop/theme.

First create the metafield:

  1. Go to Settings > MetafieldsĀ  > Products
  2. Click on the green button “Add Definition”
  3. Give it a name (for this example its my_metafield)
  4. Select Single Line Text as the type
  5. Click on the “List of Values” button, to enable the list type.
  6. Press Save.

1meta

 

There will be 2 ways to add the code depending on your theme.

  1. Through your theme’s customiser, click on a product to edit the content and then search for the “Content Liquid” block to add it to your product page:
    (If you don’t have this block available for your theme, go to option 2.)

Screen Shot 2022-06-25 at 9.07.50 pmScreen Shot 2022-06-25 at 9.10.58 pm

 

2. Go to Edit Code and find your product.template in the sections folder:

Screen Shot 2022-06-25 at 9.32.58 pm

Find the area in the template structure that you would like to output the list.

Now for the code part, either in the customiser block field or in the product.template, in the area you want the lists to show up enter the below code:

{%- assign my-list = product.metafields.custom.my_metafield | metafield_tag -%}  
{% if my-list != blank %}
<ul>
{% for my-list-item in product.metafields.custom.my_metafield.value -%}
<li> {{ my-list-item }}</li>
{%- endfor %}
</ul>
{% endif %}

The first line of code assigns a variable to the metafield you created at the start.
It then checks to see if there is a value/s in this field, based on the product you are looking at.
If there is a value it will then loop through each list item you have entered and output them.

Simple and a big thank you to shopify for implementing multiple values on the single line text metafield, as this makes it 100% easier to style.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get In Touch

Have a question? or perhaps spotted a problem?
Maybe you have something you would like to add. Drop us a line anytime!