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


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

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

Powered by Shopify を削除したい

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

検索で絞り込んだところ

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

半角スペースを入力して保存すればOK

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

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

ニュースレターの登録表示を削除するには、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 の運用やテーマ開発に携わっている方々の参考にしていただければと思います。

弊社ではJamstackの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!

投稿者 Yokota Tomoko

運用やアクセシビリティに配慮したHTML/CSSの設計やコンポーネント作成、スタイルガイドの構築、コードレビュー、組み込み、要件の整理、社内進行管理、顧客とのコミュニケーションまで、ジョインしたチームを前に進めるためにあれこれ担当しています。子育てと仕事のバランスを楽しめるよう、日々模索しています。