Shopifyで、無料で簡単に、カスタムCSSを設定する方法
Shopify テーマで、どうしても気に入らない場所や、ブロックなどで、独自のHTMLを書き足したときに、カスタムCSS(追加CSS)を使いたい時があります。通常は、テーマファイルを編集し、独自のCSSを追加しますが、ここでは「無料アプリ」で、簡単に実現する方法を紹介します。
なお、2023年2月現在の情報です。
結論
追加したいCSSを書き加えて、保存するだけ
アプリのインストール方法
Shopifyの管理画面に移動し、アプリのインストールを行います。検索は、"Easy Custom CSS" です。
あとは、指示に従ってインストールします。
基本的な使い方
画面は非常にシンプルです。CSSを書き加える場所があり、書き加えたり、編集すると「Save」ボタンが現れます。Saveとすれば自動的に、カスタムCSSが設定されます。
これ以上、説明がいらないぐらい・・・。
なお、このアプリは「assetフォルダの中に、custum-style.css ファイルを作成」しています。アプリをアンインストールする場合は、最初に「記述を消して、Save」をします。からの状態にしてから、アプリをアンインストールしてください(と、書いています)。
使い方のヒント(1) CSSのテスト方法
Easy Custom CSS にいちいち書き込んで、保存して確認するのは、手間がかかります。そこで、アプリをインストールしたら、Google Chromeで「assetフォルダのcustom-style.css」を開いて、編集し、CSSのテストをすると良いです。
custom-style.css の場所は、探しづらいですが、以下のような情報を頼りにすると良いです。
開発機能を開き、ソースタブをクリックし、custom-style.cssを探します。cdn.shopify.com から探すと良いでしょう。
この開いた場所で、css を書くとテストできます。OKとなれば、そのCSSをEasy Custom CSS アプリで設定します。
使い方のヒント(2) bodyのclassを活用する
bodyのクラスには、利用しているテンプレート名に対応するクラスが割り当てられています。この仕組みを活用すれば、特定のページの、特定のクラスにだけCSSを割り当てることが容易になります。
なお、!important などを活用すると良いでしょう。