How to Remove Duplicated Items in Array in Shopify

Obviously, you want to show your product page with precise and clear information but, you find out that one key tag is repeated. Don’t panic, you can definitely delete the redundant. The tutorial would help you remove duplicated items in the array. Let keep track of this article.

Table of content

What is Liquid template language?

Liquid is a kind of language used for some websites. It includes many logical and comparison operators. Basic operators are often used in Liquid code so that you can change or separate items in order to show what you want.

Liquid is used as the backbone of Shopify to upload dynamic content on the front page. Liquid has been sold for more than 10 years and now become a good source for a lot of hosted website application such as Jekyll, salesforce desk, and zendesk.

General information of array filter and uniq in liquid?

In general, the formation of an array looks like this:

sample array filter

From the sample picture, it can be said that array filter is a function used to create a new array from a provided array including names or items which meet the demand of the condition set by the argument function.

The filter feature is used to offer callback function for each character in an array and build a new array that can also give the value back to confirm the true feature of that element. The callback is compatible with three arguments: the value of the element, the index of the element and the array objects being traversed.

In addition, the range of elements demonstrated by the filter is set by the first petition of the callback. If existing elements are changed or eliminated, their value will be passed to the filter hence when filter check these elements, their value is kept.

So, what is the argument function? The function of the argument is to check the condition of each array. Three arguments are available: arrat is mentioned above, index is processed by the function and element is activated by the current element.

Moreover, the return value is also worth mentioning. The return value aims to return a new array consisting of elements that satisfy the condition of the argument filter.

Uniq is a function that allows users to remove duplicated items or characters in an array.

How to remove duplicated items in the array

Steps to remove redundant items are effortless. Just add split and join in the code line, then duplicated items are eliminated in the array and there is no mistake in your product page. Let’s look at the example below:

Input:


{% assign fruits = "orange apple banana apple orange" %}
{{ fruits | split: ' ' | uniq | join: ' ' }}

Output:

orange apple banana

To sum up, it can be said that customers feel a little bit annoyed about duplicated items on your product page, the redundant may distract buyers. Therefore, removing copied elements is necessary to create a better customer journey. We hope that this tutorial is helpful to you.