【Shopify】条件分岐の書き方
こんにちは。大野です。
前記事で書いた CSS のカスタマイズにおいて社内から「ページごとに読み込ませるものを変えられないのか」と疑問が上がったのでそれについて書きます。
できます。
▼ TOPページだけ CSS を読み込ませたい場合
{% if template == 'index' %}
{{ 'style.css' | asset_url | stylesheet_tag }}
{% endif %}▼ TOPページには「style.css」をそれ以外のページでは「page.css」を読み込ませる場合
{% if template == 'index' %}
{{ 'style.css' | asset_url | stylesheet_tag }}
{% else %}
{{ 'style.css' | asset_url | stylesheet_tag }}
{% endif %}{% if template == 'index' %} の index 部分を変更することでテンプレートの種類を指定することができます。種類は「テーマ > コードを編集する」で表示されるディレクトリ構造の中の「Templates」以下を指定すればOKです。
▼ カートのページの場合
{% if template == 'cart' %}
{{ 'style.css' | asset_url | stylesheet_tag }}
{% endif %}▼ コレクションごとに変えたい場合
{% if collection.handle == 'コレクション名' %}
{{ 'style.css' | asset_url | stylesheet_tag }}
{% endif %}このとき、「コレクション名」にいれるのは
https://hogehoge.jp/collections/コレクション名
となっている部分を入れ込みます。
collection.handle と同じような勢いで以下のような場合も指定可能です。
product.handle // 商品単体ページ
page.handle // ページ
条件分岐を覚えておくと、CSS だけでなくテキストなど違う場面でも活躍しますね。
アプロ総研では『はじめてEC』というサービスを運営しています。
EC初心者に向けて、初期構築を弊社が行いすぐに販売可能なサイトをお作りいたします。月々のサポートやウェビナーも開催されますのでEC初心者にも安心してご利用いただけます。
ご契約やサービス内容を詳しく知りたい場合は以下のお問合せページよりご連絡をお待ちしております！