Shopify Liquid

Liquidチートシート

Shopifyの概要や基本操作を覚えたあとは、Liquidでテーマのカスタマイズに挑戦しましょう。
Liquidを使いこなせるようになると自分が実現したいデザインや機能を実現できるので対応の幅が広がります。
新しいことはLiquidのチートシートを辞書のように活用することで役に立つはずです。

分からないことがあればチートシートで調べる

Shopify Cheat Sheet — A resource for building Shopify Themes with Liquid

Liquid編集におすすめのテキストエディター

ShopifyのLiquidを編集するときに使うテキストエディターは、マイクロソフトのコードエディターであるVisual Studio Codeエディター略してVSCodeがおすすめです。以下からダウンロード可能です。

Shopifyのテーマ編集にはVSCodeがおすすめ

Visual Studio Code – コード エディター | Microsoft Azure

VSCode shopifyサポート拡張機能

VSCodeでLiquidが色分けできれば、読みやすいコード画面になります。そんなことを叶えてくれるVSCodeの拡張機能があります。

Liquid編集にはVSCodeに拡張機能 Liquid Languages Supportを追加する

走って登るさんの記事が参考になります！

Shopifyテーマのtheme.scss.liquidをVSCodeでシンタックスハイライトさせる

拡張機能 Liquid Languages Support

Liquid Languages Support - Visual Studio Marketplace

SCSSとしてシンタックスハイライトされるようにする方法
①設定”で設定を開き、”file association”で検索する
②その中に”settings.json で編集”というリンクがあるのでクリックする
③以下を追加する

 "files.associations": {
   "*.scss.liquid": "scss",
   "*.js.liquid": "js"
 }

Shopifyのテーマの構造

トップページや商品詳細ページなど表示される画面の裏側ではたくさんのLiquidファイルやJSONファイルが読み込まています。

Liquidファイルには読み込まれる優先順位があり、オンラインショップに必要なパーツを小分けにして管理しているイメージです。

例えば、商品詳細ページではカートボタンが必要ですが、固定ページではカートボタンは不要だったりと、そのページに適したパーツを分けて管理してページに必要なページをその都度読み込んでいるイメージです。

テーマに配置されているフォルダやファイルを一通り目を通すことで、ページによって読み込まれるファイルが異なるので、Liquidの仕組みを理解しやすくなります。

Shopifyのオンラインストア2.0のアップデートで新テーマ「Dawn」で
トップページ以外のページにも管理画面からドラッグアンドドロップで
メニューを追加・編集・削除ができるようになりました。　

Shopifyの無料テーマである「Brooklyn」を事例にしています。
テーマ内のフォルダ構成ファイルの配置は以下の通りです。
詳細のファイル名などはざっと目を通していただくだけでも大丈夫です。

テーマのフォルダ/ファイル構造
Layout
　Templates
　　Sections
　　　Snippets
Assets
Config
Locales

親子関係は「Layout > Templates > Sections > Snippets」となっています。

①レイアウトフォルダにあるファイル
　②テンプレートフォルダにあるファイル
　　③セクションフォルダにあるファイル
　　　④スニペットフォルダにあるファイル

レイアウト

ページのレイアウトを設定する記述があるファイルが格納されているフォルダです。オンラインストアにパスワードを設定した場合に「password.liquid」ファイルが読み込まれます。それ以外の場合は「theme.liquid」が読み込まれます。また「theme.liquid」にはページに適したテンプレートファイルを自動的に読み込むことができる
{{ content_for_layout }}タグが記述されています。詳しくはこちら

/layout
　password.liquid
　theme.liquid

「/layout」は「layout」フォルダを意味します。
「password.liquid」の拡張子「.liquid」はShopifyオリジナル言語のLiquidが
記述されているファイルになります。

テンプレート

テンプレートフォルダに、Liquidファイルを追加することで、管理画面から固定ページを新規追加・編集するときに、テンプレートを選ぶことが可能になります。例えば、商品詳細ページのデザインを2つパターンにしたい場合に商品ページAではテンプレートAを商品BページではテンプレートBを適応させて、別々のデザインでショップを運営することが可能になります。
※テンプレートファイルの中身は、セクションを読み込むコードだけ
　記述されている場合も多いです。

/templates
　/customers
　　account.liquid ※アカウント情報確認画面
　　activate_account.liquid 
　　addresses.liquid 
　　login.liquid ※会員情報ログイン画面
　　order.liquid ※注文詳細画面
　　register.liquid ※アカウントの作成ページ
　　reset_password.liquid ※アカウントのパスワード再発行ページ
　404.liquid ※404ページ
　article.liquid ※ブログ記事ページ
　blog.liquid ※ブログ一覧ページ
　cart.liquid ※カートの中身ページ
　collection.liquid ※コレクション（＝商品一覧）ページ
　gift_card.liquid ※ギフトカードページ
　index.liquid ※ホームページ（ShopifyストアのTOPページ）
　list-collections.liquid ※コレクション一覧（＝コレクションをまとめた）
　page.about-us.liquid ※追加-Aboutページ
　page.contact.liquid ※追加-お問い合わせページ
　page.full-width.liquid ※追加-横幅広いページ
　page.liquid ※デフォルトの固定ページ
　password.liquid 
　product.liquid ※商品詳細ページ
　search.liquid ※検索結果ページ

セクション

セクションフォルダは、ページを構成するためのパーツを表示するための複雑なコードが記述されていることが多いのが特徴です。

/sections
　advanced-content.liquid
　article-template.liquid
　collection-template.liquid
　featured-blog.liquid
　featured-collections.liquid
　featured-content.liquid
　featured-product.liquid
　featured-products.liquid
　featured-row.liquid
　featured-video.liquid
　footer.liquid
　header.liquid
　list-collections-template.liquid
　map.liquid
　newsletter.liquid
　password-content.liquid
　password-header.liquid
　product-recommendations.liquid
　product-template.liquid
　slideshow.liquid

スニペット

セクションほど独立性はないけど、共通化しておきたいパーツをスニペットにします。共通化モジュール。

/snippets
　ajax-cart-template.liquid
　bgset.liquid
　collection-grid-collage.liquid
　collection-grid-item.liquid
　collection-sorting.liquid
　comment.liquid
　drawer-menu.liquid
　featured-blog.liquid
　image-style.liquid
　media.liquid
　onboarding-featured-blog.liquid
　onboarding-featured-collections.liquid
　onboarding-featured-products.liquid
　pagination.liquid
　product-grid-collage.liquid
　product-grid-item.liquid
　product-price.liquid
　search-bar.liquid
　social-meta-tags.liquid
　social-sharing.liquid
　svg-definitions.liquid
　tags-article.liquid
　xr-button.liquid

アセット

アセットフォルダはCSS・Scss・javascriptのファイルが格納されているフォルダです。追加で自分のカスタマイズしたCSSを設置する場合はこのフォルダに格納します。

/assets
　gift-card.scss.liquid
　ico-select.svg.liquid
　theme.js.liquid
　theme.scss.liquid
　timber.scss.liquid
　gift-card.scss
　theme.scss
　timber.scss
　style.scss.liquid ※追加-オリジナルCSS
　style.scss ※追加-オリジナルCSS

コンフィグ

テーマ全体のスキーマを確認しているフォルダです。スキーマについては下記で解説があります。

/config
　settings_data.json
　settings_schema.json

ローカルズ

言語設定のjsonファイルが入っているフォルダです。管理画面のメニューの表記を日本語に対応するためファイルなどが入っています。Shopifyをローカライズするために必要なファイルが格納されています。

/locales 言語のjsonファイル
　ja.json
　・
　・

スキーマ（schema）とは

スキーマとはデータを定義している場所です。
スキーマフォルダにある「settings_data.json」には管理画面から設定した内容が保存されています。設定メニューや選択肢・多言語表示などに関するデータが入っています。

スキーマを編集できるようになると、テーマのカスタマイズスキルが格段に上がると言われています。スキーマを定義している箇所は各セクションファイルにもJSONのコードがあります。

「settings_schema.json」にJSONを記載すれば、管理画面のUIやテーマの表示が変わることを確認できます。

「settings_schema.json」にはテーマ名やバージョンなどの情報を記載されています。ワードプレスでいうstyle.cssに記載するテーマの定義のようなものです。

SectionsSections

「settings_schema.json」にJSONを書くと、管理画面のUIにも反映されるようになっています。

{% schema %}
 {
   "name": "Gallery",
   "settings": [
     {
       "id": "title",
       "type": "text",
       "label": "Title",
       "default": "Hello world"
     }
   ]
 }
{% endschema %}

スキーマを登録時の注意事項

スキーマにJSONを登録すれば、管理画面の表示はすべて表示されますが、
実際にオンラインショップのページに表示される内容は、Liquidを書かないとページ上には表示されません。

例：ヘッダーの告知バー
「Brooklyn」では管理画面から告知バーが設定できます。
告知を表示する　にチェックをいれると、画面上部にバーが表示されます。

「settings_schema.json」ではなくて「header.liquid」で「告知を表示する」で検索すると該当のJSONがわかります。

// header.liquid
// 「・」は「告知を表示する」を多言語にした文字が入っています。
   わかりやすくするため日本語のみ表記しています
{
     "type": "checkbox",
     "id": "show_announcement",
     "label": {
       ・
       "ja": "告知を表示する",
       ・
       ・
       ・
       ・
     },
     "default": false
},

JSON＋Liquidに記述すると管理画面の設定とページに表示ができる
①JSONを登録（チェックボックス、テキストボックス、その他いろいろ）
②Liquidで
（もし、チェックボックスがチェックならこれを表示する
　それ以外の場合はこれ）などの記述をする
→①②まで登録してはじめて、管理画面とページに表示が可能になる

JSONやLiquidについては以下の公式のセミナーがわかりやすいです。
この動画ではさらにTheme Kit をDOS画面からコマンドラインでインストールする方法が解説されており、デスクトップなどのローカル環境とShopifyを同期することができます。FTPでファイルアップロードする手間がなくなります。

具体的な方法をまとめました。

スキーマの使い方

◆スキーマを使って独自パーツを作成する方法

①スキーマをJSONで記述します。

{% schema %} //開始タグ
{
 ”name”:"サンプルパーツA"　//セクションに任意の名前をつける
 ”settings”:[　//この中でパーツ作成の記述をする
  {
   "type":"text", //作成するパーツのタイプ
   "id":"parts-title", //　HTML出力時に使用
   "label":"パーツタイトル", //　タイトルラベル　例：テキストボックスの上にあるラベル
   "default":"パーツタイトルテキストです。", //初期値
   "info":"表示するタイトルを入力してください。", //　例:テキストボックスの下にある薄い文字で説明や注意書きなど
  }
 ]　
}
{% endschema %} //終了タグ

②スキーマの基本設定ができたらHTML出力用のタグを記述します。
 「page.liquid」に以下のコード追加します。

//公式
{{ section.setting.(ID名) }}

↓

// オブジェクト（パーツ出力用のタグ）
{{ section.setting.parts-title }}

③管理画面のページテンプレートに「サンプルパーツA」というセクションがメニューとして追加されます。

KEiSoN / WEBとクリエイティブの研究室さんの動画が参考になります！【Shopify制作・テーマカスタマイズ】更新可能な独自パーツをschemaで作成する基本的なコード編集・構築方法を紹介します。

◆独自パーツをトップページに反映させる方法

トップページの場合は、上記の個定ページとは違う方法になります。
上記で記載したスキーマの下に以下のコードを追加します。
※このコードを追加することでトップページにセクションを追加することができるようになります。schemaのsettingsの下にpresetsを追記します。

"presets":[ //indexセクションに登録
  {
   "name":"オリジナルパーツA",
   "category":"テキスト"
  }
 ]

"name":"オリジナルパーツA",はセクション名のことでサムネイル右隣にあるタイトル名になります。
"category":"テキスト"はセクションをまとめているラベルになります。
例えば、「ストア情報」「テキスト」「ブログ」「プロモーション用」などです。

大まかな流れ
①セクションフォルダに新しいセクションを追加するために
　liquidファイルを新規作成
②作成したLiquidファイルにschemaのコードを記述しパーツを作成する
③固定ページやコレクションページ、トップページなどに出力するための
　記述をする

ショプクリさんの記事が参考になります！

Shopifyテーマのカスタマイズ②カスタマイズ項目を追加する方法【LiquidとSchemaのサンプルコード付】｜ショプクリ

公式のブログさんの記事が参考になります！

Settings

初めてのShopifyテーマセクション作成

セクションとは

セクションとは管理画面からドラッグで追加したり、並べ替えたりできるメニューのことを指します。セクションの中のメニュー表示もテーマのコード編集で指定することが可能です。

セクションを追加する方法は、HPcodeさんの記事が参考になります！

Shopifyテーマのカスタマイズ項目を作成する方法

コード側で、JSONを使用してショップオーナーがテーマのカスタマイズメニューから設定できる項目を作成します。

JSONとは

JSONとはJavascriptのオブジェクトの書き方を元にしたデータ定義方法です。{ }や[ ]の括弧を使った書き方になります。

JSON設定は次の2種類のファイルに含めることができます。

①The settings_schema.json file.
このファイルがない場合はテーマをエクスポートしたときや、コード編集ページを開いたとき自動生成されます。
このファイルはテーマエディターのテーマ設定エリアの構成と内容を設定することができます。設定はテーマ内の他のファイルから参照することが可能です。このファイルは、テーマの 「config」 フォルダにあります。

②Liquid section files.
これらのファイルは、テーマ内のセクションの外観と機能を設定することできます。このファイル内の{% schema %}タグはテーマエディタ内の各セクションの設定の構成と内容を制御します。
各セクションファイルの設定は、そのセクションに固有のものであり、テーマの他のファイルから参照することはできません。
これらのファイルは、テーマの 「sections」 フォルダにあります。
セクションの設定は{% schema %}と{% endschema %}タグで囲まれています。

公式が少し参考になります。

Settings

セクションとスニペットの使い分け

セクションとスニペットの違いはスニペットで構築したパーツはテーマエディタ（管理画面のUI）から直接編集ができないところです。
（ダイナミックセクションは編集不可でコード編集は可能という意味）

セクションはテーマエディター（管理画面UI）から編集が可能です。

セクションとスニペットどちらにファイルを追加するか迷ったときは、
クライアントがテーマエディタ（管理画面）から更新する箇所であるかどうかを元に判断するのが良さそうです。

テーマにオリジナルのCSSを追加する方法

①「layout」フォルダにある「theme.liquid」ファイルを編集する
<head>内の記述に
{{ 'theme.scss.css' | asset_url | stylesheet_tag }}
があるので、その下に追加したいCSSのパスとファイル名を追加する
{{ 'style.scss.css' | asset_url | stylesheet_tag }}
を追記する

②「assets」フォルダに空のファイルを新規作成する
　style.scss.liquid
　を作成する【ここにオリジナルのCSSを記述する】

KEiSoN / WEBとクリエイティブの研究室さんの動画が参考になります！【Shopifyの使い方】テーマカスタマイズ・コード編集の基本(1) CSS・JSの読み込み・ファイル設置方法・画像のアップロード方法

画像をテーマファイルに登録する方法

どうやってテーマにある画像を呼び出すのか？
画像を表示させるやり方は2つあります。

①.HTMLで記述する方法
1-1.Shopifyの管理画面から画像をアップロードする
1-2.テーマファイルの画像を表示したい場所に追記する
<img src="https//cdn.shopify.com/～/画像名.jpg">

②Shopifyテンプレートタグで記述する方法
テーマファイルの画像を表示したい場所に追記する
{{ ’画像名.jpg’ | asset_url | img_tag }}

※「assets」フォルダに画像を保存し、Shopifyに「assets」フォルダに
　ある画像をアップロードする必要あり（詳しくは下記解説）

「assets」フォルダにある画像をアップロードする方法

Shopifyでオリジナルテーマを制作するときに、テーマで使用する画像ファイルはどこに保存するのか？「assets」フォルダ？WordPressのように画像をテーマ側に保存したい場合があります。

WordPressと同じような考えで行うと失敗したので、内容を共有したいと思います。

Shopifyのテーマファイルをローカルに保存してShopify テーマキットでテーマを制作する前提です。

「assets」フォルダにShopifyにアップロードしたい画像を保存しました。
「assets」フォルダの中に「img」フォルダを作成し、その中にテーマで使用する画像をいれました。

テンプレートファイルから画像を読み込む際に、

{{ "img/gift-hero.jpg" | asset_url | img_tag }}

と記述しましたがプレビュー画面で画像が表示されませんでした。
原因はShopify側に画像がアップロードされていないためです。

では、どうすれば、Shopifyに画像をアップロードできるのでしょうか？

「assets」フォルダにある画像をアップロードするには
「img」フォルダからアップロードしたい画像を「assets」フォルダの直下に置く必要があるそうです。そうしないとエラーで画像がアップロードできない仕様みたいです。

「assets」フォルダの中には「css」や「img」などのサブフォルダを作成するとShopifyにアップロードできないのです。

theme kit を使って画像をアップロードする方法

ローカルにある「assets」フォルダの直下に置いた画像をアップロードする方法は、ターミナルで以下のコマンドを打ち込むことでアップロードできます。

theme deploy --allow-live

画像を「assets」フォルダにドロップアンドドロップした時に
自動的にShopifyにアップロードしたい場合は以下のコマンドで対応可能です。

theme watch --allow-live

テンプレートファイルから画像を読み込む場合は

{{ "gift-hero.jpg" | asset_url | img_tag }}

にすることで画像が読み込むことができました。

ここにクラスを追加したい場合は

{{ "gift-hero.jpg" | asset_url | img_tag: 'responsive' }}

img_tagでは、altとclass名をパラメーターで設定することができます。

@eijiSaitoさんの記事が参考になります！

【Shopify】LiquidのHTML filterを全てまとめてみた話 - Qiita

セクションにセクションを追加する

セクションファイルに

{% section 'section名' %}

のコードを記述するとエラーになります。

セクションファイルから違うセクションファイルは読み込めません。

その場合は、スニペット化して対応します。

スニペットに追加したコードをセクションに追加する

①「snippets」フォルダに新規ファイルを作成する
（例：banner-parts.liquid）

②「sections」フォルダにあるliquidファイルにスニペットを読み込むコードを追記する

{% include 'banner-parts' %}

{% snippets 'banner-parts' %} ではないので注意が必要

セクションに追加したコードをページに追加する

①「sections」フォルダに新規ファイルを作成する
（例：section名.liquid）

②「pages」フォルダのファイルにセクションを読み込むコードを追記する

{% section 'section名' %}

KEiSoN / WEBとクリエイティブの研究室さんの動画が参考になります！【Shopifyの使い方】テーマカスタマイズ・コード編集の基本(2) 独自パーツの作成・インクルード・基本の条件分岐処理。

個定ページに投稿されたコンテンツを呼び出す方法

個定ページに投稿した内容をコレクション一覧ページに追加する方法を記載します。個定ページに投稿されている内容をどうやって呼び出すのか？
以下のコードを読み込たいファイルに記述することで可能です。例では個定ページである「about-us」ページの投稿した内容を読み込むコードになります。

<!-- the content of the About Us page -->
{{ pages.about-us.content }}

オブジェクトハンドルについて公式が参考になります！

Object handlesObject handles

コレクションページに個定ページのコンテンツを表示する方法

（例）ネックレスのコレクション一覧ページに、個定ページのコンテンツを
　　　表示させたい場合

・個定ページのハンドル名「neckless」
・ネックレスのコレクションのハンドル名「neckless」

{% if collection.handle == "neckless" %}
  {{ pages.neckless.content }}
{% endif %}

もし、コレクションのハンドルがネックレスの場合
ネックレスページのコンテンツを表示する

※コレクションはハンドル名「neckless」で指定します。
※個定ページもハンドル名「neckless」で指定します。

コレクションと個定ぺージのハンドル名が同じでも問題はないのか？

コレクション一覧ぺージと個定ページのハンドル名が同じでも、URLが異なるので、問題はありません。

コレクションURL
　独自ドメイン/collections/neckless

個定ページURL
　独自ドメイン/pages/neckless

テンプレートファイルでセクションを読み込む方法

{{ }}ではなく{%%}を使います。セクションを読み込んでいます。
テンプレートフォルダにあるファイルに以下のコードを追加します。
セクションの「blog-template」を読み込む記述です。

{% section 'blog-template' %}

ポイント
viewに表示させるという命令 {{ }} ではなく、
あくまでsectionを呼び出して展開するという命令なので
{{ }}ではなく{%%}を用いている。

基本のif文（商品タイプで条件分岐）

商品タイプで条件分岐
「product.liquid」または「product-template.liquid」に記述する

{% if product.type == "Tシャツ" %}
   ここに表示させたいものを記述
{% endif %}

（例）商品タイプが「Tシャツ」の場合のみ、banner-partsを読み込む

{% if product.type == "Tシャツ" %}
  {% include 'banner-parts' %}
{% endif %}

基本のif文（タグで条件分岐）

タグで条件分岐
「product.liquid」または「product-template.liquid」に記述する

（例）商品タグに「黒」が含まれている場合、banner-partsを読み込む

{% if product.tags contains "黒" %}
  {% include 'banner-parts' %}
{% endif %}

基本のif文（タグで条件分岐）

「collection.liquid」に記述する

（例）商品タグに「黒」が含まれている商品がコレクションページに
　　　ある場合、banner-partsを読み込む

{% if collection.tags contains "黒" %}
  {% include 'banner-parts' %}
{% endif %}

（例）商品タグに「黒」を含まない商品がコレクションページに
　　　ある場合、banner-partsを読み込む

{% unless collection.tags contains "黒" %}
  {% include 'banner-parts' %}
{% endunless %}

基本のif文（コレクションページで条件分岐）

「collection.liquid」に記述する

（例）Tシャツコレクションの場合、banner-partsを読み込む

{% if collection.title == "Tシャツ" %}
  {% include 'banner-parts' %}
{% endif %}

（例）コレクションハンドル（パーマリンク）が「tshirts」の場合
　　　banner-partsを読み込む

{% if collection.handle == "tshirts" %}
  {% include 'banner-parts' %}
{% endif %}

条件のパターン

イコールの場合
{% if collection.handle == "tshirts" %}

除外する場合
{% if collection.handle != "tshirts" %}　

どちらかの場合
{% if collection.handle == "tshirts" or collection.handle == "yshirts" %}

両方含む場合
{% if collection.handle == "tshirts" and collection.handle == "yshirts" %}

ハンドルとは

ワードプレスでいうURL（パーマリンク）のことで、handleオブジェクトには下記に関するURL情報を持っています。

・products
・collection
・pages
・blogs
・articles

※ハンドルにスペースと特殊文字を設定するとハイフン（-）に自動で
　置き換えられます。

ページのハンドル（URL）を変更する方法

ブログ記事や個定ページを登録する画面の下部にある「検索結果のプレビュー 」から「ウェブサイトのSEOを編集する」をクリックすると「URLとハンドル」がありますので、そこから変更が可能です。
EC PENGUINさんの記事が参考になります！

テンプレートフォルダにあるLiquidファイルの命名規則

[目的].[名前].liquid

という命名規則に準じて自動的につけられます。目的とは以下です。

目的とは？
そのテンプレートファイルを何の用途で使うのか？ということです。
article　ブログ記事
blog　ブログ一覧
cart　カート
collection　コレクション（＝商品一覧）ページ
gift_card　ギフトカード
index　トップページ
page　個定ページ
product　商品詳細
search　検索
404　404ページ
list-collections　コレクション一覧（＝コレクションをまとめた）ページ
customers/account　会員アカウント
・
・

名前は任意で、わかりやすい名前を決めます。個定ページ「私たちについて」の場合は以下の通りです。

page.about-us.liquid

{{ }} と {% %}の違いについて

{{ }}　データを出力する

// 例
{{ settings. facivon | img_url: '32X32' }}

設定されたファビコンをimgのパスに32px X 32px の画像サイズで展開する

{% %}　処理

// 例
{% if setting.favicon != blank -  %}
　処理内容
{% endif -%}

もし、ファビコンが設定されていなかったら
　処理内容を処理（出力）
をする

［条件］トップページ以外に処理する

pageタイプが「index」ではない場合

{% unless request.page_type == "index" %}
    ここに処理内容を書く
{% endunless %}

さらに条件を追加するには「or」を使い、条件をを追加する
（例：page.aboutでない場合も追加する）
トップページとAboutページではない場合の処理となります。

{% unless request.page_type == "index" or template == "page.about" %}
    ここに処理内容を書く
{% endunless %}

「templates」フォルダにある「page.about.liquid」も条件に追加しました。

条件を指定するときは、拡張子である「.liquid」は不要です。
「page.about」とします。
【×】template == "page.about.liquid"
【●】template == "page.about"

今回出てきた構文

①unless構文

{% unless 条件  %}
    ここに処理内容を書く
{% endunless  %}

②トップページ条件指定

request.page_type == "index"

③条件追加

or

④テンプレートファイル指定する

template == "page.about"

変数［assign］

assignとは、変数のことで、値を代入することです。

{%- assign img_url = collection.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

変数　img_url　に値を代入する

フィルター（条件追加）

｜とはフィルターのことです。「｜」によって示されたフィルターが導入されています。

フィルターの役割
・出力データを何らかの形で操作する
・テーマを依存関係から解放する
・書くコード量を減らすことでテーマデザイナーの時間を節約する

collection.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.'

公式のLiquidの解説が役に立ちます！

Shopifyのテンプレート言語 Liquidの概要

フィルターについてShopify-Guideさんの記事が参考になります！

ShopifyのLiquidとは？7つのディレクトリと3つの構文の使い方 ｜ Shopify Guide

変数の定義［capture］

{% capture media_layout %}
    変数の中身
{% endcapture %}

「capture」をつかって変数を定義します。
「media_layout」という名前の変数を定義しました。

変数の中身を表示する［capture］

 {{ media_layout }}

「media_layout」の中身を表示します。

繰り返し処理［for］

{% assign array_string = "Mike,Chris,Bob,Densie,Clinton,Michal" %}
{% assign = array_string | split: "," %}
 <ul>
  {% for  name in array%}
    <li>{{ name }}</li>
  {% endfor %}
</ul>

【表示例】
・Mike
・Chris
・Bob
・Densie
・Clinton
・Michal

さらにif文を追加する

{% assign array_string = "Mike,Chris,Bob,Densie,Clinton,Michal" %}
{% assign = array_string | split: "," %}
 <ul>
  {% for  name in array%}
 　 {% if name.size < 4 %}　//nameの文字数が4未満の場合、表示する
　　  <li>{{ name }}</li>
　  {% endif %}
  {% endfor %}
 </ul>

【表示例】
・Bob

コレクションに追加されている商品のタイトルを取得して表示する方法

コレクションに追加されている商品のタイトルを取得するためには

①コレクションのオブジェクトにアクセスする必要があります。

手段
グローバルオブジェクト
collections[ 'コレクションのハンドル名' ] を使います。

グローバルオブジェクトとは
テーマのどこからでもアクセスできるオブジェクトのことです。
［商品詳細］［ページ］［ブログ］［コレクション］中身を画面に表示することができます。

{% assign collection = collections[ 'featured-colection' ] %}
{{ collection.title }}
  <ul>
   {% for product in collection.products %}
　  <li>
　　  <a href="{{ product.ulr }}">
　　   {{ product.title }} - {{ product.price | money }}
　　     {% if product.available != true %}
　　　    （SOLD OUT）
　　     {{% endif %}}
　　  </a>
　  </li>
   {% endfor %}
 </ul>

【表示例】
Featured-Collection
　・Awesome - $80
　・Old School - $110
　・Insane - $120
　・Gnarly- $120
　・Cool Kicks- $120

在庫切れの商品にSOLD OUT表記する

{% if product.available != true %}
　（SOLD OUT）
{{% endif %}}

もっと効率的にかくと・・・（書くコードが少ない方が良い）

{% unless product.available == true %}
　（SOLD OUT）
{% endunless %}

※上記のコードを記載することにより自分で作った配列ではなく、
　オブジェクトを使用することができるようになりました。

Liquidコード編　基本構文を使う実習として
参考にしたCode with Chris the Freelancerさんの動画です。

Liquidについてわかりやすいサイト一覧

Web業界で働く方を少しだけ手助けするメディアさんの記事が参考になります！【Shopify】独自言語「liquid」の基本的な書き方 - #04

【Shopify】独自言語「liquid」の基本的な書き方 - #04

Clipkitガイド 〜 公式ドキュメントさんがわかりやすいです！

テンプレート言語Liquid

@eijiSaitoさんの記事が参考になります！

ShopifyのLiquidファイルの構造の話① - Qiita

ShopifyのLiquidファイルの構造の話② - Qiita