Showing and Hiding Variant Fields in a Table

Overview

In this advanced tutorial, we will show you how to set up a table in Custom Fields, and have it show Custom Fields Values based on the active variant. We will show you where the code goes, and you can customize it to your liking.

This article will be similar in many ways to Displaying Custom Fields Based on Product Variants with some slight differences. We will also pull certain bits from the table article as well!

Getting Started

Start by having at least one Custom Field that you would like to show in a table. For this example we opted to create three text fields called "Size", "Fabric" and "Color." Just make sure that when creating these fields, you Exclude or hide them from display using the checkbox provided. We will be printing these fields in our code so there's no need to print them twice.

After you finish setting up the field, click Create New Text Field and move on to the Globals tab. We will create a new Text Custom Field on globals that will house the fields that we want to be in the table. Call it "Variant Table Properties" and Exclude it from Display as well.

After you create the field, go to the Edit Globals screen. Add the fields you want in the table in the newly created global field. The format should look like this:

LabelName=MachineName|LabelName=MachineName

Note: Make sure to click Save after editing the field.

Now that we have our basic fields set up, we need to create the table code. Create a new Liquid Template product Custom Field. 

Once you create the field, copy and paste this code into the Edit Code section.

This code creates the table and populates it with values from the Variants in Variant Table Properties.

Enter the theme code and make a new Asset file. Call it custom-fields-by-product-variant.js 

Copy and paste this code into the new file.

Note: This code will work for variants drop-down select lists (See Below), for information on switching variants using the radio button style, see NAAABFNFODFNO:ADNAODFNAOF 

Next, add these lines to your theme.liquid file right before the end of the head tag. 

Now that you have everything all set up, all you need to do is add some value to your variants in the Custom Fields app. This can be done by going to Search > Product Drop-down > View Variants > Edit Variant Custom Fields.

Then you will see your variant table function as intended on your product pages.