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.
Method 2
1.) After creating your checkbox field, go to Products > Install tab > Manual Install
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.
3.) Under Manual Install, click on the helpful link to product.liquid
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.
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).
