Shopify でストアのパスワードページをカスマイズする

こんにちは、 Gaji-Labo 横田です。Eコマース用のプラットフォームである Shopify によるサイト構築で、パスワードページをカスマイズする方法を紹介します。

パスワードページは、パスワードによるアクセス制限ができるShopify の機能で、ストアオープン前のティザーサイトとしてCOMING SOONの表示や、ショップの長期休業のお知らせなどに活用することができます。

Powered by Shopify を削除したい

Powered by Shopify 表記を削除するには、Shopify 管理画面から行います。
ライブテーマの場合は、削除設定 > ストアの言語 > テーマ言語を変更する 画面に入り、テキストの絞り込み検索にPowered と入力すると、「Powered by Shopify」ボックスが表示されます。

プレスホルダーで入っているテキストがそのまま表示されているので、キーボードのスペースキーを使用して半角スペースを入力し、保存します。

特定テーマの場合は、編集したいテーマのアクション > 言語を編集する画面に入り、同様の手順を行えます。

ニュースレターの登録表示を削除したい

ニュースレターの登録表示を削除するには、Shopify 管理画面から行います。
編集したいテーマのカスタマイズボタンを押し、上部のプルダウンから、その他 > パスワードページを選択します。

ヘッダー、コンテンツ、フッターというメニューの中から「コンテンツ」をクリックすると、デフォルトで ニュースレターの登録を表示する チェックボックスにチェックが入っています。このチェックを外し、保存します。

削除ではなく、デフォルトの見出しやテキストの変更は、同画面の各フィールドに入力し、保存することで可能です。

SNSボタンを削除したい

SNSボタン郡を削除するには、上記同様、Shopify 管理画面で編集したいテーマのカスタマイズから、パスワードページを選択します。
ヘッダー、コンテンツ、フッターメニューの中から「フッター」をクリックすると、デフォルトで ソーシャルメディアでの共有ボタンを表示する チェックボックスにチェックが入っています。このチェックを外し、保存します。

ロゴ画像を挿入したり見出しテキストを変更したい

パスワードページにロゴ画像を入れたり、デフォルトの見出しテキストを変更するには、上記同様、Shopify 管理画面で編集したいテーマのカスタマイズから、パスワードページを選択します。
ヘッダー、コンテンツ、フッターメニューの中から「ヘッダー」をクリックすると、ロゴ画像をアップロードするフィールドや、見出しテキストを変更するフィールドがあります。各フィールドに入力し、保存します。

変更点は json ファイルに反映される

ここまで行った変更は、全て json ファイルに反映されます。
Powered by Shopify の削除は、locales/ja.json に、ニュースレターの登録表示 / SNSボタン表示 / ロゴ画像の挿入 / 各テキストの変更は、 config/settings_data.json に変更が入ります。

まとめ

Shopify 管理画面で、容易にパスワードページのカスタマイズができますね。また、 json ファイルへ変更が入るため、Shopify Theme Kit で管理することも可能です。Gaji-Labo では今回のような管理画面でのカスタマイズも、Shopify Theme Kit と GitHub でコード管理し開発しています。（ Shopify Theme Kit での管理については Shopify Theme Kit で管理できる設定と管理できない設定もご覧ください。）

Shopify の運用やテーマ開発に携わっている方々の参考にしていただければと思います。

Shopifyでのサイト構築やテーマ開発に興味がある方、実践でのポイントを吸収したいと思っている方などにおすすめの内容です。