Help with Metafield Data Display and Manual Sorting in Specification Table

Store Design
, , , , , ,
1

Hi everyone,

I’m working on a Specification Table for my website that automatically pulls metafield data from products and displays it as a table. I’ve written two parts of the code: one for retrieving the data and another for the design. However, I’ve encountered two issues and would greatly appreciate any help!

Issue 1: Incorrect Field Being Displayed

Currently, the Specification Table is using the metafield Namespace and Key data instead of the Name field I want. For example, in my metafield settings:

Settings → Custom data → Products → “iPhone Compatible”

The table shows the text as Iphone_compatible (with underscores and capital letters) instead of iPhone Compatible.

The relevant part of my code is:

{{ spec.first | capitalize }}

Since I don’t know the exact field name to call, I’ve been using the Specification-name, which defaults to the key. How can I update this code to pull the Name field (the human-readable label) instead of the key?

Issue 2: Manual Sorting of Specification Data:

Right now, the specification table are displayed in alphabetical order, like this:

Battery
Charging_distance
Depth
Height
Iphone_compatible
Kit_contents
Output
Qi_compatible
Usb_c_input
Usb_c_output
Weight
Width

As you can see, related items like Depth, Height, and Width are not grouped together. I’d prefer to manually control the order of these specifications for each product.

Is there a way to modify the code to allow manual sorting of the metafield data? Ideally, I’d like a way to define a custom order per product.

Thanks in advance for any help or guidance you can provide on these two issues!

2

Hi @Benni_M ,

Can you send me the code that shows this? I will double check it for you

3

Hi @namphan ,

Thank you for reaching out.
How do i send this directly to you?
Should i just post the code here?

4

Hi @Benni_M ,

Sure, please send it here or via private message, I will check it soon

5

Hi @namphan
Thank you again for the help.
This is for the specification table that pulls the metafield data.
I have another code for the design.


{% schema %}
{
  "name": "Specifications Table",
  "settings": [
    {
      "type": "range",
      "id": "top_spacing",
      "label": "Top Spacing (px)",
      "min": 0,
      "max": 80,
      "step": 5,
      "default": 20
    },
    {
      "type": "range",
      "id": "bottom_spacing",
      "label": "Bottom Spacing (px)",
      "min": 0,
      "max": 80,
      "step": 5,
      "default": 20
    }
  ],
  "blocks": [],
  "presets": [
    {
      "name": "Specifications Table",
      "category": "Product Pages"
    }
  ]
}
{% endschema %}
6

Hi @Benni_M ,

I checked and this is not possible.

I recommend you to change to using Metaobject, it will help you customize everything and display better.

I hope it helps!

7

Hi @namphan

Thank you for your response and for looking into this.

Could you explain how this might work instead? If possible, do you have an example I could use as a reference?

The key requirement is that I need to be able to add information for each product directly into the “metafield” or “metaobject” from the product page. This way, whenever I add a new product, I can include specific details for that individual item.

8

Hi @Benni_M ,

You can refer to the following steps:

  • Step 1: Create metaobject for item, it will include name and display content.

Screenshot (2).png
Screenshot (2).png785×547 22.5 KB

  • Step 2: Create metafield with type is list metaobject:

Screenshot.png
Screenshot.png851×613 29.5 KB

  • Step 3: You just need to enter metaobject at Content > Metaobjects and select at product.

  • Step 4: Change the code so it can display this list and everything will work fine.

I hope it helps!

9

Hi @namphan
Thank you so much for your help so far!

I’m a bit stuck at Step 3 and was hoping you could clarify it for me in simpler terms.

Specifically, I’m confused about what you mean by Content > Metaobjects. Should I delete all the current product metafields I’ve set up, such as:

  • Rivets, Lanyard
  • Liner
  • Sheath
  • Grind
  • Steel
  • Handle Material
  • Blade Thickness
  • Blade Width
  • Blade Length
  • Total Length
  • Kit Contents
  • Charging Distance
  • Qi Compatible
  • iPhone Compatible
  • Battery
  • USB-C Output
  • USB-C Input
  • Output
  • Weight
  • Depth
  • Width
  • Height

These are the metafields I need to link to the specification table code so i can adjust them separately for each product i have.

As for Step 4, what code do I need to write to make this metaobject setup work?

Your clarification would be greatly appreciated!

10

Hi @Benni_M ,

Can I send you a collaborator invitation? I will check and guide it in detail.

11

Hi @namphan

Thank you for your help so far!

What access would you need to guide me through this process? Just so you know, I’m working on a copy of the theme, not the main one.

I’ve located the Content/Metaobject section, but I’m still unclear about how to write the code to allow changes to each Metaobject’s data for individual products.

The old metafield setup worked well enough, except for the issue with the namespace and key, as you know.

Here’s an example to clarify my concern with the proposed solution:

Example:

  • Specification:
    Name: Height
    Content: 1 Meter

If I use this name and assign it to all products, then every product would display the value 1 Meter, correct?

If that’s the case, it would create a big issue because I’d have to manage all product data centrally within the metaobject. With thousands of products, organizing this data would become overwhelming and confusing.

This is why the ability to input data directly for each product within the product editor—as we did with the previous code—was much more convenient.

Could you clarify if this is what will happen with the current metaobject approach? Or would I still be able to adjust individual product specifications directly in the product editor?

Thank you for your patience and for your help!

12

Hi @Benni_M ,

If you have thousands of products and have uploaded data with metafields, this will be difficult.

Please send collaborator code and store link in private message, I will send you invite and try to check it

13

Hi @namphan

That’s exactly why I originally created the code to work with product metafields. The goal was for it to pull data directly from the metafields entered in the product editor, which were tied to a template within the same category as the specific product the data needed to reference. Instead of relying solely on the metafield name, the code leveraged the namespace and key name, which was not what i was looking for.

My main concern with switching to a metaobject is that it might remove the ability to manually input and edit content or values for each product directly in the product editor.

I’ll follow up with a private message shortly to discuss this in more detail.

1 Like
14

Hi Benny,

Have you found the solution yet? I’m experiencing the same problem.

Kind regards,

Fars

15

Hi @Fars ,

Can you explain more about it, I will help you check it

16

Hi @Fars ,

I found an okay solution, but it does not work 100% with Metafield you have to do a littlebit manual work. :slightly_smiling_face:
Send me direct message and we can talk about it.