開発

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

ECペンギンくん

新しく作った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”を適用します。という感じですね。

②もっと簡単にpagesに記載する方法

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

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

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

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

特定のページ/テンプレへの適用 【注意点】

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

注意点① テンプレが複数Pagesに適用されていた場合

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

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

注意点② CSS、JSファイルはAssetフォルダ内に

注意点②
  • 適用したいcss、jsファイルは、Assetフォルダの中にいれるようにしてください。下記コードはAssetのurlを指定しているため。

    {{ ‘new-style.css’ | asset_url | stylesheet_tag }}

注意点③ stylesheet と script タグを間違えないように

注意点③
  • cssファイルとJSファイルは、最後のタグ部分の記述が違うため、ご注意ください。

    スタイルシート
    {{ ‘new-style.css’ | asset_url | stylesheet_tag }}

    JSファイル
    {{ ‘new.js’ | asset_url | script_tag }}

以上いかがだったでしょうか。

スタイルシートはもちろん、JavaScript(JS)ファイルも個別にページに適用できると見やすくなること間違いなしです。大規模サイトの場合、全部同じcssファイルに記載していくと、非常に長くなってしまって困っていました。

参考になれば幸いです!