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のチートシートになりますので、気になる方は参考にしてみてください。

WEB制作についてのご相談はお気軽にどうぞ。

WEBデザイン制作、ブランディング、Wordpress構築・カスタマイズ、
WEBサイトに関するお見積もり・不明点やご相談等、お気軽にお問い合わせください。

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

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

アーカイブ