if

Render the content within the expression if a condition is true.

{{#if condition }}
content
{{/if}}

condition
Evaluable expression.


content

The render content when the condition is met.

{{#if product.price '>' product.compare_at_price }}
I am a regular product.
{{/if}}

Output

else if

You can use the else if tag to check multiple conditions.

{{#if condition }}
content
{{else}}
content
{{/if}}
{{#if product.type == 'Red' }}
This is a red option!
{{else if product.type == 'Yellow' }}
This is a yellow option!
{{/if}}

Output
This is a red option!

else

Allows you to specify a default expression to be executed when none of the other conditions are met.

{{#if product.available }}
This product is available!
{{else}}
This product is sold out!
{{/if}}

Output

Using Subexpressions in if Statements

Handlebars natively supports subexpression, allowing you to write complex conditional statements by invoking other helpers within an if statement.

{{#if (lowercase product.type) == 'red' }}
This is a red option!
{{/if}}

Output

Using and, or in if Statements

Allows you to evaluate multiple conditions using logical and and or operators.

{{#if product.type == 'yellow' or product.price >= 10 and product.available }}
This is a available yellow type product, or greater than 100 product!
{{/if}}

Output

Was this article helpful to you?

Error loading component.

Error loading component.