Hi,
I like to add a product specification table to our product pages, something similar to Amazon’s, I have added a screenshot for reference.
I have created meta fields for all the products and updated the content for those metafields, now I am wondering how I can display them in a tabular form on product page.
Thanks in advance.
Thanks,
Raghav
Hi @RaghavSaxena
You have to write table html in metafields manually.
Then design it using css.
Hi @RaghavSaxena ,
If you created all specification metafields under the same namespace, you can generate a HTML table dynamically by looping through these metafields. Here’s the link to a step-by-step tutorial dedicated to a similar task.
Thanks for responding MetafieldsGuru,
As specified in step 2. (Under the Sections heading, locate and click product-template.liquid to open your product template in Shopify built-in online code editor.) I am not able to identify product-template.liquid in the section heading.
We are using a Symmetry theme and I have attached a screenshot for the section heading, can you please guide which one should I consider.
I was looking for this same thing, so I developed a free tool which can be implemented easily into your theme. Check it out. https://webforward.github.io/shopify-tables/
Maggi here from TableFlow Specification (Shopify App).
Great! You already have all the contents in metafields. TableFlow can help to map those product metafields to specification table and then display to product page based on product type / tags or only to a few specific products. If you are still looking for an advance solution, can give TableFlow a try!
Hi I really need this tool. How can I input this on my product page?
If you open the page shared by MrL22 and press the big green button labeled “How to use”, you will see the instructions section, which guides users through generating the JSON for the future table and modifying the source code of their theme to integrate the said table:
Quite an interesting solution, by the way.
However, if you need a solution that does not require coding skills, check out the latest feature of our app - the theme extensions: https://support.metafields.guru/support/solutions/folders/44001243306
This feature allows merchants to add customizable blocks and sections for displaying metafields without editing the code.
Yet another cool thing is that you can use the rich text or multi-line text fields, which come with a neat WYSIWYG editor:
Thanks for your help and explanation for people using my solution.
I built it to work the way it does because all of these paid apps use a Wysiwyg editor. Let’s say you add a specifications table to 1000 products, but you want to change the theme, design, or layout of the table at a later time; you either need to hack the CSS or go back through all 1000 products and change them.
With my solution, the data stored in the metafield is just JSON data and has no styling. Modifying the snippet loop will modify all products throughout your store in one go, ensuring consistency.
And it’s completely free, hosted on GitHub with no worries that it may become unavailable or removed.
Hi MrL22,
Hope you can help me I have done all the steps but the table is not appearing on my specification tab,
Hope you can help me I have done all the steps but the table is not appearing on my specification tab, I’m using Empire Theme
Hi MrL22,
Firstly thank you for building the table generator, this is game changing for me!
I have followed all the steps but when I render the final table it doesn’t show the actual table border.
Is this something you could please assist with?
I’ve done everything as per this link: https://webforward.github.io/shopify-tables/#
Cheers!
Sam
