HOME » BLOG » \コピペで簡単!/Shopifyのポリシーページのデザインを綺麗に整えよう

BLOG\コピペで簡単!/Shopifyのポリシーページのデザインを綺麗に整えよう

\コピペで簡単!/Shopifyのポリシーページのデザインを綺麗に整えよう

\コピペで簡単!/Shopifyのポリシーページのデザインを綺麗に整えよう

こんにちは!
Shopifyのテンプレートをそのまま入れて各ポリシーページを作成すると、画面幅に対してのコンテンツ幅や、余白など見づらいページができたことはありませんか?
かといってコードを編集する知識がないと簡単には修正もできず仕方なくテンプレートのまま使っているショップさんも多いかもしれません。
ポリシー内容はなかなか0から考えるのは大変なので、テンプレートを上手に活用しながら綺麗なページを構築いただくのが1番おすすめです!
今日の記事では、そんな皆様にコピペだけで簡単に綺麗なポリシーページを作れるコードも最後に掲載しているので是非チェックしてみてください!

Shopifyのポリシーページ一覧とテンプレートの設定方法

Shopifyの管理画面では下記のページはテンプレートが用意されています。
・返品と返金ポリシー
・プライバシーポリシー
・利用規約
・特定商取引法に基づく表記

各ポリシーのテンプレート設定は、管理画面の左下の 設定をクリックし、

管理画面の設定

設定画面内の一番下のポリシーをクリックし、

管理画面ないのポリシー設定

該当のポリシーをクリック(今回は特定商取引法に基づく表記)

特定商取引法に基づく表示の設定管理画面

その中のテンプレートを挿入をクリック

特定商取引法に基づく表示のテンプレート設定

そうすると下記のようなページができあがります!

特定商取引法に基づく表示のページ画面

しかしこのままでは見出しも1文字落ち、文字も詰まってみてるので、見た目も微妙ですよね・・・。
この後綺麗に設定するための方法をご紹介します。

コピペでできる綺麗なポリシーページの設定方法

今回最後にコピペするコードの内容をダウンロードできるようになっているので、そのコードの設定方法をご紹介します。

まずHTMLを管理画面のポリシー画面を開き、下記赤枠のボタンをクリック

特定商取引法に基づく表示のコード編集箇所

ファイル内の各ポリシーのHTMLをここに貼り付けて各日本語箇所をショップの情報に変更してください。

CSSファイルは管理画面のテーマのカスタマイズ横の•••内のコードを編集をクリック

CSSコードの編集

コードの中で、ページ全体に利用されているCSSファイルの最終行に記載します。
例:Dawnでは、base.css

CSSコード編集箇所

特定商取引法に基づく表記はファイル内に入っているコードをそのまま貼っていただき、その他のポリシーはpolicy_boxを利用したHTMLを組んで書いてもらえれば、ファイル内のCSSできれいに表示されます。

まとめ

なかなかコードの知識がないとテンプレ感のあるサイトになりがちですが、今回の内容で少しでも見やすいページに整えることができればと思います。
やってみたけどうまくいかないなどあればお気軽にお問い合わせくださいね。
次回のブログもおたのしみに!

お問い合わせはこちら

\コピペで簡単!/Shopifyのポリシーページのデザインを綺麗に整えよう

Shopifyのポリシーのデザインを整えるコードを準備しました。
下記リンクからダウンロードいただけます。

ダウンロード
SHARE: