こんにちは🌞

Webデザイナーの髙井です。

今回の記事では、Shopifyのレイアウト・テンプレートに格納されているファイルと、その役割をまとめました。

たくさんあるファイルの中から、手っ取り早く該当ファイルを見つけたい！という方の参考になれば幸いです!!

それでは見ていきましょう!

はじめに

ShopifyではHTML、CSS、JavaScriptに加えて、LiquidとJSONという言語が使われています。

初めての方もいらっしゃると思いますので、それぞれの言語の概要をお伝えしたいと思います。

Liquid

Liquidは、Rubyという言語を使われたテンプレート言語で、Shopify社が独自開発しました。

他のプログラミング言語同様に構文が用意されており、HTML、CSS、JavaScriptの中に書き込むことができます。

二重波括弧で囲まれている部分、波括弧と％で囲まれている部分がLiquidです！

 {% sections 'header-group' %}

    <main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
      {{ content_for_layout }}
    </main>

{% sections 'footer-group' %}

Liquidの詳しい説明は、改めて投稿したいと思います！

JSON

JSONは”JavaScript Object Notation”の頭文字をとったもので、名前の通りJavaScriptの記述方法が用いられています。

JSONは波括弧の中にコードを記述します。

左側にキー（work、name）と右側にバリュー（Webデザイナー、髙井）をセットで記述するのが基本構文です。

{
  "work"： "webデザイナー",
  "name"："髙井"
}

このように書いておくと、コードの中で『work』や『name』と書くだけで『Webデザイナー』や『髙井』が勝手に読み込まれるようになります。

数学で例えるならば『x＝５とおく』の状態です。

さて、難しい言語の話はそこそこにして、早速ファイルについてみていきましょう！！

以降は『Dawn』というShopifyのテーマのファイルを参考にして説明します！

テーマによって、コードに多少差があるかもしれませんのでご了承ください。

レイアウト

レイアウトはテーマ全体に関わるファイルが格納されています。

デフォルトではpassword.liquidとtheme.liquidの２つのファイルが入っています。

基本的にtheme.liquidが使われていますが、パスワードの入力が必要なページのレイアウトにはpassword.liquidが使われます。

レイアウトに格納されているファイル一覧

コード編集で以上の２つのファイルを触ることはほぼありませんでしたので、ご安心ください！！

私がこれらのファイルを触ったのは以下の場合です！

1.Webフォントのlinkタグを貼った時

2.base.cssの記述内容を変更したい時に、直接変更せず、内容を上書きするcssを自作して適用させた時

3.jQueryやslickなどのファイルをscriptタグで読み込ませた時

テンプレート

テンプレートはストアの各ページの基本となるファイルが格納されています。

テンプレートに格納されたファイルではJSONが使われています。

以下のコードを見てください！

こちらは固定ページに使われるpage.jsonのコードです。

{
  "sections": {
    "main": {
      "type": "main-page",
      "settings": {
        "padding_top": 28,
        "padding_bottom": 28
      }
    }
  },
  "order": [
    "main"
  ]
}

「え！こんな少ないコードで何ができるの??」と思われた方、そのお気持ちわかります。

実はテンプレートに格納されているファイルには、サイトの見た目に関する記述はほぼありません。

サイトが表示されているのはセクションに格納されているファイルのおかげです！

４行目にセクションの中に格納されているファイルと連動させる記述があります。

今回の場合は、セクションの中にあるmain-page.liquidが該当します。

テンプレートに格納されているファイル一覧

読み込まれているファイルを確認したい時は…

Shopifyでコード編集をする時、「このページに読み込まれているテンプレートが知りたい！」と思ったことはありませんか??

私は何十回と思っていて、調べ続けた結果見つけました!!!!

以下のコードをtheme.liquidの最下部に貼り付けると、検証（デベロッパー）ツールのコンソールタブで確認できます。

<script>console.log("{{ template }}");</script>
</body>
</html>

こちらのコードはねたまめ.comさんの記事を参考にさせていただきました！

最後に

いかがでしたでしょうか??

私自身、Shopifyを触り始めて１週間以上、編集するファイルを見つけるだけで1時間潰れるような状態でした。

案件を担当することが決まってから本を読んだり、実際にコード編集をしながら、２週間ほど経ってやっと慣れてきたかなと思える瞬間が増えてきました。

他のファイルの役割や、コードの書き方、実際にサイトをカスタマイズして学んだことを、今後発信していきたいと思っています。

ぜひまた読みにきていただけると嬉しいです！！

最後までご覧いただき、ありがとうございました。

アイキャッチのイラストはこちらから→Phone illustrations by Storyset