Shopifyでフロント側をイジるときのLiquidの書き方

ShopifyのをLiquidイジったのでメモ

Liquidとは

Liquidというのは、Shopifyで作成されたRubyで書かれたテンプレート言語で、Shopifyを動かすために必要な言語。

基本的な書き方

基本的な書き方は
・ifやforといった何かしらの処理がされる {% ○○○ %}
・サイトにhtmlなどで出力される {{ ○○○ }}

コメント

Liquid

{% comment %} ここがコメントアウトされます。 {% endcomment %}

画像の表示

Liquid

{{ '○○○.png' | asset_url | img_tag }}

出力結果

<img src="//cdn.○○○.com/○○○/○○○.png" alt="" />

aタグでのリンク設定

Liquid

{{ 'お支払い方法' | link_to: 'https://○○○.com/○○○/','お支払い方法について' }}

出力結果

<a href="https://○○○.com/○○○/" title="お支払い方法について">お支払い方法</a>

CSSの読み込み

Liquid

{{ '○○○.css' | asset_url | stylesheet_tag }}

出力結果

<link href="//cdn.○○○.com/○○○/○○○.css" rel="stylesheet" type="text/css" media="all" />

JavaScriptの読み込み

Liquid

{{ '○○○.js' | asset_url | script_tag }}

出力結果

<script src="//cdn.○○○.com/○○○/○○○.js" type="text/javascript"></script>

liquidファイルのインクルード

Liquid

{% include '○○○' %}

sectionsフォルダ内にあるものは

Liquid

{% section '○○○' %}

変数

JavaScriptで変数を定義するのはconstやletですが、Liquidではassignで変数を定義

Liquid

{% assign hoge = 123 %}

if

Liquid

{% if 5 > 3 %}
// 処理
{% endif %}

for

Liquid

{% for item in array %}
    {{ item }}
{% endfor %}