TORUBLOG
Shopify

[Shopify] ポリシーページをカスタマイズする方法（Debutテーマ）

[Shopify] ポリシーページをカスタマイズする方法（Debutテーマ）
  • ポリシーページの幅を変更したい
  • ポリシーページのレイアウトを自由に変更したい
そんなよくありがちな質問の解決策を紹介します。 ポリシーページとは、以下のページを指します。（）内はURLです。
  • 返金ポリシー（ /policies/refund-policy ）
  • プライバシーポリシー（ /policies/privacy-policy ）
  • 利用規約（ /policies/terms-of-service ）
  • 配送ポリシー（ /policies/shipping-policy ）
  • 特定商取引法に基づく表記（ /policies/legal-notice ）
  • サブスクリプションポリシー（ /policies/subscription-policy ）
※ 定期購買を導入している場合のみ、サブスクリプションポリシーが存在します。
Liquidコードを編集する際には、バックアップを必ず行い、テスト環境で確認を行うなど、自己責任のもとに行ってください。万が一不都合等が起きた場合でも当方は責任を負いかねますのでご注意ください。

Shopifyの無料体験をはじめる

ShopifyのDebutテーマでポリシーページを作成する

まず、デフォルトで存在する各種ポリシーページは、管理画面の「設定→法務関連」から編集できます。 以下です。 試しに返金ポリシーを設定してみます。 すると、以下のようになぜか幅が狭く表示されてしまいます。 ちょっと狭すぎに思いますが、デフォルトではこの幅になっています。 このポリシーページテンプレートは編集可能な領域に存在せず編集できないため、一番簡単なのはページ( /pages/ )として作成してしまう、というの良いかと一瞬思いますが、どうやらGoogle Merchant Centerを使っていたりする場合など、正規のポリシーページを使わないといけない、といった制約があるケースがあります。 そこでこのページテンプレートを変更できる方法を調べてみました。
チェックアウト画面（カート画面より先のページ）にあるフッターリンクの「返金ポリシー」「プライバシーポリシー」「利用規約」「特定商取引法に基づく表記」は管理画面の「設定」→「法務関連」に設定した内容が表示されるため、いずれにしてもその設定は必要です。

ShopifyのDebutテーマでポリシーページの幅を変更する

まず、幅が狭すぎるため、変更してみます。 なぜか、以下のCSSで幅が指定されています。 
.shopify-policy__container {
    max-width: 560px;
    max-width: 65ch;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}
しかも theme.css ではなく、別の編集できないファイルに設定されています。 そこで無理やりtheme.css または追加した別のCSSで、無理やり幅を変更します。 
.shopify-policy__container {
    max-width: 1200px !important;
}
以上で簡単です。（無理矢理ですが）

ShopifyのDebutテーマでポリシーページをセクション化してカスタマイズする

次に、そもそもポリシーページのコンテンツエリアをセクション化してしまいます。 そうすることで、自由にレイアウトやカスタマイズ、管理画面での入力設定などが可能です。 こちらは以下のサイトを参考にしています。（大変参考になりました！） Taking design control of Shopify Policies

セクションを作成する

まず、セクションファイルを作成します。 作成方法は通常のセクションを作成する時と同じです。 今回は返品ポリシーのため、 refund-policy.liquid というファイルをsectionフォルダに作成します。 今回はセクションの作り方は省略するため、Debutテーマの custom-content.liquid あたりを適当にコピーして、 refund-policy.liquid にしておきます。

セクションをポリシーページにのみ読み込む

次に、先ほど作成した refund-policy.liquid を、テンプレートに読み込みます。 /layout/theme.liquid ファイルの以下の箇所を探し、 
{{ content_for_layout }}
こちらをポリシーページのパスの場合は別のセクションを読み込むようにさせます。 
{% if request.path == '/policies/refund-policy' %}
  {% section 'refund-policy' %}
{% else %}
  {{ content_for_layout }}
{% endif %}
これで、返金ポリシーのページは指定のセクションを読み込むようになりました。「設定→法務関連」から入れたものは反映されなくなります。

セクションの内容を設定する

セクションの内容は、「オンラインストア→カスタマイズ」から、返金ポリシーページをリンクを辿るなどして開くことで編集可能になります。 このような感じで、セクションの作り次第では自由自在に作成できます。（ポリシーページなので凝ったページにはそもそもしないかとは思いますが） 以下のように、/policies/refund-policy のままカスタマイズができました。 先ほどのコードを、URLパスで振り分けることにより、他の利用規約などにも同様の方法でセクションを読み込ませることができます。 
{% if request.path == '/policies/refund-policy' %}
  {% section 'refund-policy' %}
{% elsif request.path contains '/policies/privacy-policy' %}
  {% section 'privacy-policy' %}
{% elsif request.path contains '/policies/terms-of-service' %}
  {% section 'terms-of-service' %}
{% elsif request.path contains '/policies/shipping-policy' %}
  {% section 'shipping-policy' %}
{% elsif request.path contains '/policies/subscription-policy' %}
  {% section 'subscription-policy' %}
{% else %}
  {{ content_for_layout }}
{% endif %}
以上です！

Shopifyの無料体験をはじめる

← Back to Home