policy

ポリシーページをカスタマイズする

April 13, 2024公開

ポリシーページをカスタマイズする方法について解説します！

ポリシーページって何もいじれないと思いがちですが
この記事で解説しているコードでカスタマイズの幅が広がるのでよかったら最後まで見ていただけると

プライバシーポリシーを例に解説していきます

入力するコードはこちら

c_policies.liquid

sections（セクション）> c_policies.liquid


{{ 'c_policies.css' | asset_url | stylesheet_tag }}

{%- style -%}
  #shopify-section-{{ section.id }} {
    padding-top: {{ section.settings.padding_top }}px;
    padding-bottom: {{ section.settings.padding_bottom }}px;
  }

  @media screen and (max-width: 750px) {
    #shopify-section-{{ section.id }} {
      padding-top: {{ section.settings.padding_top_sp }}px;
      padding-bottom: {{ section.settings.padding_bottom_sp }}px;
    }
  }
{%- endstyle -%}

<div class="page-width page-width--narrow">
  <h1 class="c_policy__title{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
    {{ page_title }}
  </h1>
  <div class="c_policy__content rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
    {% if request.path == '/policies/refund-policy' %}
      {{ shop.refund_policy.body }}
    {% elsif request.path contains '/policies/privacy-policy' %}
      {{ shop.privacy_policy.body }}
    {% elsif request.path contains '/policies/terms-of-service' %}
      {{ shop.terms_of_service.body }}
    {% elsif request.path contains '/policies/shipping-policy' %}
      {{ shop.shipping_policy.body }}
    {% elsif request.path contains '/policies/legal-notice' %}
      {{ shop.legal_notice.body }}
    {% elsif request.path contains '/policies/subscription-policy' %}
      {{ shop.subscription_policy.body }}
    {% endif %}
  </div>
</div>

{% schema %}
{
  "name": "ポリシー",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "header",
      "content": "上下の余白"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 200,
      "step": 2,
      "unit": "px",
      "label": "上部の余白（PC）",
      "default": 32
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 200,
      "step": 2,
      "unit": "px",
      "label": "下部の余白（PC)",
      "default": 32
    },
    {
      "type": "range",
      "id": "padding_top_sp",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "上部の余白",
      "default": 32
    },
    {
      "type": "range",
      "id": "padding_bottom_sp",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "下部の余白",
      "default": 32
    }
  ]
}
{% endschema %}

c_policies.css

assets（アセット）> c_policies.css


.c_policy__title {
  color: #A8CA66;
}

※ファイルの読み込みを確認するためにタイトルの色を変えています

theme.liquid

layout（レイアウト）>theme.liquid


{% if
  request.path == '/policies/refund-policy'
  or request.path == '/policies/privacy-policy'
  or request.path == '/policies/legal-notice'
  or request.path == '/policies/terms-of-service'
  or request.path == '/policies/shipping-policy'
  or request.path == '/policies/subscription-policy'
%}
  {% section 'c_policies'%}
{% else %}
  {{ content_for_layout }}
{% endif %}

{{ content_for_layout }}で検索かけて丸っと上書きでOKです！

完成した物はこちら

テーマのカスタマイズでこんな表示になればOK
ヘッダーとフッターの間にポリシーセクションが入っていればできてます！！

プライバシーポリシーの設定方法

プライバシーポリシーの設定方法について解説します！

プライバシーポリシーはどこに入力する？

設定＞ポリシー＞プライバシーポリシーに入力します！

その他、利用規約や特定商取引法に基づく表記なんかもここに入力します

カスタマイズ画面で見てみる

赤枠を見てもらえると分かるのですが何も変更できません
直接コードを見てもイジれるところがありません。。

デフォルトのままだとできるのはCSSでの上書きのみで、複雑なレイアウトなどはできません

デザインにこだわったポリシーページ
プライバシーポリシーと特商法を同一ページに表示したい

など、よくポリシー専用のページを新規で作っているサイトなどを見かけますが個人的にはあまりお勧めしません！

なんでかというと
ポリシーについては管理画面の設定＞ポリシーに入力しておかないとチェックアウトページ（添付画像）で表示されないので
新規で作ったページとデフォルト箇所の２箇所入力しないといけません。

もし,運用していく中でテキスト修正が出てきた時、２箇所修正しないといけないのは手間だし、漏れが出そうですよね・・

ちなみに余談ですがタイトル部分の変更は
「デフォルトテーマのコンテンツを編集する」で変更可能です

タイトル変更した後がこちら

カスタマイズ画面でポリシーページに辿り着かない

ここで厄介なのがカスタマイズ画面からポリシーページには簡単に辿り着きません

基本画面上部中央の”ホームページ”をクリックしたら
いろんなページに飛べるのですがポリシーページに関しては飛べません
（もし知ってる方いたら教えて欲しいです）

カスタマイズ画面でポリシーページに行くには
メニューなどでリンク表示させてそれをクリックして遷移する必要があります

Dawnの場合一番簡単なやり方は
ポリシーのいずれかを入力した状態でフッターセクションの「ポリシーリンクを表示」にチェックを入れるとフッターにリンクが出現します！

コードの解説

コードについて解説します

ポリシー用セクション（c_policies.liquid）

sections（セクション）> c_policies.liquid

こちらのセクションでタイトルと本文を分けて出力できるようになるので

デフォルトと比べるとカスタマイズしやすくなります！


{{ 'c_policies.css' | asset_url | stylesheet_tag }}

{%- style -%}
  #shopify-section-{{ section.id }} {
    padding-top: {{ section.settings.padding_top }}px;
    padding-bottom: {{ section.settings.padding_bottom }}px;
  }

  @media screen and (max-width: 750px) {
    #shopify-section-{{ section.id }} {
      padding-top: {{ section.settings.padding_top_sp }}px;
      padding-bottom: {{ section.settings.padding_bottom_sp }}px;
    }
  }
{%- endstyle -%}

<div class="page-width page-width--narrow">
  <h1 class="c_policy__title{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
    {{ page_title }}
  </h1>
  <div class="c_policy__content rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
    {% if request.path == '/policies/refund-policy' %}
      {{ shop.refund_policy.body }}
    {% elsif request.path contains '/policies/privacy-policy' %}
      {{ shop.privacy_policy.body }}
    {% elsif request.path contains '/policies/terms-of-service' %}
      {{ shop.terms_of_service.body }}
    {% elsif request.path contains '/policies/shipping-policy' %}
      {{ shop.shipping_policy.body }}
    {% elsif request.path contains '/policies/legal-notice' %}
      {{ shop.legal_notice.body }}
    {% elsif request.path contains '/policies/subscription-policy' %}
      {{ shop.subscription_policy.body }}
    {% endif %}
  </div>
</div>

{% schema %}
{
  "name": "ポリシー",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "header",
      "content": "上下の余白"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 200,
      "step": 2,
      "unit": "px",
      "label": "上部の余白（PC）",
      "default": 32
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 200,
      "step": 2,
      "unit": "px",
      "label": "下部の余白（PC)",
      "default": 32
    },
    {
      "type": "range",
      "id": "padding_top_sp",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "上部の余白",
      "default": 32
    },
    {
      "type": "range",
      "id": "padding_bottom_sp",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "下部の余白",
      "default": 32
    }
  ]
}
{% endschema %}

{{ page_title }}こちらで各ページのタイトルを出力します


<h1 class="c_policy__title{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
  {{ page_title }}
</h1>

if文を使ってrequest.path（ページのパス）と各ポリシーページのパスが同じ場合の条件分岐でだし分けます

条件にマッチしたら
管理画面の「設定＞ポリシー」で入力したテキストを出力します


<div class="c_policy__content rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
  {% if request.path == '/policies/refund-policy' %}
    {{ shop.refund_policy.body }}
  {% elsif request.path contains '/policies/privacy-policy' %}
    {{ shop.privacy_policy.body }}
  {% elsif request.path contains '/policies/terms-of-service' %}
    {{ shop.terms_of_service.body }}
  {% elsif request.path contains '/policies/shipping-policy' %}
    {{ shop.shipping_policy.body }}
  {% elsif request.path contains '/policies/legal-notice' %}
    {{ shop.legal_notice.body }}
  {% elsif request.path contains '/policies/subscription-policy' %}
    {{ shop.subscription_policy.body }}
  {% endif %}
</div>

各ページのパスは以下になってます

返金ポリシー : refund-policy
プライバシーポリシー : privacy-policy
利用規約 : terms-of-service
配送ポリシー : shipping-policy
連絡先情報 : contact-information
特定商取引法に基づく表記 : legal-notice

カスタマイズ用CSSファイル（c_policies.css）

assets（アセット）> c_policies.css

ポリシーセクション用のCSSファイルになります
こちらは管理しやすいように作っているのでCSSカスタマイズする際にお使いください

レイアウトファイル（theme.liquid）


{% if
  request.path == '/policies/refund-policy'
  or request.path == '/policies/privacy-policy'
  or request.path == '/policies/legal-notice'
  or request.path == '/policies/terms-of-service'
  or request.path == '/policies/shipping-policy'
  or request.path == '/policies/subscription-policy'
%}
  {% section 'c_policies'%}
{% else %}
  {{ content_for_layout }}
{% endif %}

{{ content_for_layout }}で各ページテンプレートのコンテンツを出力するのですが

if文を使ってポリシーページの時だけ今回作るセクション（c_policies.liquid）を出力するようにしています

くどいかもしれませんが、c_policies.liquidと同じように
request.path（ページのパス）と各ポリシーのパスが同じ場合に出力します

まとめ

今回のコードはポリシーページでこだわったデザインをする時に使えるコードです
わざわざ別でページを作って入力の手間が増えるより絶対こちらの方がいいですよね！

基本的にどのテーマでもコピペで使えると思うので参考にして頂けると嬉しいです！

各種リンク

Back to blog

ショピクラ