Shopifyのカスタマイズの雑多なメモ

最近いろいろ追加しているのでまとまりをつけることが難しいため、一時的(予定)にではありますが、まだまとめられない事柄を記載しているメモです。

更新情報

• Recent changes to Shopify’s platform

Shopify全体の開発者向け更新履歴が記載されています。Debutなどのテーマに関しての更新情報もありますが、〇〇という機能が追加された程度の情報しかないようです。

基本

liquid

• Shopify Cheat Sheet — A resource for building Shopify Themes with Liquid
  チートシート
• Liquid template language reference
• Whitespace control – Liquid template language

{% comment %} 出力 {% endcomment %}
{{ value }}

{% comment %} ロジックと制御 {% endcomment %}
{% if value > 1 %}{% endif %} 

{% comment %}
 ハイフォンをつけることで空白をなくす
 空白とは、例えば以下の場合、ハイフンがないと{{ }}と{% %}の行の、合わせて2行の空行を出力してしまう
{% endcomment %}
{{- value -}}
{%- if value > 1 -%}{%- endif -%} 

フィルター

• Liquid filters
  Shopify専用のもの。つけることで、ファイル名にパスが自動で補完されて出力されるなど。
• escape – Liquid template language
  Liquid本来のもの。サニタイズ用。

変数の中身や設定値の確認(var_dumpやconsole.logのようなもの)

• Printing / Echoing / Dumping Arrays · Issue #121 · Shopify/liquid

{% comment %} json形式で出力 {% endcomment %}
{{ section.settings | json }}

ただし全てに対して使えるわけではなく、以下のようにJSONでの出力が拒否される場合もある。

{"error":"json not allowed for this object"}

他にも、JSONで出力すると存在は確認できるが実際には出力できないものや、JSONにはないが実際には出力できるものも確認している。

値がnullや空欄の場合

• if condition on empty string · Issue #223 · Shopify/liquid
• liquid/context.rb at 5c5e7de31e6d0da5529b642669343ab4b08afa4f · Shopify/liquid
• Truthiness and falsiness in Liquid
  戻り値の真偽に関して

{% if my_variable == blank %}

テーマエディタの入力欄が未入力の場合、値をJSONで出力するとnullが帰ってきた。

そのためこの場合だけならnullで判定できるかもしれないが、Shopify の liquid ではblankを使う事になる。

assetsディレクトリの下層にディレクトリは作成できない

• Subdirectories under “assets” – Shopify Community
• Subdirectories under assets – Shopify Community

上記の1つ目は2013年だが、2つ目は2020年でありこの時点でもassetsディレクトリの下層にサブディレクトリ的にディレクトリを追加することはできない。

7年という経過年数を考えると今後もできないかもしれない。

そのため画像もJSもCSSもassetsディレクトリの同階層におくしかない。

なお、1つ目のフォーラムにてShopifyのスタッフから以下のように返答があり、CDNに起因する問題とのこと。

That limitation comes from the CDN that we use.

テーマのJSに書くか、assetsディレクトリにJSを追加するか

正直なところ判断がつかないが、既存テーマのカスタムの場合はassetsの方が追加箇所がわかりやすく便利かもしれない。

別の視点では、JSのみで実現できるカスタマイズしかしないなら、テーマの更新の可能性を考えるとassetsを使った方が良いように思う。

assetsの中のJSを消せばテーマの更新ができそうなのが理由(他に手を加えていなければデフォルトの状態になっているから)。

ただ、テーマ更新時になんらかの方法でファイルの状態がチェックされていた場合、assetsに追加した履歴が確認できてテーマ更新ができないのではという懸念もある(未確認なので不要な心配かも)。

公式でこの辺りに触れている個所がありそうだが探せていない。

CSS

CSS

• theme.scss.liquidなどにCSSを記載するか、新たにscss.liquidをつけたファイルを作成する
• liquidのassignを使った管理画面の設定を反映する箇所がある
• $はRubyのグルーバル変数ではなくSCSSの変数(たぶん)
• theme watchしていれば、画像はassetsディレクトリに入れると自動で同期される

{% comment %} 背景画像設定例 {% endcomment %}
$body-bg: #{'{{ "bg.jpg" | asset_url }}'};
body{
  background: {
    image: url($body-bg);
    repeat: repeat;
    position: center;
  }
}

インラインCSS

• Theme tags

{% style %}
  .hero__background-color-container {
    background-color: {{ section.settings.background_color }}
  }
{% endstyle %}

{% comment %}以下のような状態で出力される{% endcomment %}
<style data-shopify>
  .hero__background-color-container {
    background-color: 設定した色;
  }
</style>

上記の書き方であれば、主にsectionやsnippetなどに記載し、テーマエディタの設定を読み込んで反映する目的で使われる。

このようにliquidファイルに記述することでインラインのCSSとして出力される。のではあるが、出力箇所は記述箇所と同じ位置になるため、単にページ途中にstyleタグが出力されるだけのように見える。

data-shopifyが追加されているので何かしら特殊な動作(まとめてCSSが作成されるなど)を期待したいが、そういった情報は見つからずレンダリングの邪魔になるのではと少々不安。

フォームのカスタマイズ

• Liquidを使用したShopifyのフォーム作成について — Shopify パートナー

テーマエディタ

管理画面のテーマカスタマイズ画面左の項目

• セクションとテーマ設定 · Shopify ヘルプセンター
• setting_scheme.json内の記述で各項目を表示させている
• typeidlabeldefaultなど必要な項目を適宜設定する(既存のものはここを変更すれば管理画面内の記述を変更可能)

API

webfook

• Manage webhooks with the Admin API

ストアの表示

ヘッダー右上などにある顧客用ログインアイコンやボタンが表示されない

• 「設定>チェックアウト>顧客アカウント」で「アカウントを無効化する」にチェックが入っているためなので、任意か必須に切り変える

購入時に自動あるいは任意でアカウントを作成する形にしないと、自動でアカウントが作成されず、ログインアイコンなどが一切表示されない。

ストア内検索

カスタム検索のカスタマイズ

• Shopifyストアフロントのカスタム検索を改良する方法 — Shopify パートナー

アプリ構築

• 埋め込みアプリの読み込みをすばやく確実におこなう方法 — Shopify パートナー
• Shopify Webhook：BFCM時期に向けてアプリを準備しよう — Shopify パートナー
  AWSを使ったアプリ構築の方法の概要

結び

APIやwebfookやアプリはほぼ触っていないので、そのあたりは五里霧中。