Displaying Product Data in a Table


This tutorial covers the coding and setup to create tables that print metafield data. All coding is copy/paste.

This setup can use existing data from any metafield in any namespace. This means that data can come from any source and the data is not tied to the display in any way. Adding and rearranging rows and data points is done in the interface without writing any code. 

This tutorial will walk through:

  1. Creating a new Global (shop) field for configuration that will define the fields in the table, with labels, keys and namespaces.
  2. Copy/pasting some generic Liquid code into the new template to handle printing the data and all HTML.
  3. Updating your theme to print the new Liquid template.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.

Create Fields

Global Settings Field

Create a  Global field. From the left sidebar, click on Globals, then +Field. Create a Field Collection. Label the Field Collection Table. It must have the key of table otherwise later steps will not work.

Once the Field Collection is created, we need to define the structure of each row in the table. The table will display one field per row. Each row will include a label, a namespace and a key for the field. 

To do this, add one  text field called Label, another called Namespace and a final field called Key

Product Fields

Create all the fields you need to store the product data you want displayed. If all of the fields you want to display already exist, skip this step. 

From the left sidebar, click on  Products, then +Field. Set up fields as usual. Note the metafield namespace and key for each field as you go. These will be used later. If you're creating new fields, the default namespace is always custom_fields.

Liquid Template Field

From the left sidebar, click on Products, then +Field. Create a Liquid Template field. We'll use this later in the tutorial.

Configure the Table

Now that the table structure has been defined, and would work with any number of fields, let's configure the table to suit your project. For our example project, we want 3 fields.

In the next step we'll need to use the field keys and namespaces from your notes earlier about the key and namespace names for your metafields. 

If you need to get the keys and namespaces now, from the  left sidebar, click on Products, then Configure Fields click on the Code icon for the field, then open the Theme Info area. 

With all the keys and namespaces, from the  left sidebar, click on Globals.

In the  Table field, click +Field. Add all of your desired fields.

Copy/Paste Code

Liquid Template Field

From the  left sidebar, click on Products, then Configure Fields. From the list, click the code icon under the Liquid Template field created earlier.

Generate the template by clicking on  Create Now with Create Default Template selected under More Actions.

Copy this code to your clipboard and paste it into the template, then Save. No changes are needed. The code will look like the screenshot below.

Place the Field for Display

In the Custom Fields app, from the left sidebar choose Products, then Display Fields. Enable the field for display in the Inner Area.

Add Data For Testing

From the left sidebar, click on Products and locate a product to test with. Enter some test content into your tab fields on your test product. View the product on the front-end of your store and test.

Your test product should now have a table with the data points you defined.