Metafields

[valentinewigs]

We would like to use the new metafields on our store to show up the dimensions of a product. We have created the product metafields in settings but not all our products have all the metafield values available and the metafields appear on every product whether there is a value or not.  We are using the Warehouse theme and are able to add the metafields dynamically into our theme.

In order to show the metafield name we have to type it in before the dynamic metafield but this means that the metafield name shows up even if there is no value and does not look great for customers.

Metafield Name: Metafield Value(dynamic)

Length: Long
Fringe: 5"
Crown: 16"
Nape: 6"
Weight: 6oz

How can we get the metafield name to appear dynamically along with the metafield value so that if there is no value then neither the name or value would appear which would look much better on the products that did not have a value for that metafield? 

[Renars]

Hey @valentinewigs 
Just throwing this out there - might not be an ideal solution and most likely you can somehow set up also fixed text to display dynamically, but for now, you could create those Metafields just as text with name included in value.

So instead of having value `5"` you could set whole metafields value as `Fringe: 5"` thus you do not need to specify the name in theme and could only have the dynamic value show up which would also contain the name.

[valentinewigs]

Hi Renars

Thank you for the reply.

Yes that is actually what we have been doing, however it means having to type 'Fringe:' in every time we want to add a value to a product, the same for each metafield. We were hoping that this could be done dynamically somehow.

[swalkinshaw]

I might be misunderstanding, but I'm assuming your current theme/Liquid looks something like this:

<p>Fringe: {{ product.metafields.some_namespace.fringe }}</p>
<p>Length: {{ product.metafields.some_namespace.length }}</p>
<!-- etc -->

The metafield name is "hardcoded" and will always be displayed even if there's no metafield value as you said. The simplest way to make the name depend on the value's existence would be wrapping them in conditionals:

{% if product.metafields.some_namespace.fringe == blank %}
  <p>Fringe: {{ product.metafields.some_namespace.fringe }}</p>
{% endif %}

{% if product.metafields.some_namespace.length == blank %}
  <p>Length: {{ product.metafields.some_namespace.length }}</p>
{% end %}
<!-- etc -->

Note: you might not need the `== blank` part.

[valentinewigs]

We are using the new Shopify 2 metafields that we set up from settings so looks different to what you have put.

I've found the file where the code is, it's in product.json and the section with the metafields we have set up looks like:

},
"8d8ffbf1-d485-47b2-93ff-a36a08f9dc40": {
"type": "content",
"disabled": true,
"settings": {
"title": "Product Details:",
"content": "<p>{{ product.metafields.my_fields.wig_type_.value }}<\/p><p>{{ product.metafields.my_fields.wig_cap_construction_.value }}<\/p><p>{{ product.metafields.my_fields.lace_front_.value }}<\/p><p>{{ product.metafields.my_fields.wig_length_.value }}<\/p><p><\/p><p>{{ product.metafields.my_fields.dimensions | metafield_tag }}<\/p><p><\/p>",
"page": "",
"display_mode": "show_all"
}

How would we go about adding conditions into this?

[swalkinshaw]

Ah that explains it. You're using dynamic sources in the theme editor to integrate metafield definitions into a theme section/block.

It looks like you've put all the metafield definitions into a single rich text field. The only way to conditionally display them is to separate those into _one per_ metafield. Then you could edit the text/content Liquid template to conditionally display based on the setting `value`.

[valentinewigs]

Yes I'm using the dynamic sources in the theme editor.

I did create separate metafields with single rich text fields in the Metafields section in Shopify setting but I didn't add them to the template, that must be the way Shopify has added them.

Sorry I'm not too good with work inside the files. Am I able to separate them so I can do as you suggested? If so would you be able to give me an example of one of them with the conditional part?

Thank you for all your help