【初心者用】Shopify Liquid 学習方法のまとめ
YOSUKE DESIGN
ShopifyのLiquidを学習する人が増えましたので、少しでもお役に立てればと。ここに学習したことのアウトプットして整理しました。
※使用した学習教材を追記しました。
※Online Store 2.0の内容を追記しました。
この記事のテーマ
この記事の内容
- ① Shopify Liquid学習 コードの基礎知識
- ② Shopify Liquid学習 テーマのファイル構成
- ③ Shopify Liquid学習 テーマ開発の基礎知識
- ④ Shopify Liquid学習 テーマ開発の学習教材
この記事を書いている僕は、2020年からShopifyエキスパートで働いて、現在はShopifyフリーランスエンジニアとしてストア構築、テーマ開発をしています。デイトラというオンラインスクールでShopifyコースのメンターもしています。
Shopify Liquid学習 コードの基礎知識
LiquidはShopifyの共同創設者兼CEOのTobiasLütkeによって開発された、Rubyで書かれたオープンソースのテンプレート言語です。
Shopifyのテーマを作成、あるいはカスタマイズする場合、このLiquidテンプレート言語を理解しておく必要があります。
Shopifyのテーマのコードを変更するには２種類の方法があります。
- ①Shopify online code editor を使う
- ②ローカル環境を構築して、好きなコードエディタ を使う
少しのカスタマイズであれば、Shopifyの管理画面からShopify online code editorを使ってのコーディングで大丈夫ですが、本格的にコーディングしていくとなると、打ち間違いなどもわかりにくいので、ローカル環境を構築して、好きなコードエディタを使うことをおすすめします。
ローカル環境を構築して、VS Code で拡張機能を使うと、Emmetも使用出来るので便利です。
Shopify LiquidのVS Codeの拡張機能 おすすめ
Shopify Liquid学習 テーマのファイル構成
Shopifyのテーマの構成を説明します。
※Online Store 2.0もフォルダ構成は一緒になります。
上から順番に読み込まれていきます。
- Layout
- Templates
- Sections
- Snippets
- Assets
- Config
- Locales
一つ一つ説明していきます。
Layout
入っているファイル：
- theme.liquid
- password.liquid
- gift_card.liquid
theme.liquid
<head> 内要素、CSS、JSなどの読み込み指定
<body>
HeaderやFooterの読み込み指定
テーマの大枠であり、ほぼ全てのページで共通で使用されるテンプレートファイルなどが格納されるフォルダになります。theme.liquidが基本、全てのベースになっています。これがないとテーマとしてアップロードしてもエラーになります。
password.liquid
オープン前のティザーページの役割を担うテンプレートになります。
Online Store 2.0の場合
入っているファイル：
- theme.liquid
- password.liquid
※基本のファイルと考え方は、Online Store 1.0と変わらないです。
Templates
入っているファイル：
- 404.liquid
- article.liquid
- blog.liquid
- cart.liquid
- collection.liquid
- gift_card.liquid
- index.liquid
- list-collections.liquid
- page.contact.liquid
- page.liquid
- password.liquid
- product.liquid
- search.liquid
各ページの基本となるテンプレートファイルが入っています。
index.liquid
TOP（ホーム）ページ
collection.liquid
コレクション（カテゴリー）ページ
product.liquid
商品ページ
page.liquid、
固定ページ
cart.liquid
カートページ
blog.liquid
ブログページ
404.liquid
404ページ
マイページの基本となるテンプレートのファイルも入っています。
（customersのフォルダの中）
- account.liquid
- activate_account.liquid
- addresses.liquid
- login.liquid
- order.liquid
- register.liquid
- reset_password.liquid
Online Store 2.0の場合
Section Everywhereの導入に伴い、JSONファイルに変わりました。
（基本的な役割はOnline Store 1.0と同じになります）
入っているファイル：
- 404.json
- article.json
- blog.json
- cart.json
- collection.json
- index.json
- list-collections.json
- page.contact.json
- page.json
- password.json
- product.json
- search.json
マイページの基本となるテンプレートのファイルはそのままです。
（customersのフォルダの中）
- account.liquid
- activate_account.liquid
- addresses.liquid
- login.liquid
- order.liquid
- register.liquid
- reset_password.liquid
補足として、gift_card.liquid もそのままになります。
Sections
入っているファイル：新しくテーマを作成するときには無し。
このセクションが、上記の各テンプレートをまたぐことが出来て、共通部分に出来ます。なので、各ページで使用される「共通パーツ」などが格納されるフォルダになります。Shopifyのテーマは、このセクションが大きな特徴で、管理画面のカスタマイズから操作できるところです。
ここに、無料テーマや有料テーマでは、headerパーツ、footerパーツ、商品一覧パーツ、スライドショーパーツ、テキスト＆イメージパーツ、ニュースレターパーツなどが入っています。
Online Store 2.0の場合
Online Store 2.0の場合は、基本のテーマ作成を新テーマDawnをベースに作成するため各セクションファイルの役割を理解する必要があります。
ファイルのSchemaに書かれているJSONで、プリセッツというものを記述していると、どのテンプレートフォルダに入っているテンプレート（〇〇.json)でも使用可能になります。
【Shopify学習】Schemaを使った開発方法を解説を参考にしてください。
Snippets
入っているファイル：新しくテーマを作成するときには無し。
セクションは、テーマのカスタマイズから設定できるものに出来ますが、スニペットはできません。共通部分に出来るところは、セクションと一緒ですが、あくまでも部分的なところを担うのが特徴です。なので、Sectionsよりもさらに細かいアイテム単位の要素を記述したliquidファイルを格納します。例えば、メニューの部分や、ページのヘッダーの部分、各種アイコンなどです。
Assets
入っているファイル：JSファイル、CSS、SCSS、画像などのファイル
※Sass（SCSS）は非推奨に変更（2020年11月)
その他の拡張子が入っているというイメージで大丈夫です。画像やアイコン、JSファイル、CSSファイルなどを格納しています。
実際にShopifyのテーマのカスタマイズを行う時は、このAssets内のCSSに記述してスタイリングを行っていきます。
Config
入っているファイル：
- settings_data.json
- settings_schema.json
テーマのカスタマイズするときに使うテーマ共通の色指定などを行う設定が、settings_schema.jsonに書かれています。
テーマ全体に関わるカスタマイズを管理画面から行うときに、Schemaを使ってコーディングするのですが、その時に使うのがsettings_schema.jsonです。
この２つは、Shopify管理画面から行うテーマカスタマイズの設定を行うファイルになります。
Schemaを使ってコーディングが出来ると、管理画面上のデザイン編集をより便利になるようにしたり、Shopify Liquidテーマ開発の幅がぐんっと上がるので、ぜひ理解してみてください。
Locales
入っているファイル：ja.json ファイルなど
言語ごとの翻訳jsonファイルが格納されているフォルダで、日本語の記述を変更したい場合は、このja.jsonで翻訳されている日本語を変更することで可能になります。
補足教材
Online Store 1.0 と2.0 の違いとテーマ構造を理解してもらえればと思い、講座を作成しました。Shopifyのテーマ構造を理解するには、この理解からスタートするのが一番スムーズだと思います。
※「お気に入り」→「Udemyセール時」がおすすめです。
Shopifyテーマ OS1.0 → 2.0講座
【Shopify】既存テーマをオンラインストア2.0に移行する方法を学ぼう
テーマファイルの Templates フォルダにあるLiquidテンプレートをJSONテンプレートへ変換して既存テーマをオンラインストア2.0に移行する方法を学びます
Shopify Liquid学習 テーマ開発の基礎知識
イメージとして、WordPressの自作テーマ開発に似ています。
（※Online Store 2.0の自作テーマ開発は挑戦中のため、ここではOnline Store 1.0の開発方法となります。）
構成されている言語は、HTML、CSS、JavaScript、Liquid なので、HTML、CSS、JavaScriptで作成されたWebサイトであれば、それをLiquidでコードを書き換えていく感じです。
サーバーがShoifyのサーバーになるので、ローカル環境で開発を行う場合、自分のPCで仮想サーバーを立ち上げて開発というのができないので、Shopify Theme Kitというものを使って、Shopifyの開発用ストア（Shopify Partnerでアカウントを取得)とつないで行うことになります。
コーディングを間違えていたりすると、仮想サーバーを立ち上げて開発していると同じようにエラーが出て表示されないとかは同じなのですが、間違えている箇所を限定するのがむずかしかったりします。
Shopifyのテーマ開発に必要なスキル
基本的なマークアップ言語とプログラミング言語を習得している必要があります。
下記の基礎的なスキルがあれば、テーマを開発することは可能です。
- HTML/CSS
- Sass(Scss) ※Sassは非推奨に変更（2020年11月)
- JavaScript
- Liquid
ローカル環境で開発する場合
Shopify Theme Kitをダウンロードして
↓
ファイルを作成して、コマンドでcdと打って指定
↓
theme new -p=[your-api-password] --store=[〇〇〇〇.myshopify.com] --name=[任意のテーマ名]
↓
[your-api-password] → 取得したAPI
[〇〇〇〇.myshopify.com] → 自分のアドレス
name=[任意のテーマ名] → テーマの名前を決めて入力
※[ ] は省いて入力
APIを取得:「Shopify管理画面のアプリ管理」
→ 「プライベートアプリを管理する」 から作成
任意のテーマ名は英語表記
これで、必要なファイルが生成されるので、これをベースにして作成していく。
コマンドで Theme watch をすると同期されるので、ローカルのエディタで変更した内容がShopify online code editor に反映されていればOK！！
既存テーマがある場合①
theme get -p=[your-api-password] -s=[〇〇〇〇.myshopify.com] -t=[テーマid]テーマidの部分は、カスタマイズからコード編集するときのURLの最後の１１桁の数字でOKです！！
既存テーマがある場合②
使用するフォルダにconfig.ymlファイルを作成して
development:
password: API
theme_id: "テーマID"
store: https://〇〇〇〇.myshopify.comと記入して、コマンド（ターミナルに）下記を入れてダウンロードすればOKです。
Online Store 2.0の場合
Shopify CLI を使用します。
Shopify CLI をダウンロードして、
コマンドで下記のように打って
shopify login --store 〇〇〇〇〇〇.myshopify.com
Shopify Store にログインします。
新しくテーマを作成する場合は、コマンドで下記のように打って
shopify theme init
? Theme name と聞かれるので、任意の名前を入れるとDawnをベースに作成されます。
テーマ開発する手順
次に、オリジナルで開発するのであれば、WordPressの自作テーマ開発に似ています。
- ①デザイン
- ②コーディング
- ③Shopifyテーマ化
という順番でコーディングをして作成していきます。
※Online Store 2.0の自作テーマ開発は挑戦中のため、ここではOnline Store 1.0の開発方法となります。
Shopify Liquid学習 テーマ開発の学習教材
テーマ開発の学習教材①
僕が最初のShopify Liquidのオリジナルテーマ開発する為に使用した学習教材は、このUdemyの Build a Shopify Theme From Scratch教材になります。周りのフリーランスにも紹介した教材で、とても評判が良かったものになります。
#デイトラ独立サポート 28日目#今日の積み上げ
✅Shopify 学習/テーマ開発Shopify
liquid自作テーマが
やっと完成しました😄♫これを
ポートフォリオとしてECサイト制作の
営業活動に
活かしていきます↗️明日も
コツコツ
積み上げます💪#デイトラ#駆け出しエンジニアと繋がりたい pic.twitter.com/AwlOnd0Fx6— YOSUKE＠TRAVELER｜Webエンジニア × Shopify Developer (@YOSUKETRAVELER) April 28, 2020
Build a Shopify Theme From Scratch
Build a Shopify Theme From Scratch
Learn how to create themes in Shopify
おすすめの学習方法として、まずShopifyのテーマがどのような形で作られているか、一通り自分で作ってみることです。
この教材では、HTML,CSS,JavaScriptで作成されたサイトをShopifyのLiquidのテンプレート言語に書き換えていきます。
（学習する前に通常のWebサイトを作成できるスキルがあることが望ましいです）
上記の③Shopifyテーマ化を教えてくれるので、全体的な構造がわかるようになり、Liquidというテンプレート言語がどういったものなのか？がわかるようになるので、ぜひトライして欲しいと思います。
代わりの教材として、こちらのコースがおすすめです。
去年のブラックフライデーで購入しました。OS2.0のテーマ作成で、Dawnベースからではなく、0から作っていくコースです。今流行りのTailwindCSSも勉強できます。
Shopify Theme Development: Online Store 2.0 + TailwindCSS
Learn how to create Shopify themes for Online Store 2.0 (JSON Templates) using Shopify CLI, Liquid, & TailwindCSS
※実際の現場では、フルスクラッチで開発する案件はあまりありませんが、フルスクラッチで開発できる知識があれば、テーマのカスタマイズやAPIを使った様々な拡張開発案件など、幅広く対応することが出来るので、一通り学習してみることをおすすめします。
テーマ開発の学習教材②
オリジナルテーマ開発ではなく、既存のテーマをカスタマイズしていくことが学習できる教材も紹介しておきます。僕はテーマ開発の学習教材①で、一度オリジナルテーマを作って、あとはShopifyテーマカスタマイズ案件を実際に請け負って、実践でスキルをつけていきましたので、この教材は参考資料として使用しました。
#デイトラ独立サポート 46日目#今日の積み上げ
✅テーマカスタマイズ案件今日も
Shopify Liquidテーマ
案件にコミット変更箇所のコードが
複雑すぎて今日1日格闘した💦
大変だけど
実案件のこの状況が一番成長出来るので
明日も積み上げます💪#デイトラ#駆け出しエンジニアと繋がりたい— YOSUKE＠TRAVELER｜Webエンジニア × Shopify Developer (@YOSUKETRAVELER) May 16, 2020
Intro to Shopify Theme and Store Development with Liquid
Intro to Shopify Theme and Store Development with Liquid
Learn everything about Shopify Partner’s Account, Theme Customization, and creating Sections and Templates using Liquid.
テーマ開発の学習教材③
Shopify Liquid をがっつり学びたいという方は、こちらがおすすめです♪ Shopify Japan公認のコースで、OS2.0に対応、Shopfiy CLIを使って開発していきます。
デイトラShopifyアドバンスコース
デイトラShopifyアドバンスコース
Shopifyアドバンスコースでは、OS2.0に対応したテーマのコード編集を学び、カスタマイズ案件が受けられるレベルを目指すコースとなっています。
Liquidテンプレート言語 参考リンク
Shopify 公式サイト
Shopifyを学んでいる方で、EC初心者の方は下記に、僕がECサイトについて学習したおすすめ本を書いていますので、よかったらどうぞ。
【Shopify独学】EC初心者向けのおすすめ学習本 | YOSUKE-BLOG
Shopifyを学習してるけど、そもそもECサイトについてどのように勉強したらいいのかなー。おすすめ本があれば教えて欲しいなー。この記事のテーマ Shopify、EC初心者が知っておくべき基本的な構築・運営知識がわかる この記事を書いている僕は、Shopifyエキスパートで働いている現役フロントエンドエンジニアで、