Display Custom Fields Based on the Selected Product Variant

Overview

This tutorial covers the coding and setup to show and hide specific metafields associated with individual product variants when viewing a product on the front-end of the store.

This tutorial will walk through:

1. Creating a Liquid template that will print the specific fields. 
2. Creating a new Global (shop) field to properly label each printed field when it is displayed.
3. Copy/pasting some generic Liquid code into the new template to print the correct fields when the variant selection changes.
4. Updating your theme to print the new Liquid template.
5. Copy/pasting some generic Javascript code to show and and hide the new data when the variant selection changes.

Create Fields

Variant Fields

First, create all the fields you need to store the variant data you want displayed. 

From the left sidebar, click on Products, then +Field. Set up fields as usual. Note the metafield key for each field as you go. These will be used later.

Optionally, on the Field Settings form for each field, change the Field Availability to Display only on Product Variants. This prevents the fields from appearing on the main product form, and avoids confusion during data entry.

Liquid Template Field

Next, create the Liquid Template field as a Product level field. Call the template Variant Code.

The template for this field will contain all the HTML and Liquid code needed to handle these new variant fields in one place.

Later, this field will be placed in the theme using the Display system in the app. For now, just create the field, we'll deal with code and placement later in the tutorial.

Global Settings Field

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

Once the Field Collection is created, add two text fields within the Field Collection. Label one Label and the other Key. These fields will be used later to store the labels your customer will see on the front end for the variant level fields we just created. This will also associate the labels with the variant fields themselves in our code. These fields must have keys of label and key otherwise later steps will not work.  

Connect Fields to Labels

From the left sidebar, click on Globals. 

Use the field keys from your notes earlier in the Key field. 

If you need to get the keys 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. 

Add one item per field. Enter whatever label you'd like shown to the visitor, along with the data associated with the Key. Don't forget to Save.

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.

Next, we need to make two changes to your theme. These changes are also copy/paste. Copy this code to your clipboard.

In Shopify, go to Online Store then Themes then under Actions for your theme choose Edit Code.

In the left sidebar in the code editor choose Assets then Add New Asset. 

Create a blank file. Name it cf-variants.js and click Add Asset

Locate the file in the sidebar, open it and paste in the code copied earlier. Save the file.

Finally, copy this code to your clipboard.

In the left sidebar in the code editor search for theme.liquid and open the file.

Paste the code copied earlier just above the closing head tag, above the {{ content_for_header }} statement and save.

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 Variant Data For Testing

From the left sidebar, click on Products and locate a product to test with. In the search results table, in the Operations column, click the down arrow and click on View Variants. Enter some test content into your variant fields on your test product. View the product on the front-end of your store and test.

Your test product should now be printing the fields specific to the selected variant.

Troubleshooting

Missing jQuery
The javascript code we added earlier relies on the jQuery library. Not all themes include jQuery. For example, Debut is one theme that does not ship with jQuery. When testing, if the page prints the fields but doesn't show and hide the fields based on the variant selected, missing jQuery might be the problem. 

Visit the Setting up jQuery for Widgets article and follow the steps. Be sure to paste the code above the line for cf-variants.js that was added to the theme in an earlier step. Once pasted, retest.