Skip to main content

Liquid Overview

Josh
  • Updated

Overview

Finalsite Enrollment uses the template language Liquid, created by Shopify, which is designed for quickly developing dynamic content. Designed for accessibility by non-programmers, it allows users to create basic, easy-to-read statements that when evaluated, display certain data based on if / else statements. Below is a subset of the documentation with the most common examples schools may look to use.

For more documentation, please visit: https://shopify.github.io/liquid/

If you ever need help working with Liquid, contact our Support Team. If you never learn to use it, that is okay too! Just be aware that it exists and enables highly dynamic and personalized content to be placed in your forms, emails, and letter templates. It can also be used to create custom content in the parent portal or display information on contact records.

How-To: Understand the Basics of Liquid

Using If / Else Statements

if / else statements should be familiar to you if you have used other programming languages. They can be used to display certain content if and when the designated conditions are true for a contact. Liquid implements them with the following tags.

If Statement

  • Structure: {% if %} ... {% endif %}

  • Usage: Encloses a section of the template which will only be run if the condition is true.

  • Example: 

    {% if contact.grade == '9th' %}Attend our Freshmen Welcome Event!{% endif %}

In this example, the text "Attend our Freshmen Welcome Event!" will only appear for contacts whose grade is set to 9th.

--

Elsif Statement

  • Structure: {% elsif %}

  • Usage: Can optionally be used within an if … endif block (see above) to specify another condition. In other words, if the initial If Statement fails, Liquid tries the Elsif Statement and runs the following section of the template if it succeeds. You can use any number of elsifs in an ifblock.

  • Example: 

{% if contact.phone_1_type == 'Cell' %} {{contact.phone_1_number}} {% elsif contact.phone_2_type == 'Cell' %} {{contact.phone_2_number}} {% endif%}

In this example, we're checking if the phone type for the Phone 1 field is 'Cell'. If it is, we're outputting the Phone 1 Number. If it isn't, we'll then check the Phone 2 field against the same criteria.

--

Else Statement

  • Structure: {% else %}

  • Usage: Can optionally be used within an if … endif block, after any elsif tags. If all preceding conditions fail, Liquid will run the section of the template following the else tag.

  • Example: 

    {% if contact.school_level == 'UPPER' %}Attend our Upper School Preview!{% else %}Attend our Lower & Middle School Preview!{% endif %}

In this example, if the contact meets the criteria of school_level being 'UPPER', the text "Attend our Upper School Preview!" will appear. If the contact does not meet that criteria (i.e. if their school_level is anything else), the text "Attend our Lower & Middle School Preview!" will appear.

Conditions & Operators

The condition of an if, elsif, or else tag should be either a normal Liquid expression or a comparison using Liquid expressions. The available comparison operators are:

Operator

Meaning

Example

==

value equals

contact.grade == '9th'

!=

value does not equal

contact.sport_interest != blank

The available Boolean operators are:

Operator

Meaning

Example

and

combining two criteria

contact.grade == '9th' and contact.enrollment_type == 'new'

or

evaluating any two or more criteria

contact.grade == '10th' or contact.grade == '11th'

Please note that you cannot use parentheses to control the order of operations, and the precedence of the operators appears to be unspecified. So, when in doubt, use nested “if” statements instead of risking it. We also suggest always testing your Liquid statements before setting them live to parents/etc.

Liquid Examples

In this section, you will find several examples of Liquid statements using different field types. You can copy and paste these examples into your own templates, forms, etc. - just be sure to update the canonical field names so they match what is on your Finalsite Enrollment site.

Click to jump to examples for:

--

Boolean (Yes/No) Fields

For Boolean fields, you can evaluate on three values:

  • true (yes)

  • false (no)

  • blank (nil)

See some examples of Liquid statements written based on Boolean fields below.

Displays the text 'International Student' only if the Boolean field value is Yes (true).

{% if contact.international == 'true' %}International Student{% endif %}

Displays the text 'No' if the Boolean field value is No (false) or Blank.

Otherwise, displays the text 'Yes'.

{% if contact.field_yn != 'true' %}No{% else %}Yes{% endif %}

Displays the text 'YES' if the Boolean field value is Yes (true).

Displays the text 'NO' if the Boolean field value is No (false). 

{% if contact.international =='true' %}YES{% endif %}{% if contact.international =='false' %}NO{% endif %}


In this example, blank (nil) values are ignored and won't display anything. This is good when you want to be explicit about the Yes/No choice made and don’t want to show No if the value has been left blank.

Displays the text 'NO VALUE SELECTED' if the Boolean field doesn't have a value (i.e. is blank). Note: There are two ways you can write this one.

{% if contact.international == '' %}NO VALUE SELECTED{% endif %}

OR

{% if contact.international == blank %}NO VALUE SELECTED{% endif %}

Single Select Fields

The main difference between Single Select fields and Boolean fields is that with the former, you have to explicitly declare the value. If your Single Select field has Yes and No for values, you have to use ‘Yes’ or ‘No’ rather than true/false. Generally, statements will look very similar to Boolean fields but there are some additional use cases because the list of values can be more varied. In these cases, making use of AND / OR may prove useful.

Example of an OR statement with a Single Select field.

{% if contact.state == 'VA' OR contact.state == 'DC' %}In Service Area{% else %}Outside of Service Area{% endif %}

In this example, the text 'In Service Area' will display if the contact's state is VA or DC. Otherwise, the text 'Outside of Service Area' will display.

Combining two different field values to create an output.

{% if contact.color_1_ss == 'Blue' AND contact.color_2_ss == 'Yellow' %}GREEN{% endif %}

In this example, the text 'GREEN' will display only if the first Single Select field value is set to 'Blue' and the second Single Select field value is set to 'Yellow'. If only one of those two field values applies to the contact, nothing will display. These types of statements are good when you want multiple criteria to be true for a contact, since it checks the values from two (or more) different fields and outputs something only if both (or all) field values are present.

Similar to above, but with an added if/else & else statement. 

{% if contact.color_1_ss =='blue' AND contact.color_2_ss =='yellow' %}Green
{% elsif contact.color_1_ss =='red' AND contact.color_2_ss =='yellow'%}Orange
{% else %}Gray
{% endif %}

To break this statement apart, we have two fields ("Color 1" and "Color 2") for which we are checking the values. If the selected values are blue AND yellow, the displayed text is 'Green'. If the values are red AND yellow, the displayed text is 'Orange'. If neither combination is true, then the displayed text is 'Gray'.

Here is an example of calculating whether a student is old enough to enroll in Kindergarten and displaying that on a contact record. If the contact isn’t applying for the K grade, then this statement will not show anything.

{% if contact.grade =='K' AND contact.entry_age_month =='60' %}Eligible for Kindergarten{% endif %}

Booleanlist (Multi-Select) Fields

Booleanlist (multi-select) fields are stored in a manner that requires the use of the contains argument rather than equals (==).

{% if contact.color_ms contains 'blue' AND contact.color_ms contains 'yellow' %}GREEN
{% elsif contact.color_ms contains 'red' AND contact.color_ms contains'yellow'%}Orange
{% else %}ALL IS GRAY
{% endif %}

This statement is similar to the above example but using a single multiple select rather than two different single selects.

--

Showing different content based on contact role or status

It is common to only want to show certain information based on the contact’s role or status. To do this, you wrap all the fields that you want to contextually show inside an if statement. See examples below. Note: Role is considered a multi-select field, so you should use 'contains'; however, Status is considered a single-select field, so you should use '==' (equals) or '!=' (does not equal).

Displays the text 'Inquiry Student' if the Role field contains the 'Inquiry' value.

{% if contact.role contains 'inquiry' %}Inquiry Student{% endif %}

Displays the text 'Your Enrollment is almost complete!' ONLY if the contact's Status is Enrollment in Progress. If the contact is in any other status, nothing will display.

{% if contact.status == 'enrollment_in_progress' %}Your Enrollment is almost complete!{% endif %}

Note that statuses are written all lowercase and with underscores instead of spaces when writing Liquid statements (e.g. status == 'enrollment_in_progress' rather than status == 'Enrollment in Progress').

How-To: Use Liquid Filters

Liquid filters can be used to further format a string. They are denoted by placing a pipe character (|) then the filter name within the brackets, after your string. Some common ones for use in Finalsite Enrollment are listed below:

Filter Name

Usage

Example Token

Example Output

capitalize

Makes the first character of a string capitalized.

{{ 'parker moore' | capitalize}}

Parker moore

date: "%b %e, %Y"

Outputs date in text format (see section below for additional date format options).

Enrollment Date: {{contact.enrollment_date | date: "%b %e %Y"}}

Enrollment Date: January 1, 2021

format_phone

Formats a phone number with dashes.

{{contact.phone_1_number | format_phone}}

555-555-5555

format_phone_with_area_code

Formats a phone number to have parentheses around the area code.

{{contact.phone_1_number | format_phone_with_area_code}}

(555) 555-5555

downcase

Makes each character in a string lowercase.

{{ "Parker Moore" | downcase }}

parker moore

upcase

Makes each character in a string uppercase

{{ "parker moore" | upcase }}

PARKER MOORE


Note on Date Filter

You can format date fields in several different ways using the date filter. In the above example (date: "%b %e, %Y"), we output the date field in a text format (i.e. January 1, 2021). Some other common format options include:

{{ "now" | date: '%Y-%m-%d' }}

  • Outputs current date as YYYY-MM-DD

  • Example: 2021-07-14

{{ "now" | date: '%m/%d/%Y' }}

  • Outputs current date as MM/DD/YYYY

  • Example: 07/14/2021

{{ "now" | date: '%m/%d/%y' }}

  • Outputs current date as MM/DD/YY

  • Example: 07/14/21

For other format options, see this page.

Please note: The above examples would output the current date in the format specified; however, to use this filter on custom date fields, you can replace "now" with contact.[Canonical Name of Field].

Troubleshooting Tips

  • If you are formatting a Liquid statement (for example, bolding the text or changing the color of it, make sure the formatting is outside the Liquid statement brackets {}.

  • In more complex statements, break down the components and test them independently to ensure the argument is returning the expected value.

  • If you're still having trouble, contact Support and include details about the Liquid statement you're using and an example you're using to test.

Additional Resources

Related articles

Comments

0 comments

Article is closed for comments.