【Shopifyテーマカスタマイズメモ】触るファイルの確認【part1】

Shopifyのテーマのコードレベルでのカスタマイズを学んでいく。
その成果メモ。

コードがある場所

オンラインストア>テーマ>「...」>コードを編集

専用プログラミング言語「liquid」

上記クリックしていくと、ファイル編集ができるページへ。
shopifyはhtml/css/javascriptに加え、liquidというプログラミング言語を習得する必要がある。
liquidはhtmlのなかに記載する。
これによって、ファイル間の呼び出し(インクルード)、条件分岐、商品表示等ができるようになる。
MVCにおけるView。
カラーミーショップ等、一般的なECショップ構築とほぼ同じ仕様とみて問題なさそう。

ファイル構造

このなかでtheme.liquidが大親にあたるっぽい。
例えばtitleの箇所に以下の様に、「test」という文字列を追加すると、すべてのページのタイトル個所にtestという文字列が表示される。

 <title>
      {{ page_title }}test
      {%- if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif -%}
      {%- if current_page != 1 %} &ndash; Page {{ current_page }}{% endif -%}
      {%- unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless -%}
    </title>

設定画面などでユーザーが設定した情報は{{ hoge }}の様にかっこで囲うことで表示できるようになる。
上の例で、
{{ page_title }}は、設定>一般設定>ストアの詳細
で設定した値がレンダリングされる

条件分岐やループ処理は
{%- if current_tags %}
こんな感じで以下のようにすることで実装できる
{%- %}