Access Array Elements in First and Last Filters

When working with arrays, you’ll often need to access the first or last element of the array. Luckily, the first and last filters make this task quick and easy.

The first Filter

The first filter is used to retrieve the first element from an array. This filter can be helpful when you want to display featured products, highlight the first blog post in a list, or perform other tasks that involve the first element of an array.

Usage:

{% assign colors = "red, green, blue, yellow" | split: ", " %}
{{ colors | first }}
{# Output: 'red' #}

In the example above, the first filter is used to retrieve the first element from the ‘colors’ array, resulting in the output ‘red’.

The last Filter

The last filter is used to retrieve the last element from an array. This filter can be useful when you want to display the most recent item added to a list, the final product in a collection, or complete other tasks that involve the last element of an array.

Usage:

{% assign colors = "red, green, blue, yellow" | split: ", " %}
{{ colors | last }}
{# Output: 'yellow' #}

In the example above, the last filter is used to retrieve the last element from the ‘colors’ array, resulting in the output ‘yellow’.