【初心者用】Shopify Liquid 学習方法のまとめ

PROGRAMMING Shopify

YOSUKE DESIGN

ShopifyのLiquidを学習する人が増えましたので、少しでもお役に立てればと。ここに学習したことのアウトプットして整理しました。
※使用した学習教材を追記しました。
※Online Store 2.0の内容を追記しました。

この記事のテーマ

【初心者向け】Shopify Liquid 学習方法について

この記事の内容

  • ① Shopify Liquid学習 コードの基礎知識
  • ② Shopify Liquid学習 テーマのファイル構成
  • ③ Shopify Liquid学習 テーマ開発の基礎知識
  • ④ Shopify Liquid学習 テーマ開発の学習教材

この記事を書いている僕は、2020年からShopifyエキスパートで働いて、現在はShopifyフリーランスエンジニアとしてストア構築、テーマ開発をしています。デイトラというオンラインスクールでShopifyコースのメンターもしています。

Shopify Liquid学習 コードの基礎知識

Shopify Liquid学習 コードの基礎知識

LiquidはShopifyの共同創設者兼CEOのTobiasLütkeによって開発された、Rubyで書かれたオープンソースのテンプレート言語です。

Shopifyのテーマを作成、あるいはカスタマイズする場合、このLiquidテンプレート言語を理解しておく必要があります。

Shopifyのテーマのコードを変更するには2種類の方法があります。

  • ①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です。

この2つは、Shopify管理画面から行うテーマカスタマイズの設定を行うファイルになります。

Schemaを使ってコーディングが出来ると、管理画面上のデザイン編集をより便利になるようにしたり、Shopify Liquidテーマ開発の幅がぐんっと上がるので、ぜひ理解してみてください。

Locales

入っているファイル:ja.json ファイルなど

言語ごとの翻訳jsonファイルが格納されているフォルダで、日本語の記述を変更したい場合は、このja.jsonで翻訳されている日本語を変更することで可能になります。

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-password] --store=[your-store.myshopify.com] --name=[theme name]
    


    [your-api-password]  → 取得したAPI
    [your-store.myshopify.com] → 自分のアドレス
    name=[theme name] → テーマの名前を決めて入力
    

これで、必要なファイルが生成されるので、これをベースにして作成していく。

コマンドで Theme watch をすると同期されるので、ローカルのエディタで変更した内容がShopify online code editor に反映されていればOK!!

もっと早い方法は、config.ymlを作成して、

theme get -p=[your-password] -s=[you-store.myshopify.com] -t=[your-theme-id]

idの部分は、カスタマイズからコード編集するときのURLの最後の11桁の数字で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学習 テーマ開発の学習教材

テーマ開発の学習教材①

僕が最初のShopify Liquidのオリジナルテーマ開発する為に使用した学習教材は、このUdemyの Build a Shopify Theme From Scratch教材になります。周りのフリーランスにも紹介した教材で、とても評判が良かったものになります。

Build a Shopify Theme From Scratch


  
おすすめの学習方法として、まずShopifyのテーマがどのような形で作られているか、一通り自分で作ってみることです。

この教材では、HTML,CSS,JavaScriptで作成されたサイトをShopifyのLiquidのテンプレート言語に書き換えていきます。
(学習する前に通常のWebサイトを作成できるスキルがあることが望ましいです)

上記の③Shopifyテーマ化を教えてくれるので、全体的な構造がわかるようになり、Liquidというテンプレート言語がどういったものなのか?がわかるようになるので、ぜひトライして欲しいと思います。

※実際の現場では、フルスクラッチで開発する案件はあまりありませんが、フルスクラッチで開発できる知識があれば、テーマのカスタマイズやAPIを使った様々な拡張開発案件など、幅広く対応することが出来るので、一通り学習してみることをおすすめします。

テーマ開発の学習教材②

オリジナルテーマ開発ではなく、既存のテーマをカスタマイズしていくことが学習できる教材も紹介しておきます。僕はテーマ開発の学習教材①で、一度オリジナルテーマを作って、あとはShopifyテーマカスタマイズ案件を実際に請け負って、実践でスキルをつけていきましたので、この教材は参考資料として使用しました。

Intro to Shopify Theme and Store Development with Liquid

テーマ開発の学習教材③

その他で、僕がShopify Liquid学習に参考にした別教材のリンクを載せておきます。
興味があればぜひ♫

Liquidテンプレート言語 参考リンク
Shopify 公式サイト

Shopifyを学んでいる方で、EC初心者の方は下記に、僕がECサイトについて学習したおすすめ本を書いていますので、よかったらどうぞ。