Shopifyテーマに自作CSSファイルを読み込ませ、カスタマイズする方法

Shopifyテーマのカスタマイズで最も手軽なのが、CSSを使ったカスタマイズ。
CSSを変更・追加するだけでも、ストアの見た目は見た目は大きく変わります。

オリジナルのCSSファイルを作っておけば、既存のクラスを使ってストアの見た目を簡単にカスタマイズできます。デフォルトのCSSを上書きするわけではないので、万が一、見た目が崩れてしまっても修正・復元は簡単。本格的にテーマ制作を行う際にもCSSの読み込みは使うので、方法をおさえておきましょう。

• アセットのファイルを読み込むフィルター
• セクションからCSSファイルを読み込む
• 1.CSSファイルの作成
• 2.セクションファイルにLiquid追加
• Shopifyテーマ（ストア）にCSSを適用する

アセットのファイルを読み込むフィルター

Shopifyテーマでは、CSSファイルやJavaScriptファイルはアセット（assets）ディレクトリに格納されています。オリジナルのCSSファイルやJavaScriptファイルを使いたい場合も、アセットディレクトリへ追加する形です。

そして、アセットフォルダ内にあるcss/jsファイルを読み込みたい時は、Liquidで以下のフィルターを使用して記述します。

今回はCSSファイルの追加をやってみましょう。
JavaScriptファイルの場合もフィルターが変わるだけですので、CSSができればできますよ。

セクションからCSSファイルを読み込む

実際にオリジナルのCSSファイルを作成し、読み込めるか試してみましょう。
見本では、下記の記事で作ったlesson2.liquidを使います。
※別のセクションファイルを利用されても構いません。

Skillhubブログ

【Shopifyテーマカスタマイズ】最初に把握したいLiquidタグとオブジェクト知識まとめ

1.CSSファイルの作成

Shopifyコード編集画面を開きます。
左側、 アセット のすぐ下にある「新しいアセットを追加する」をクリック。

上部タブで「空のファイルを作成する」を選択します。
拡張機能はCSSを選択し、ファイル名にlessonと入力してください。

完了ボタンをクリック。
アセットが作成され、白紙のlesson.cssが表示されます。

次のステップでCSSファイルを読み込めているか確認します。
わかりやすそうなCSSを少し書いておきましょう。

lesson.css

h3 {
  color: red;
}

2.セクションファイルにLiquid追加

lesson2.liquidから、作成したlesson.cssを読み込みましょう。
使用するLiquidフィルターはasseturlと、stylesheettagの２つ。

lesson2.liquidの、一番上（1行目）に書くと良いでしょう。

lesson2.liquid

{{ 'lesson.css' | asset_url | stylesheet_tag }}

h3でマークアップされている文字が赤く表示されました！
追加したCSSが効いていることがわかりますね。

CSSファイルはlesson2.liquidから読み込んでいますが、CSSはセクションが使用されているページテンプレート全体に影響します。今回の場合だと、ホームページテンプレートだと他のセクションの見出しも赤くなっているはずです。
このセクションのh3タグだけ色を変えたい・サイズを変えたいなどの場合は、idやclassを付けて対応しましょう。

次のShopifyテーマ（ストア）にCSSを適用する、も続けて試される方は、lesson2.liquidに書いたCSSリンクをコメントアウトもしくは削除しておいてください。

lesson2.liquid

{% comment %}
{{ 'lesson.css' | asset_url | stylesheet_tag }}
{% endcomment %}

Shopifyテーマ（ストア）にCSSを適用する

Shopifyテーマ（ストア）全体で、同じCSSファイルを使いたい、ということもありますよね。
その場合は、theme.liquidの方から、アセットのCSSファイルを読み込みます。

theme.liquidは、レイアウトディレクトリにあります。
どのページテンプレートでも使う、大きな枠組みの役割を持つファイルです。

theme.liquidを開きます。

このファイルに、先程と同じくasseturlと、stylesheettagを使って、読み込みたいCSSを記述すればOKです。</head>の直上に貼り付けてみましょう。

以下のショートカットキーで、検索機能を立ち上げて探すとわかりやすいです。

• Win:Ctrl + F
• Mac:command + F

theme.liquid

{{ 'lesson.css' | asset_url | stylesheet_tag }}

上書き保存して、右上に表示されている「ストアをプレビュー」をクリック。
CSSが効いているか確認しましょう。

トップページや、上部メニューからコレクションを開いみてください。
h3見出しの文字、コレクションページであればコレクション名が赤色になっていたら成功です。

これで、２通りのオリジナルCSSファイルの読み込み方法は完了です。
CSSでカスタマイズするだけでも、デザインのバリエーションはグンと広がりますね。