Product metafield label not displaying on the product page, only the data

Ask & Offer
1

Hey guys, me again..

I have set up the product metafields on my product page but for some reason it is only pulling the data across, it does not display the metafield label, i.e colour (then the data) etc (see picture). I am not sure if it is something i need to add to the code to make it display the, I am using the latest Refresh theme. The store url is https://cheapwashers.co.uk. Thanks in advance guys.

meta data
meta data590×385 13.7 KB

2

Hi @discountwashers

Can you share the theme code

image
image1085×277 35.7 KB

3

Hi Bang_T

Thanks for the reply.

do you mean the base.css?

4

or the theme.liquid?

5

If possible please send the zip file of whole theme, so i can check and understand how did you setup those metafields

6

i have downloaded it but i cannot upload it here, where do i send it to?

7

you can share via https://wetransfer.com/

8

Perfect, thanks. this is the link for the download.

Thanks in advance

9

thanks, i will let you know soon

10

Hi @discountwashers,
Right now, your Product Specifications tab is just outputting the raw metafield values (e.g. Free Standing, 5.5kg, 1100 RPM, White etc.) without their corresponding labels (e.g. Type, Capacity, Spin Speed, Colour).

That happens because by default Shopify only shows the value stored in metafields. If you want labels, you have to add hardcode labels:

<ul class="product-specifications">
  {% if product.metafields.custom.type %}
    <li><strong>Type:</strong> {{ product.metafields.custom.type }}</li>
  {% endif %}

  {% if product.metafields.custom.capacity %}
    <li><strong>Capacity:</strong> {{ product.metafields.custom.capacity }}</li>
  {% endif %}

  {% if product.metafields.custom.spin_speed %}
    <li><strong>Spin Speed:</strong> {{ product.metafields.custom.spin_speed }}</li>
  {% endif %}

  {% if product.metafields.custom.colour %}
    <li><strong>Colour:</strong> {{ product.metafields.custom.colour }}</li>
  {% endif %}

  {% if product.metafields.custom.energy_rating %}
    <li><strong>Energy Rating:</strong> {{ product.metafields.custom.energy_rating }}</li>
  {% endif %}
</ul>
11

ah, that makes sense, where is this added, is it the base.css?

12

You Can add this in main-product.liquid file and also you need to replace metafiled key with your actual metafiled key.

13

the metafield key being the part in green?

14

Also do i add it at the bottom above the {% end schema %}

15

Hi @discountwashers

I checked your theme zip file but there is no template for product. If possible, Please pm me the collaborator request code, I will login to your store and check to see what’s wrong.

16

sorry for the late reply, I have made a work around by adding the label to the data i.e “colour: red” as the full data