How to add liquid filters when customising texts

In cornercart in wherever you could add dynamic data inside the text you can make use of liquid filters to modify the said dynamic data.

Usage

To apply filters to an output, add the filter and any filter parameters within the output's curly brace delimiters {{ }}, preceded by a pipe character |. In the example below, title is its property, and capitalize is the filter being applied.

{{ title | capitalize }}

Filters with parameters

Many filters accept parameters that let you specify how the filter should be applied. Some filters might require parameters to be valid.

{{ title | append: "buy now" }}

String filters

String filters modify strings.

append

string | append: string : returns string

Adds a given string to the end of a string.

{{ daysRemaining | append: "days" }}

<!--
daysRemaining: 2
RESULT: 2days
 -->

capitalize

string | capitalize : returns string

Capitalizes the first word in a string and downcases the remaining characters.

{{ productTitle | capitalize }}

<!-- 
productTitle: drop shoulder tshirt
RESULT: Drop shoulder tshirt 
-->

downcase

string | downcase : returns string

Converts a string to all lowercase characters.

{{ productTitle | downcase }}

<!-- 
productTitle: Drop shoulder tshirt
RESULT: drop shoulder tshirt
 -->

pluralize

string | pluralize: string, string : returns string

Outputs the singular or plural version of a string based on a given number.

{{ daysRemaining }} {{ daysRemaining | pluralize: " day", " days" }}

<!--
daysRemaining: 32
RESULT: 32 days

daysRemaining: 1
RESULT: 1 day
 -->

Math filters

Math filters perform mathematical operations on numbers. You can apply math filters to numbers, or variables or metafields that return a number.

As with any other filters, you can use multiple math filters on a single input. They’re applied from left to right. In the example below, minus is applied first, then times, and finally divided_by.

plus

number | plus: number : returns number

Adds 2 numbers

{{ goal | plus: 2 }}

<!-- 
goal: 320
RESULT: 322 
 -->

minus

number | minus: number : returns number

Subtracts a given number from another number.

{{ goal | minus: 2 }}

<!-- 
goal: 320
RESULT: 318
 -->

divided_by

number | divided_by: number : returns number

Divides a number by a given number. The divided_by filter produces a result of the same type as the divisor. This means if you divide by an integer, the result will be an integer, and if you divide by a float, the result will be a float.

{{ goal | divided_by: 2 }}

<!-- 
goal: 320
RESULT: 160
 -->

times

number | times: number : returns number

Multiplies a number by a given number.

{{ goal | times: 2 }}

<!-- 
goal: 320
RESULT: 640
 -->

round

number | round : returns number

Rounds a number to the nearest integer.

{{ goal | round }}

<!-- 
goal: 320.98
RESULT: 321
 -->

Updated on: 19/04/2024