[Shopify]特定のstyleシートやJavaScriptファイルを一部のページにのみ適用する方法

2020年9月21日

新しく作ったLPにだけnew-style.cssを適用したいんだよなぁ。でも普通にtheme.liquidで読み込むとサイト全体に適用されてしまう。。

と思っていたらぴったりの方法が見つかりました！

stylesheetはもちろん、特に全体にJavaScriptファイル適用したくない時も活用できる方法です。

①theme.liquid でテンプレートに適用する方法

まずは”theme.liquid”ファイルに記載していく方法です！

“theme.liquid”は、自分のShopifyサイトの全ページに適用されるとても大事で中核を担うliquidファイルです。

一般的にstylesheetやJS(JavaScript)ファイルを追加する際は”theme.liquid”ファイルにこのように記載していきます。

//スタイルシート適用する {{ 'new-style.css' | asset_url | stylesheet_tag }} //JSファイルを適用する {{ 'new.js' | asset_url | script_tag }}

theme.liquid内のどの場所に記載していくかは別問題になりますが、上記のコードでサイト全体に”new-style.css”と”new.js”ファイルが適用されました。

が、、、

今回やりたいのは、例えば /pages/landing-page など特定のページにのみ適用する方法です。

大事なのは『適用したいページに何のテンプレートが使われているか』です。このテンプレートを元に”theme.liquid”に記述します。

ポイント！

→適用したいページに何のテンプレートが使われているか

上記ページでは、テンプレートに”page.new-lp”というものが使われていますね。

このページにだけ適用したい場合、

//new-lpというテンプレートにのみ適用
{%- if template contains 'new-lp' -%}
	{{ 'new-style.css' | asset_url | stylesheet_tag }}
{%- endif -%}

というのが解決方法になります。

もしテンプレート内に”new-lp”というテキストがcontain（含まれていた）されていた場合、”new-style.css”を適用します。という感じですね。

ただもっと簡単にやりたいって人は、もう直接該当ページのliquidファイルに記載しちゃいましょう。

{{ 'new-style.css' | asset_url | stylesheet_tag }}

を

こんな感じでShopifyテーマのコード編集から適用したいテンプレートの一番上に入れちゃいましょう。

この方法でも適用できますが、大規模なECサイトや複数人でサイトを運用している場合だと”theme.liquid”ファイルでどのcss, jsファイルが適用されているのかひと目で見れた方が分かりやすいと思います。

ここからは上記方法でちょっとやってしまいそうなミスと注意点についてまとめました。ご参考までに。

注意点①

new-lpテンプレートに”new-style.css”を適用しているので、もしテンプレートを使用する他ページにも上記スタイルシートが適用されてしまします。（基本的に同じテンプレを使用していれば同じstyleやjs処理が必要になるはずなので、問題はないはずです。）

もし同じテンプレで異なるstyleやJS処理を適用したい場合は、テンプレを複製し、個別に適用します。