Shopifyテーマに自作CSSファイルを読み込ませ、カスタマイズする方法
「このままコーダーで、3年後も食べていけるだろうか？」
AIが進化するほど、手を動かすだけの作業者の単価は下がり続けます。これからのWeb制作で生き残るのは、AIに指示を出す「司令塔」側に回った人だけです。
14日間で「作業者」から「AI Webディレクター」へ転身する集中プラン『10倍速 AIワークフロー マスタープラン』を公開中です。プロの個別メンタリング＆8日間の全額返金保証付き。
（先着限定、5月10日まで）
» 「司令塔」側に回る14日間プランを見る
Shopifyテーマのカスタマイズで最も手軽なのが、CSSを使ったカスタマイズ。 CSSを変更・追加するだけでも、ストアの見た目は見た目は大きく変わります。
オリジナルのCSSファイルを作っておけば、既存のクラスを使ってストアの見た目を簡単にカスタマイズできます。デフォルトのCSSを上書きするわけではないので、万が一、見た目が崩れてしまっても修正・復元は簡単。本格的にテーマ制作を行う際にもCSSの読み込みは使うので、方法をおさえておきましょう。
アセットのファイルを読み込むフィルター
Shopifyテーマでは、CSSファイルやJavaScriptファイルはアセット（assets）ディレクトリに格納されています。オリジナルのCSSファイルやJavaScriptファイルを使いたい場合も、アセットディレクトリへ追加する形です。
そして、アセットフォルダ内にあるcss/jsファイルを読み込みたい時は、Liquidで以下のフィルターを使用して記述します。
| asset_url | 指定したファイルのURLを出力する |
|---|---|
| stylesheet_tag |
スタイルシートタグとして書き出す <link rel="stylesheet" href="〇〇"> |
| script_tag |
スクリプトタグとして書き出す <script src="〇〇" type="text/javascript"></script> |
https://shopify.dev/api/liquid/filters/html-filters
今回はCSSファイルの追加をやってみましょう。 JavaScriptファイルの場合もフィルターが変わるだけですので、CSSができればできますよ。
セクションからCSSファイルを読み込む
実際にオリジナルのCSSファイルを作成し、読み込めるか試してみましょう。 見本では、下記の記事で作ったlesson2.liquidを使います。 ※別のセクションファイルを利用されても構いません。
Skillhubブログ
1.CSSファイルの作成
Shopifyコード編集画面を開きます。
左側、 アセット のすぐ下にある「新しいアセットを追加する」をクリック。
上部タブで「空のファイルを作成する」を選択します。
拡張機能はCSSを選択し、ファイル名にlessonと入力してください。
完了ボタンをクリック。
アセットが作成され、白紙のlesson.cssが表示されます。
次のステップでCSSファイルを読み込めているか確認します。 わかりやすそうなCSSを少し書いておきましょう。
lesson.css
h3 {
color: red;
}
2.セクションファイルにLiquid追加
lesson2.liquidから、作成したlesson.cssを読み込みましょう。 使用するLiquidフィルターはasset_urlと、stylesheet_tagの２つ。
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を開きます。
このファイルに、先程と同じくasset_urlと、stylesheet_tagを使って、読み込みたいCSSを記述すればOKです。</head>の直上に貼り付けてみましょう。
以下のショートカットキーで、検索機能を立ち上げて探すとわかりやすいです。
- Win:Ctrl + F
- Mac:command + F
theme.liquid
{{ 'lesson.css' | asset_url | stylesheet_tag }}
上書き保存して、右上に表示されている「ストアをプレビュー」をクリック。
CSSが効いているか確認しましょう。
トップページや、上部メニューからコレクションを開いみてください。
h3見出しの文字、コレクションページであればコレクション名が赤色になっていたら成功です。
これで、２通りのオリジナルCSSファイルの読み込み方法は完了です。 CSSでカスタマイズするだけでも、デザインのバリエーションはグンと広がりますね。
まずは無料で7講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
5月10日まで