Liquid とは? テンプレートタグの使い方。Shopifyのカスタマイズ。

Liquidとは、Rubyベースのテンプレートエンジン

Shopifyのコードを触ってみたいが、どうやって触るんだろう?
ということで、ちょっと調べてみたのですが、Liquidというのは、「Shopifyによって作成され、Rubyで書かれたテンプレート言語」のようです。
とは言ってもちょっとプログラム出身ではないので、しっくりきませんが。。

WordPressで言えば、テンプレートタグそのものがそれにあたるようですね。
このテンプレートタグを使用すると、様々な複雑な処理が簡単にできるようになりそうです。
とは言ってもタグがどのような種類があって、どのような処理や書き方をするのでしょうか?

今日は、初めてなので、まずは、よく使いそうであろうものから試してみました。

画像を表示する(asset_img_url)

まずは、画像の表示をしてみます。
あらかじめ、assetsフォルダに画像をアップロードしておきましょう。

 

というようなタグがありますので、これが出力されると、

のように画像タグが出力されます。

リンクの設定をする

基本的なHTMLリンクを生成する

次は、リンクを設定してみます。
テキスト・リンク先URL・title要素を設定します。

と入力すると、

と出力されます。

TOPページへのリンク

TOPページへのリンクを設定してみます。

と入力すると、

と出力されます。

ショッピングカートへのリンク

ショッピングカートページへのリンクを設定してみます。

と入力すると、

と出力されます。

サイト内の各ページへのリンクを貼るためのタグは他にも色々あるようなので、また後日紹介していきたいと思います。

CSSを読み込む(asset_url)

次に、CSSファイルを読み込んでみましょう。

とするとCSSが読み込まれますので、任意のファイル名に書き換えて使用します。

Javascriptを読み込む。(asset_url)

のようになります。

liquidファイルをインクルードする

下記のような記述をすると、任意のliquidファイルをインクルードすることができます。
snippetsフォルダ内にあるファイルは、

と記述すると、インクルードされます。

また、headerやfooter等、sectionsフォルダ内にあるものは、

と記述することで、インクルード可能になります。

まとめ

取り急ぎ、初めの一歩という感じのタグを紹介させていただきました。
慣れてきたら、色々な処理方法を紹介していきたいと思います。
下記は、ShopifyのLiquidのチートシートになりますので、気になる方は参考にしてみてください。

この記事を書いた人
KEiSoN★
スカイゴールド株式会社 代表取締役 / クリエイティブディレクター/webデザイナー

2009年1月よりフリーランスのディレクター/Webデザイナーとして活動しながら、ノマドな働き方を試み始める。
過去16カ国ほど訪れ、一眼レフにその景色を収めながら時々ドローンも飛ばす。2015年11月にスカイゴールド株式会社として法人化。
現在は主に東京を中心にしながら、 タイ・バンコクを年間4,5回ほど往復しながら活動中。
中小企業向けのWebブランディング・デザイン、Wordpressのオリジナルテーマ開発・オウンドメディア構築が得意。
最近は、Shopify構築にも携わっている。
国内外の様々な価値観・デザインに接触することで、幅広いクリエイティブや臨機応変にアイデアを提供する。

アーカイブ