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.
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.
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.
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.
{% include 'custom_fields.products.variant_code' %}
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.
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.
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 on the variant you want to edit and edit all the values.
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.
Lastly, update theme.liquid to include this code right above {{ content_for_header }}
That's It!
Now your Variants should be showing up on your product pages when you switch between them!