Shopifyのinput settingsの透過度付きカラーピッカーを使用する:メモ

Horizonテーマなどでできていることの実現方法の調査に手間取ったので、今後のためのメモとして。

実現したいこと

• Shopifyのテーマエディタ内の設定で、透過度設定付きのカラーピッカーを配置する

下記画像のように、従来のカラーピッカーの横に透過度設定用の縦長スライダーが設置された状態にすることが目的です。

対応方法

{
  "type": "color",
  "id": "background_color",
  "alpha": true,
  "label": "背景色",
  "default": "#00000026"
}

上記のように"type": "color"にした上で"alpha": trueを追加することで表示できました。

参考

• Input settings

上記が"type": "color"に関するドキュメントですが、"alpha"に関しては記述がありません。

そこでHorizonテーマの内部を探して該当箇所を見つけ、その記述を試して確認しました。

結び

OS2.0以前はテーマファイルから簡単該当箇所までたどれましたし、Dawnテーマなどもそれなりに探すことができますが、ブロック主体のHorizonは内部が細分化され辿りづらい印象でした。

今後もHorizonテーマを調査する際には、以前よりも困難で時間がかかることを覚悟する必要があるかもしれません。