Shopify

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

  • ポリシーページの幅を変更したい
  • ポリシーページのレイアウトを自由に変更したい

そんなよくありがちな質問の解決策を紹介します。

ポリシーページとは、以下のページを指します。()内はURLです。

  • 返金ポリシー( /policies/refund-policy )
  • プライバシーポリシー( /policies/privacy-policy )
  • 利用規約( /policies/terms-of-service )
  • 配送ポリシー( /policies/shipping-policy )
  • 特定商取引法に基づく表記( /policies/legal-notice )
  • サブスクリプションポリシー( /policies/subscription-policy )

※ 定期購買を導入している場合のみ、サブスクリプションポリシーが存在します。

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 にしておきます。

[Shopify] コンテンツのレイアウトを自由にカスタマイズする方法(Debutテーマ)Shopifyでは、トップページは動的セクションに対応しており、豊富なセクションから簡単にページを作成できます。Debutテーマではその...

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

次に、先ほど作成した 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 %}

以上です!

ABOUT ME
toru
フリーランステクニカルディレクター・UI/UXデザイナー。 Web制作会社10年・フリーランス6年の経験をもとにWebサイト・ECサイト構築・運用支援を行うかたわら、Web制作スキルを身につけたい方や、フリーランスを目指す方に向けて、自分の経験をもとに役に立つ情報をわかりやすく発信していきます。