shopifyでのif文の使い方〜特定のページでのコンテンツ削除・css適用方法〜

お疲れ様です。tagawaです。

本日はshopifyについてのお話しです。
shopifyとは、前回のブログでお話ししたEC-CUBEと同様、ECサイト向けのコンテンツ管理システムです。

今回は①特定のページからヘッダー・フッターを削除する方法、②特定のページのみにcssを適用する方法　をご紹介します。

今日ここの対応で行き詰まってしまい、nakamaさんの知恵を拝借してなんとか解決できたので備忘録も兼ねてブログに残しておこうと思います。

①特定のページからヘッダー・フッターを削除する方法

ヘッダー・フッター以外のコンテンツは基本的にshopifyの管理画面のカスタマイズから簡単に削除できるのですが、ヘッダー・フッターについては削除ボタンが出てきません。

そのため、特定のページから削除するためにはliquidファイルに条件分岐を指定する必要があります。

例えば、「about.liquid」から削除する場合は「theme.liquid」のヘッダーについての記載部分を以下に書き換えます。元々「theme.liquid」で読み込まれているヘッダーを、aboutページ以外で読み込むように指定します。これでaboutページにはヘッダーが読み込みされません。

{% if template != ‘about’ %}
 {% section 'header' %}
{% endif %}

フッターを削除する場合も同様で、「theme.liquid」のフッターについての記載部分をifで条件指定します。

また、特定の2ページから削除したい場合は「and」を使って2つのテンプレートを条件に追加します。例えば、「about.liquid」「contact.liquid」の2ページからヘッダーを削除する場合以下になります。

{% if template != ‘about’ and  template != ‘contact’ %}
 {% section 'header' %}
{% endif %}

②特定のページにだけcssを適用する方法

デフォルトではテーマのcss「base.css」が適用されています。独自でaboutページを作成する際など、特定のページにのみ独自のcssを読み込ませたい場合は先ほどのif文を応用することで適用ができます。
※適用させたいcssはassetsフォルダ内に格納してください。

▼aboutページにのみ、「about.css」を読み込ませたい場合

{% if template == ‘about’ %} 
 {{ ‘about.css' | asset_url | stylesheet_tag }}
{% endif %}

▼aboutページに「about.css」、contactページに「contact.css」、その他のページは「base.css」を読み込ませたい場合

{% if template == ‘about’ %}
 {{ ‘about.css' | asset_url | stylesheet_tag }}
{% elsif template == ‘contact’ %} 
 {{ ‘contact.css' | asset_url | stylesheet_tag }}
{% else %}
 {{ ‘base.css' | asset_url | stylesheet_tag }}
{% endif %}

if文に使う演算子は今回出てきた「!=」「==」以外も使用できますので、組み合わせ次第で様々な指定ができそうです。が、私の頭のキャパでは今日はこれでいっぱいですのでここまでにしようと思います…

jsと同じようなif文でも微妙に指定の仕方が違ったりと、後一歩のところが上手くいかず、脳みそフル回転だったため月曜からかなり疲れました。きちんと睡眠とって脳を休めようと思います！

では、本日もお疲れ様でした！