Displaying Product Data in a Table

In this advanced tutorial, we'll show you how to create a table by using Custom Field values as its contents.

Specccs.png

In this example, we'll be creating a table from Custom Field values automatically. The coding is generic, you just need to copy and paste it and it will work with the example. No changes are necessary.

1.) Create a Global text field titled "Product Table Properties". 

This will be where you will define the fields that go into the table and their order. This is a global because it doesn't get directly printed so you can click Exclude from display if you like.

Product_Table_Properties.png

2.) Create new Product Fields to be displayed in the table.

In this example, we made three different text fields called: "Size", "Material" and "Weight". Make sure to check Exclude from display. This will stop the app from displaying the value of the code in plain text on the page. Save the fields when you are complete.

Weight_again.png

3.) Now that the properties field is defined, enter the properties you want for the table in your new global field. 

The proper syntax is [YOUR HUMAN NAME]=[YOUR MACHINE NAME]|[YOUR HUMAN NAME]=[YOUR MACHINE NAME].

Breaking that down, the field's title you'll show to visitors is on the left, the machine name is on the right. The | character is a separator, allowing you to enter as many fields as you'd like. For example, My Field=my_field.

For clarity, the machine name is the namespace that was created when you made the field. This is usually created automatically. The namespace is always custom_fields["YOUR MACHINE NAME"]. So for a product, the complete namespace used in your liquid code to access that value would be products.custom_fields["YOUR MACHINE NAME"]. In this case, you only need the "YOUR MACHINE NAME" part. See also, https://support.apps.bonify.io/hc/en-us/articles/115001048592-Theme-Snippets-Namespaces-and-Developer-Information-About-Each-Field 

2019-06-18_1635.png

4.) Create a new Liquid Template Product Field. This will be the code for our table to display.

It doesn't matter what it's called or what type it is, as we only need it to carry code. Don't exclude it from display this time.

Runnnn.png

5.) After you click Create New Field, paste this code into the Snippet Editor and click Update Settings.

This code checks the values that you defined in Product Table Properties and assigns them to spots in a table. It prints the table on your product page if the fields all have value.

Definition.png

6.) Add content to your product fields on any products you want to have a the table.

Editing_Couch.png

That's It!

Now your fields will show up in a table underneath your Shopify description. If this isn't the case, double check that you have the app properly installed in your store. You can find instructions on how to do this in the Basic Installation Tutorial

Specccs.png