Display Custom Fields Based on the Selected Product Variant

Overview

In this advanced tutorial, we will show you how to show and hide Custom Fields attached to product variants when a customer selects a variant.

Note: This article is outside the scope of support we can provide for the app. It is provided as guidance for your reference only. Themes vary greatly and it's not possible to create a comprehensive guide for every possible scenario. Generally, if your theme uses custom-designed elements to select variants, then you'll need customizations to the JavaScript so that it fires when those elements are selected or changed. This is the most common issue.

Getting Started

If you don't have the fields set up that you want to use on your variants, set them up now. In this tutorial, we will show you how to implement multiple fields at once.

Creation_Size.png

Create a new liquid template Custom Field and title it Variant Code. While it doesn't have to be titled this, it will house our liquid markup code in this field. 

Variant_Code.png

After clicking Create New Liquid Template Field, you will be brought to the Edit Custom Fields. Copy and paste this code into the Edit Code form, where it says to. 

Edit_Code.png

Note: If you are using the default Custom Fields include statement, then you do not need to print this manually. However, if you are doing anything custom, go to product.liquid (or product-template.liquid depending on your theme) and paste this below {{ product.description }}:
{% include 'custom_fields.products.variant_code' %}

quickie_4.png

Next, hover over Globals on the sidebar, and click +Add Field. Title the new field Variant Fields. This field will be where you specify which fields you want variants printed. The code in the previous step will make this happen.

over_where_anywhere.png

Once you click Create New Text Field, go to Edit Globals and write your code in the new text field. The formatting should go as follows:

Label Name=machine name|Label Name=machine name|Label Name=machine name

Since our field from earlier was titled "Size" we would write Size=size.

Variant_Fields.png

In order for our code to show up, we need to edit some of our values for field variants. Hover over products on the sidebar and click on 'Search'. Now, click on any of the drop-down menus on any product and click View Variants.

click_view_variant.png

Click on the variant you want to edit and edit all the values.

Barel.png

Go to your Shopify theme code and add a new Asset. Call it custom-fields-by-product-variant.js.

Once the new file has been created, open it up and paste this code into it. Click save at the top right.

Pasted_JS.png

Lastly, update theme.liquid to include this code right above {{ content_for_header }}

Theme_Code.png

That's It!

Now your Variants should be showing up on your product pages when you switch between them!

Related Articles