Theme designers can completely control the output and placement of any custom field in the app using some advanced techniques.
Some possible uses include creating a banner image on every product page, creating a header message area, showing different icons based on product attributes, and many other custom uses.
Learn By Example
In this example, we'll add a checkbox to our products that will show one message if checked and another if it's not checked, but you can adapt this example for many other uses.
1.) We've already created a checkbox called Recyclable for this example. 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.
2.) In the app, go to Products then Configure Fields, then Theme Info. This section gives you all of the markup and liquid code the app generates for the "include" statement that we instruct you to add to your theme for basic usage. In there you'll see a fieldset called Advanced. Click on it.
3.) Find the checkbox in the list. Copy the code.
4.) Go to your
product.liquid template (or product-template.liquid). Search the page for product.description. Paste in the code. If you already added our "include" statement during basic installation, you'll also likely want to remove that statement from that template, and manually print all other fields using this method (to prevent fields from printing twice).
5.) Modify the code and change
TRUE to This product is recyclable. and change
FALSE to This product is not recyclable.
6.) In Custom Fields, go to a product and check the Recyclable checkbox. Then visit the product in your store. You'll now see "This product is recyclable" below the description.
Tip: Checkboxes require a value 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).