Displaying Text Based on a Checkbox Value

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 Edit on Recyclable. In the Edit Code drop down, you can edit all of the markup and liquid code the app generates for basic usage. This is also nicknamed the Snippet Editor.

3.) Modify the code in the Snippet Editor and change TRUE to This product is recyclable. and change FALSE to This product is not recyclable. Be sure to click Update Settings after you finish.

4.)  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 (or 1/0) and blank (no value). 

Tip: The title above the field (Recyclable) in the screenshot above is a default value that the app creates. If you want to remove it, just simply delete the h3 tag from the snippet editor and click Update Settings.