[Shopify] snippetsを読み込む際にLiquidの値を渡す方法とその便利な活用方法

In this article, we will show how to pass values when calling snippets.

While developing, there were times when I wanted to pass a product title or a specific value obtained on the Liquid side to snippets. I did quite a bit of research and was able to find a solution in an overseas article, so I will explain it this time.

I will not only pass the value to snippets, but I will also write about some useful ways to use snippets with that value as an added bonus!

How to pass values to snippets in Liquid

First, we will describe how to pass values to snippets on Liquid.

First of all, we will describe how to call "test-block" snippets in Liquid.

{% include "test-block" %}

The following is an example of the way it is done.

Recently, it is becoming more common to use render instead of include.

{% render "test-block" %}

The example is as follows.

And let's assume that the contents of this "test-block" snippets are like this

<p>Hello EC Penguin! </p>

Call it "Hello EC Penguin!" The output is the sentence, "I am a good person.

How can we change the name "Mr. EC Penguin" depending on the situation?

This is where the "snippets" method introduced in this article comes in!

The way to describe it is

{% include "test-block", name: "SHOPIFY" %}

then you can put the value "SHOPIFY" in the variable name and pass it to the snippets side! Convenient.

So, let's add the contents of the "test-block" to the following

<p>Hello {{name}}! </p>

the output will be "Hello SHOPIFY! should be "1".

Another way to pass it is by using with.

For example, in a collection

{% for product in collection.products %}
{% include "test-block" with product
%}{% endfor %}

This would also pass the product to a snippet called "test-block".

Convenient Application of Passing Values to Snippets

Let me introduce a very useful little trick (like a sprig of chocolate, it's a little trick lol) by applying the method of passing values to snippets in Liquid.

First, let's look at the description in snippets. For example

{% if name == "President" %}
<p>Good morning, {{name}}! </p>
{% elsif name == "Goku" %}
<p>Oss, {{name}}! </p>
{% elsif name == "" %}
<p>Good morning, {{name}}! </p>
{% endif %}

Suppose there is a snippet called "test-block" that says "test-block".

Then we can change the output depending on the value we pass as name!

{% include "test-block", name: "president" %}

→"Good morning, Mr. President!"

{% include "test-block", name: "Goku" %}

→ "Oss, Goku!"

The output should be This is very useful because it allows different types of output even though they are the same snippets.

[Shopify] How to pass Liquid values when reading snippets and how to make use of them Conclusion

These were the ways to pass values to SNIPPETS.

I thought there might not be many uses for snippets, but there are times when you want to store information in snippets and link various information together, and you want to produce different output within the same snippet instead of using multiple snippets.

So, if you keep this in mind, you may be able to come up with unexpected suggestions.

Thank you very much for reading to the end! Have a great day!