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.
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.
Many filters accept parameters that let you specify how the filter should be applied. Some filters might require parameters to be valid.
String filters modify strings.
string | append: string : returns string
Adds a given string to the end of a string.
string | capitalize : returns string
Capitalizes the first word in a string and downcases the remaining characters.
string | downcase : returns string
Converts a string to all lowercase characters.
string | pluralize: string, string : returns string
Outputs the singular or plural version of a string based on a given number.
Caution: The pluralize filter applies English pluralization rules to determine which string to output. You shouldn't use this filter on non-English strings because it could lead to incorrect pluralizations.
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.
number | plus: number : returns number
Adds 2 numbers
number | minus: number : returns number
Subtracts a given number from another number.
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.
number | times: number : returns number
Multiplies a number by a given number.
number | round : returns number
Rounds a number to the nearest integer.
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.
Caution: The pluralize filter applies English pluralization rules to determine which string to output. You shouldn't use this filter on non-English strings because it could lead to incorrect pluralizations.
{{ 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
Thank you!