Introduction to Customizing Field Output

Overview

In this example, we will print a Custom Field (metafield) manually, directly within Shopify's theme code.

This example will use a checkbox on a product field that will show one message if checked and another if it's not checked, but you can adapt this example to many other uses.

For this example, we've already created a checkbox called  Recyclable. If you're unsure of how to create a field, start with the Basic Installation guide which will walk you through the process of creating your first field.

Method 1

After creating a field you will be brought directly to the Edit Custom Fields screen. You can also reach this screen by hovering over products and clicking on Configure Fields. Then click on Edit on whichever Custom Field you want to edit.

haiku.png

Method 2

1.) After creating your checkbox field, go to Products > Install tab > Manual Install

open_advanced.png

2.) Open the Advanced Fieldset

In the  Advanced section, find the check-box field and copy the code. Since we want to completely take control of our field in this example, we'll skip using the editor built into the app and enter it right into our theme template by hand. Alternatively, we could edit the code in the editor and simply include the output of that field manually in our template.

Advanced_Fieldset.png

3.) Under Manual Install, click on the helpful link to product.liquid

wowee.png

4.) Customize the code to your liking.

In our example, we have a field called recyclable. If this field is true (checkbox checked), it will tell the user that the product is recyclable. If this field is false (checkbox unchecked), it will tell the user that it is not recyclable. When testing, make sure you set a value for your test field.

this_product_is_recyclable.png

Tip: Checkboxes require a value to be set to show if you've copy/pasted our starter code. If you don't check the checkbox once, nothing will be shown. This is because there are 3 possible values for a checkbox. TRUE, FALSE and blank (no value).

Additional Resources

Shopify: Liquid Theme Code Documentation